HTML, CSS & JS Blockquote Shortcode for Blogger!
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:
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(http://s12.postimg.org/k6nn64clp/Untitled_2_copy.png),url(http://1.bp.blogspot.com/-qy_dCTRr75U/U1Qyhq1lQ5I/AAAAAAAACbw/1mJB5K3rp50/s1600/header.png);color:#FFFEFF}.javascriptcode{padding:90px 35px 35px;background-image:url(http://s12.postimg.org/ig97idkgd/Untitled_2_cdopy.png),url(http://1.bp.blogspot.com/-qy_dCTRr75U/U1Qyhq1lQ5I/AAAAAAAACbw/1mJB5K3rp50/s1600/header.png);background-size:100%;margin-bottom:36px;color:#FFFEFF}.csscode{padding:89px 35px 35px;background-image:url(http://s12.postimg.org/8k84iqeod/Untitled_2_csopy.png),url(http://1.bp.blogspot.com/-qy_dCTRr75U/U1Qyhq1lQ5I/AAAAAAAACbw/1mJB5K3rp50/s1600/header.png);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="http://yourjavascript.com/692651931/publishing-shortcode.js"></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:
- Now let’s create a JavaScript blockquote. To create it:
[blockquote type='javascriptcode' code='YOUR HTML,JS, CSS HERE!'/]Output:
- At last, let’s create a CSS blockquote. To create it,:
[blockquote type='csscode' code='YOUR CSS HERE!'/]Output:
0 Response to "HTML, CSS & JS Blockquote Shortcode for Blogger!"
Posting Komentar