Installation Steps
Follow these steps to install the Shortcode Plugin on your blogger blog.
1 Go To Blogger > Template > Backup your template
2 Click Edit HTML
3 Search </body>
4 Paste the following dynamically updated JS file just above it
<!-- Blogger Shortcode Plugin Dynamic JS File -->
<script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>
5 Next Search For <head>
6 Paste the following CSS files just below it
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Note that in the above code I have included latest versions of jQuery and FontAwesome libraries. I suggest that you use these versions instead of any old versions you may already be using.
7 Save your template and you are all done!
New functions are dynamically inserted inside the Shortcode JS file and you need to install it only once. I will keep updating this page to introduce any update made to the script and new shortcodes created will be appended to the Table List on this page.
Shortcode Syntax
Shortcodes have a name and attributes. The attributes are options that help you configure an object. Shortcodes are symbolized by Square brackets. The braces are opened and closed just like HTML but with a much simpler format as shown below:
Suppose you need to embed a Dailymotion video inside your blog posts, sidebar or blog comments then you can do it in two ways.
or simply
Now if you wish to change the color of the player button, hide player info and edit the player dimension then you can insert attributes as shown below
or simply
Note that the above is just an example, full details on how to use a dailymotion shortcode will be shared in its own tutorial
Syntax Errors
Avoid making these mistakes when typing shortcode names and attributes:
Don't use camelCase or UPPER-CASE for attribute names or Shortcode names. Use only lowercase characters
Don't add spaces between Shortcode Names and the Square Braces
Shortcode macros may use single (') or double quotes (") for attribute values, or omit them entirely if the attribute value does not contain spaces.
is equivalent to
A space is required between the shortcode name and the shortcode attributes. When more than one attribute is used, each attribute must be separated by at least one space.
The shortcode parser does not accept square brackets within attributes.
How Does This Shortcode Plugin Works?
Shortcodes are written by providing a handler function "mbt(html)" . Shortcode handlers are broadly similar to WordPress filters: they accept parameters (attributes) and return a output. We used a jQuery function to parse through Square bracket content and attributes and then replace the Square bracket DOM with the HTML version and ignore or escape those Square braces which are enclosed across a name which is not registered through the global variable "var bhf". The Parser function recognizes registered shorctodes through the global variables only. Locations where shortcodes will work include Widgets, Blog Posts, Pages and Blog comments. Shortcodes placed elsewhere will be escaped.
Đăng nhận xét