Saturday, June 06, 2015

HTML, CSS & JS Blockquote Shortcode for Blogger!
Untitled-1 copy-
You know what is shortcode right? If no, then- Shortcode is a plugin developed by MBT which allows you to create shortcodes in your posts, comments and on sidebar of your blog. Today, we have created one more shortcode  for blogger that allows you to add different blockquotes for different languages.
If you are a blogger and you has a blog whose niche is Blogging, then it is impossible that you not add JavaScript, CSS and HTML codes on your post. So today, we have two things to tell you. First is Shortcode Blockquote, and second is- Now you can add different blockquotes for different languages! Like if you are going to post HTML widget in your template, then write 2-4 words and then your HTML code, then the result will be like this:HTML Example
We not only created this blockquote for html codes, but also for JavaScript codes and CSS codes and the best thing is, you can now add different blockquotes for different languages using Shortcodes! Which means, now you don’t have to go to blogger editor’s HTML mode. You can add it directly from Compose mode with some [] and 2-3 words! And you can also customize these blockquotes css to change its look! Now let's know how to add this awesome shortcode by Blogger Guiders on your blogger blog-
DEMO: See live demo here.

How to Add this Shortcode on Blogger?

Steps are very easy. We will provide you a JavaScript file and some CSS codes. You just have to place them in your blog as your tasty shortcodes are ready to get eaten! I mean your useful blockquote are ready for use! Let’s know how to add it on your blog-
  • Go to Blogger Dashboard > Edit HTML
  • Press Ctrl+F3 to open search box and type ]]></b:skin> on that search box and press enter.
  • Above ]]></b:skin>, paste bellow CSS:
.csscode,.htmlcode,.javascriptcode{background-repeat:no-repeat;border:1px solid #A9A9A9;border-top-right-radius:10px;font-family:courier;border-bottom:2px solid #000!important;background-color:#CBCBCB;border-top-left-radius:10px;border-top:2px solid #000!important;box-shadow:0 0 23px -8px #000}.htmlcode{padding:89px 35px 35px;background-image:url(,url(;color:#FFFEFF}.javascriptcode{padding:90px 35px 35px;background-image:url(,url(;background-size:100%;margin-bottom:36px;color:#FFFEFF}.csscode{padding:89px 35px 35px;background-image:url(,url(;color:#FFFEFF}
  • This CSS is compressed so it won’t effect your site’s page loading time.
  • Now again search for ‘<body>’ and below it, place following code:
<script async='async' type="text/javascript" src=""></script>

This JavaScript is asynchronized & Compressed So it won’t effect your site’s loading speed.

How to Use this Blockquote Shortcode?

Now let’s learn how to use this shortcode on Blogger-
This Shortcode only have two variables which are- 1) ‘type’ and 2) ‘code’. So, in ‘type’, you can add three values- 1) htmlcode (for HTML blockquote) 2) csscode (for CSS blockquote) and 3) javascriptcode (for JavaScript blockquote). And in ‘code’, you have to add the code which you want inside blockquote.
  • Let’s create a html blockquote. To create it, use below like code:
[blockquote type='htmlcode' code='YOUR HTML,JS, CSS HERE!'/]
Output:HTML Example
  • Now let’s create a JavaScript blockquote. To create it:
[blockquote type='javascriptcode' code='YOUR HTML,JS, CSS HERE!'/]
JS Example
  • At last, let’s create a CSS blockquote. To create it,:
[blockquote type='csscode' code='YOUR CSS HERE!'/]
Output: CSS Example-min

Final Words from Author

Now I think you learned how to create these blockquote on your blogger blog using shortcodes. However, if you got any error or problem or have any confusion, then please inform us through comment below. This will surely help your blog’s visitors to identify in which language you are providing the codes and it will also give a professional touch to your blogger blog. Thanks!