How To Host Shortcodes Directly inside Blogger Template?


#1

Blogger Shortcode Plugin has massively revolutionized the way Blogspot blogs are designed today. It is a life saver for those who are not tech-savvy and are not well versed with Javascript, CSS or HTML but who are too conscious about their blogs looks and appearance. It is a complete Tool-kit for bloggers who have a strong desire to make their blogs look professional and optimized.

The Dynamically updated JS will work on any template which is coded by either a Professional SEO or a Designer who knows his job well. It may not work effectively if you are using a Fancy template with too many overused render-blocking and inline JavaScript. Templates which uses AJAX to load Posts through a FEED api and make several http requests or JS calls do not only deprive you of Blogger Shortcodes but it also effects your blog SEO and readership. So make sure you keep your blogs clean and neat, free of too many scripts and JS conflicts.

If in case you have worked hard enough on your templates and you don’t want to change the Scripts that gives a cool look to your User Interface then below is a simple solution that will help you make best use of Blogger Shortcodes.

Hosting JS directly in Blogger

Instead of using the Dynamically updated JS file for Shortcode plugin you can paste its entire code directly inside your template by following these steps:

  1. Click this JS Link

http://downloads.mybloggertricks.com/shortcodes.js

  1. Copy the JS code inside it and keep it safe.

  2. Now paste the following code just above inside your Blogger template

     <script type='text/javascript'>
     //<![CDATA[
    

    /Paste Your Code Here/ //]]>

  • Now Replace /Paste Your Code Here/ with the code you just copied from the JS link
  1. Save your template and all done!

You will need to repeat step#3 each time we publish a new shortcode if in case you want to use that new shortcode else you don’t need to do anything and enjoy using shortcodes which will load much faster now! :innocent:

Note: Make sure you remove the Dynamically updated JS code if you are using this method. Remove this code from your template

<script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>

Can you Only use the shortcode you want ?

Of course you can but why would you need to do that? Do you fear that using the script for all shortcodes will slow down your site? Of course not, it has a light weight script of just 9KB and it loads within a faction of a second!

:bulb: Interesting Fact: No JS script slows down a site unless it is called!

Suppose you wish to use the YouTube shortcode, then the browser will only load the shortcode for youtube because the call will be made to fetch the youtube function only, the browser wont call at all those extra shortcode function scripts which you have not even used on your page!

So feel free to enjoy adding shortcodes on your web blog and do give us your feedback to make it even better. You can also suggest us your favorite tools or plugins and we would love to create a shortcode for it. Happy evening! :smile:


Dynamically Updated JS File for Blogger Shortcodes Not Working. [Error Reported]
#2

Thanks Mohammad for this post and also for that fact!. :smile:


#3

Thanks @Mohammad for this post. Going to try it.


#4

Still the short codes are not working in the post area but working in other areas of template/


#5

Make sure your blog is set to public. It wont work if your blog is invite only and not open to public. In that case the jquery is not loaded properly.


#6

@Mohammad dude any way to host external css inside blogger template or any ways to speed up the external CSS … thanks in advance…


#7

@skvignesh, you have to open that external javasript link and copy all the JS their. Then, replace '/Paste Your Code Here/ with the JavaScript you copied and then save your template. :smile:

    <script type='text/javascript'>
    //<![CDATA[
/*Paste Your Code Here*/
     //]]>
    </script> 

And their’s an another way to do this. Just copy all the JS from the external link and then paste it inside <script>--</script> but this time, place it on a HTML/JavaScript widget. :smile:

And @Mohammad, thanks for creating this forum. By the way, one question rise in my mind when I checked MBT source code and found only image shortcode? and only comment code? Why?


#8

hello i am asking for external CSS not the external JS… read it correctly… @vector


#9

Then no problem. Just open that CSS external link and copy all the code and paste it above </body> under <style></style> and save your template.


#10

My blog is public but the short codes are still not working. See the blog.


#11

I did do that but sometime Blogger can’t read it, I get some warning about how I implemented javascript from Blogger.