Introducing Blogger Shortcode Plugin


Blogger Shortcode Plugin

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.

CSS3 buttons Shortcode

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.

insert shortcodes in comments

 

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.

nested shortcodes

 

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!..............


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.

[dailymotion src="x2lhjki"][/dailymotion]

or simply

[dailymotion src="x2lhjki" /]

dailymotion shortcode for blogger

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" /]

dailymotion shortcode

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:

  1. Don't use camelCase or UPPER-CASE for attribute names or Shortcode names. Use only lowercase characters
  2. Don't add spaces between Shortcode Names and the Square Braces
  3. 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"]
  4. 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.
  5. 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)

Creative Commons License 

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! =>

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 »

74 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. hmmm...interest concept, nice nice
    ty \m/

    ReplyDelete
    Replies
    1. So glad to see you after such a long time beben :)

      Delete
    2. to make it more clear, how the explanation followed by CSS or HTML syntax writing in your project!

      Delete
    3. beben we will share the stylesheet for shotcodes in coming tutorials. Will share stylesheet separately for each shortcode so that users may only use the styles for shortcodes they wish to use. This saves load time and is a recommended approach

      Delete
  2. Wow.. going to use it right away on my blog .. www.uberpromo.in

    ReplyDelete
    Replies
    1. Do let us know if you need any help after installing :)

      Delete
  3. Hi Mustafa,

    I have been visiting that demo blog you created since you shared it on your G+ profile or it got shared automatically. I was so amazed to see all those tabs in the comments an posts.

    I will try it on my blog too as this looks really interesting. Thanks for sharing and also thanks to those who (are mentioned in the post who) contributed in the making of the plugin.

    Thanks for being an inspiration.
    - Rohan Chaubey.

    ReplyDelete
    Replies
    1. Damn I had mistakenly forgotten to unchecked the option "Automatically share to Google+ after posting" Clever you! ;)

      Will wait to receive your kind views after you implement it. Thank you for all the kind feedback :)

      Delete
  4. Hey Bro,
    Really that's a revolutionary change in blogger platform. Hats off for this great plugin and your efforts.

    Thanks

    ReplyDelete
    Replies
    1. Not until you add it to your blog and experience it live on your site! :D

      So glad you liked it. Thank you zohaib :>

      Delete
  5. Great Help for the bloggers community. Thank you, for develpoing blogger shortcode and sharing with us. I'mm gonna add this on my blog.

    ReplyDelete
    Replies
    1. Now you have something unique to share with your audience. Make sure to be the first to share it online! Really appreciate the kind words :>

      Delete
    2. I just published a post regarding the development of Blogger Shortcodes by MBT and thanking you for the same. Just take a look at my POST

      Delete
  6. aoa mustafa bahi i have a blog http://xasgames.blogspot.com where you can download free games.but there is no traffic (visitors).i done all seo setting plz help.
    regards
    malik sharjeel

    ReplyDelete
    Replies
    1. W.salam dear

      For all such queries we launched the forum. Post your question now at www.bloggerhelpforum.com :)

      Delete
  7. Really a Great effort from you and your team Keep it up :) . I will try it on my blog insha allah

    ReplyDelete
  8. Wow !!! Great :) Masha Allah :) Keep rocking bro :D

    ReplyDelete
    Replies
    1. most welcome dear Ahmad , glad you liked it =)

      Delete
  9. You are amazing brother. I was missing a amazing plugin for blogger from this blog. And after a long gap finally you gave us the gift :).

    Surely you are the inspiration and example for those who thinks that wordpress is the best blogging platform. Now i am not going anywhere . I am sticking with blogger.com platform. Don't care what others says.

    ReplyDelete
    Replies
    1. Amazing are people like you who keep contributors like us alive! =>

      Surely blogger is the best platform to do blogging in every respect. For me wordpress is best for ecommerce purposes only

      Delete
  10. Thanks mohammad for letting us know about blogger short codes it will be really helpful

    ReplyDelete
    Replies
    1. I hope it will making embedding of important wen elements extremely easy for most :)

      Delete
  11. Thanks Mohammad for this amazing plugin.

    Tip:

    1. You can update the fontawesome icons link with the latest.

    You Can Replace:

    http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

    To:

    http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

    2. You can mention that persons who already have added the font oswald and font awesome icons by reading and following our previous posts, don't add it them this time.

    ReplyDelete
    Replies
    1. Thank you shivansh, now that was a clever suggetsion. I have updated the fontawesome code.

      People using font oswald wil be guided in my coming tutorials. It will be relevant discussing it once i share the stylesheet :)

      Delete
  12. WOW! This is just great sir. just great...

    ReplyDelete
  13. muhammad brother this is great i love you brother this what i was searching thank you so much and may Allah give you more success and good health

    ReplyDelete
    Replies
    1. I love you even more brother. You will find the coming tutorials a life really interesting. Posting the next tutorial within 24 hours
      :)

      Delete
  14. Hey I'm unable to use these shortcodes. I sucessfully installed the shortcodes but now I don'y know how to use them. I teried of adding the following code in my blog post but nothing happened. Please guide me regarding this.

    [update] MBT is planning to develop around 50 shortcodes within a month.[/update]

    ReplyDelete
    Replies
    1. Of course nothing will happen unless we share the tutorials for each of these shortcodes which we will release shotrly :)

      UPDATE
      You can now suggest which Shortcode would you like to be created by us

      Delete
    2. You selected the Update shortcode, At present only those shortcodes are included inside the dynamic JS file which you find on the DEMO page. If the shortcode you are trying is not listed on demo page than it means you need to wait for its tutorial :)

      Delete
  15. I knew this when you shared it's posts on G+ sir :) very interested project, similar with wordpress. Good job sir :) It's very usefull for blogger to make great widget.
    But some of blogger always ask about blocking-render js on pagespeed insight when we use some js on blog. Is it support asynchronous sir?

    ReplyDelete
    Replies
    1. This plugin is more lighter in weight compared to the blogger Navigation menu or blog post widget! Blogger shortcode plugin Renders seemless in background.

      Our demo page has a page speed score of 81!! What else can someone wish for? :)

      Delete
  16. You are always awesome dear!
    Great help for bloggers willing to decorate their blogs with useful shortcodes. Waiting tutorials for better implementation on my blog. Thanks!

    ReplyDelete
    Replies
    1. You are always welcomed!

      Just published the first shortcode for Accordions! Check it out! =>

      Delete
  17. Superb Work specially using js thumbs up for great effort and idea

    ReplyDelete
    Replies
    1. That JS file is the engine that runs the shortcode. Thank you for the kind feedback Ahmed =>

      Delete
    2. Yes i have watched that js file and also read your article i have made shortcodes for wordpress as i know its not as easy to take those code from PHP to JS anyway keep it up bro as your ideas and work is great

      Delete
  18. Awesome approach!

    Now I can say loudly "We are Pakistanis and We best at blogging ;) " Thanks Mustafa for this plugin sharing :)

    ReplyDelete
    Replies
    1. I am glad you liked it Umer but always remember that knowledge is a collective contribution and the reason why I am able to blog today is thanks to my mentors who were Indians. So it would be wrong to give a patriotic touch to it because I hold really high regards for my indian readers and also mentors.
      Your excitement still means a lot. Thank you dear =>

      Delete
  19. You Have Two Steps With Same Name 6.Anyway Thanks

    ReplyDelete
    Replies
    1. Dear follow the shortcode tutorials to add them to your blog. And I have corrected the number mistake. Thank you for reminding :)

      Delete
  20. Awesome !
    I'll wait next tutorial :)
    Thanks !

    ReplyDelete

  21. Mustafa SIR youare a great man day by day you making blogger very
    easy and awsm..!! bt sir i need your one help..! for comment box

    ReplyDelete
    Replies
    1. You are most welcomed dear abhijit. We will also try to create a shortcode for Facebook comments. :)

      Buddy for any help contact me 24/7 at the forum only.

      Delete
  22. Nice tips. This blogger shortcode is easier to follow for beginner like me. Thanks a lot.

    ReplyDelete
  23. hi, its long time Mohammad but glad you are back.

    my query: how do i change upper case of title of the shortcode of sentence or title case

    ReplyDelete
    Replies
    1. Glad to hear from you buddy! Such a pleasant surprise =d

      Which shortcode are you referring to? Mention the shortcode name so that I may let you customize its CSS

      Delete
    2. The accordion tabs headlines Character case appears as you type. If you wish to auto change the character case then add the following css property

      text-transform:uppercase;


      to this class

      .sc-accordion > h3 a {
      --
      ----
      }

      You can choose lowercase, uppercase and capitalize.

      Delete
  24. Amazing innovation bro..Keep going

    ReplyDelete
  25. How to make tables with shortcodes? I've tried [table] But its not working. Then how to make tables using shortcodes? Please help

    ReplyDelete
    Replies
    1. We just served your request and have developed HTML Table shortcode. Try it now! :)

      Delete
  26. I have added your request to our TO-DO list and we will surely create the table shortcode too :)

    ReplyDelete
  27. Hi,
    Awesome Plugin!
    I'm having one problem. The Tabs widget doesn't appears, but doesn't respond when I put it inside an Accordion Item. Is there a way to get it to work?
    Thanks

    ReplyDelete
  28. I have to spend 2 or 3 months to understand the concept and now get back here as I have got the point :) , I am so usual with WordPress shortcodes, but now I've learnt a lot how to get it work with Blogger, Jquery! Never thought of it before. Thanks and keep up the good work, Brother. The next homework is how to make it neater to reduce the pageload time :p
    Assalamu'alaykum

    ReplyDelete
  29. Is it possible to do the same from other video sharing sites like vimeo, tinypic etc. Since what i am doing is getting me banned from youtube and dailymotion :P

    ReplyDelete
  30. You are a beautiful; =) lol

    From Brazil!

    ReplyDelete
  31. Problem with your domain http://downloads.mybloggertricks.com ??

    ReplyDelete
  32. NP adding the plugin, but can not get the shortcodes to work

    ReplyDelete
  33. Can I add shortcodes to IntenseDebate comments?

    ReplyDelete
    Replies
    1. Currently we have assigned them to work only for blogger comments. We have added your request to our list. I think we can surely do that.

      Delete
  34. Mohammad Hello, I'm doing a template to sell and want to add some shortcodes, how can I do the assignment for you?

    ReplyDelete
    Replies
    1. Sure you can do that!

      Just link back to this page on your Template Selling page as the only favour in return

      Delete
  35. well ... actually I cannot find any proper "body" txt after which inserting your script

    ReplyDelete
  36. I tried the codes on my blog and nothing worked. Rather the hidden text that should appear only when the mouse is hovered on the link appeared on the page. see website: http://fxtradecity.blogspot.com/p/test_8.html

    ReplyDelete
  37. This is awesome bro :)
    Can this shortcode also be used to insert facebook video?

    ReplyDelete
  38. Is this shotcode still working? And can it be used on the custom template

    ReplyDelete