What is a Blogger Shortcode?
How Different is it From Wordpress Shortcode?
List of Supported Shortcodes
|[accordion]||Accordion is a vertically stacked list of items where each item can be "expanded" or "stretched" to reveal the content associated with that item. Items can be Toggled on and off easily. An example is the accordion widget|
|[tab]||Tab widget allows multiple documents or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of document. An example is the Multi Tab Widget|
|[code]||Embeds syntax Highlighter which preserves the original formatting of source code|
|[table]||Create responsive and fancy HTML Tables with multiple Rows and Columns|
|[quote]||Inserts a Fancy Blockquote|
|[button]||Inserts colorful CSS3 Buttons|
|[icon]||Insert FontAwesome icons anywhere with custom options support|
|[soundcloud]||Embeds SoundCloud Track|
|[dailymotion]||Embeds Dailymotion Video|
|[youtube]||Embeds YouTube Video|
|[divider]||Inserts a Horizontal Separator to divide a section, also contains a Back To Top button|
|[num]||Inserts a Number enclosed inside a circular background|
|[warning]||Inserts a box with Warning message|
|[success]||Inserts a box with Success message|
|[alert]||Inserts a box with Alert message|
|[info]||Inserts a box with Some Information message|
|[update]||Inserts a box with Update status message|
|[facebook]||Embeds Facebook Page Plugin|
|[image]||Embeds Images anywhere you want in clear cut resolution!|
|[tooltip]||Inserts a Fancy CSS3 Tooltip above or below hyperlink to show extra info|
- You can now also suggest us which shortcode to create
Installation StepsFollow 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 -->5 Next Search For <head>
6 Paste the following CSS files just below it
<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'/>
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 SyntaxShortcodes 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.
[dailymotion src="x2lhjki" /]
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
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0"][/dailymotion]
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0" /]
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 ErrorsAvoid 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.
[table col='123' row=456]is equivalent to
[table col="123" row="456"]
- 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.
[tag attribute="[Some value]"]
How Does This Shortcode Plugin Works?
Credits© 2008-2015 STCnetwork.org.
Version: 1.0 (29-March-2015)
We would like to thank Wordpress for sharing their helpful API that helped us better understand some core logics. Indeed they are the pioneers behind this idea.
We would like to thank Tien Nguyen for providing an idea of how to traverse through a loop using jQuery and replace the Square brackets with HTML tags.
We would like to thank Ahmed Nasir for helping us in debugging the script and making it possible to embed shortcodes within Comment iframe windows.
What is Next?
Need Quick Help within 24 Hours? ASK NOW
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »