Surprise! After having served Blogger for over 5 years we are back again with yet another plugin that will transform blogger templates and especially blogging like never before. Equipping it with a system that will make web designing and creation of widgets a piece of cake! STCnetwork is proud to Introduce Blogger Shortcode Plugin that will let you add Web elements with very little effort without using any long complicated, ugly code. You can now insert videos, audios, photo gallery, tabs, accordions, etc. with just a single line of code inside your posts, widgets, sidebars and guess where else? also inside your Blog Comments! Embedding Objects in Blogger was never that easy before. Today we are taking blogger to the next Level. Lets get started!
What is a Blogger Shortcode?
Blogger shortcode is a macrocode i.e. a single line of code that contains a set of instructions which lets you do nifty things with no effort at all. Shortcodes can help you embed files or create objects in BlogSpot blogs with a single line of code that would normally require a lot of complex, long ugly code.
You can now easily insert objects such as Videos, Audios, Files, Slideshows and all important web elements such as accordions, tabs, colorful buttons, boxes etc. inside Header, Sidebar, Footer, Posts, Pages, Titles and amazingly even inside comments! It requires no prior knowledge of HTML, CSS or JavaScript. The plugin is extremely lightweight and its multiple-embed-support will reduce your Page Load time by 50%.
How Different is it From Wordpress Shortcode?
Wordpress has been our biggest source for inspiration and it would have never been possible to develop this plugin for Blogger if the logic was not already present. We simply converted the PHP functions into jQuery functions which are both platform independent and easy to implement.
Unlike Wordpress shortcodes which can only be inserted inside Post content, Blogger shortcode plugins lets you insert content even inside widgets and Comments! WP shortcode API is platform specific but our plugin offers cross-platform embedding support that is not limited to blogger blogs alone. It can surely work on any website be static or dynamic.
Most exclusive feature of this plugin is to support nesting of shortcodes. You can insert a shortcode inside another one to offer full dynamic experience.
Shortcodes such as accordion and Tabs can be added a multiple times on a single page without effecting one another. This plugin optimizes and reduces Page Load time extremely well.
List of Supported Shortcodes
We have so far developed around 10 Shortcodes and we are planning to develop around 50 shortcodes within a month inshAllah. Shortcodes will be created based on their importance and usability. We will release each shortcode with a separate tutorial.
A shortcode itself it not a code but a TEXT which is processed as HTML. Don't believe yourself? Believe it! :)
Following are the shortcodes developed so far.
| Shortcode | Definition |
|---|---|
| [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 |
more on its way!..............
- You can now also suggest us which shortcode to create
Installation Steps
Follow these steps to install the Shortcode Plugin on your blogger blog.
1 Go To Blogger > Template > Backup your template2 Click Edit HTML
3 Search </body>
4 Paste the following dynamically updated JS file just above it
5 Next Search For <head><!-- Blogger Shortcode Plugin Dynamic JS File -->
<script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>
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.
[dailymotion src="x2lhjki"][/dailymotion]
or simply
[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]
or simply
[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 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.
[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?
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.
Credits
© 2008-2015 STCnetwork.org.
Version: 1.0 (29-March-2015)
Blogger Shortcode Plugin by STCnetwork is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You are most welcomed to share the plugin with your readership as long as you attach attribution link back to this blog post and avoid selling the plugin in a commercial product or service.
We have to thank a lot of people here for helping us in the Plugin development.
We would like to thank the helpful community at stackoverflow who helped us in optimizing the scripts as much as possible and writing down simple logics. If these shortcodes are nest-able then it is only because of the kind help I received from this community co-founded by @jeff Atwood
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?
In coming hours, we will post separate tutorials for each shortcode, new and more demanded shortcodes will be released. Embedding stuff in blogger will be at your finger tips. Get rid of those long, complicated, heavy scripts and add stuff in blogger with just one line of code!
For extra help and details on implementation and development of this plugin, please create a discussion Topic at our Forum where I am always available 24/7 for any help needed.
Do share your precious views on this plugin and let us know how can we improve it further. Do mention services for which you need a custom shortcode and we would love to develop it for you and share it for free on this blog. Peace and blessings buddies! =>
