Cracking-Mods.blogspot.in: Blogging

Axact - Responsive Magazine Blogger Theme

07:13 0

Axact is a modern, clean, responsive and flat Blogger template suitable for magazine, news, sports, tech, games and multipurpose blog. Axact is designed with flexible approach lets you to easily change the color, font size and other customization that you can made through blogger template designer.<br />
<div>
<br /></div>
<div>
<div style="text-align: center;">
<a class="downloadbutton" href="http://www.themelet.com/p/axact.html" target="_blank">DEMO</a>     <a class="downloadbutton" href="http://themeforest.net/item/axact-responsive-magazine-blogger-theme/14922992?ref=chiranjitbera" target="_blank">PURCHASE</a></div>
<div>
<h4>
Features:</h4>
<ul>
<li>post pagination: <a href="http://axacttech-themelet.blogspot.com/2016/02/the-custom-post-with-post-pagination.html">See Demo</a></li>
<li>Image gallery: <a href="http://axacttech-themelet.blogspot.com/p/image-gallery.html">See Demo</a></li>
<li>Custom contact form Widget: <a href="http://axacttech-themelet.blogspot.com/p/contact-us.html">See Demo</a></li>
<li>5+ Homepages</li>
<li>Detailed Docs</li>
<li>Support</li>
<li>Tabs and accordion</li>
<li>Button styles</li>
<li>Alert Boxes</li>
<li>code boxes</li>
<li>Responsive Design For mobile and tablet devices</li>
<li>PowerFull Admin Panel</li>
<li>Popup contact form</li>
<li>Multiple layout styles for widgets</li>
<li>Custom search box with ajax result</li>
<li>Unlimited Colors & Fonts</li>
<li>Fully customizable Design</li>
<li>Search Engine Optimized (SEO)</li>
<li>10+ Home Layout Boxs Style with shortcodes</li>
<li>3 Column Footer Area</li>
<li>Footer about us and email widget</li>
<li>Support Facebook Open Graph & Twitter Cards</li>
<li>Adsense Ready</li>
<li>Retina Ready</li>
<li>Drag and Drop widget Support</li>
<li>jQuery and CSS3 Effects</li>
<li>Social Counter</li>
<li>Multi Level Dropdown Menu</li>
<li>Posts navigation with next and previous post</li>
<li>Attractive related post design</li>
<li>Awesome footer style with multiple widget designs</li>
<li>Blogger Template designer supported</li>
<li>Unlimited customization options (colors, fonts, template skins (light and dark etc.)</li>
<li>Minimized HTML, CSS and Jquery</li>
<li>Fast Loading in all web browsers</li>
<li>Custom email widget design</li>
<li>More then twenty the most trending social Media icons for follow and sharing purposes with different styles (flat, rounded and rotating etc.)</li>
<li>The awesome mega menu designed with CSS3 and HTML.</li>
<li>Cross Browser Compatible</li>
<li>Font Awesome Icons Integration</li>
<li>Full width featured carousel Slider below the mega menu or can be placed anywhere in the widget section</li>
<li>High quality image thumbnails</li>
<li>Blogger threaded Comments system with cool design</li>
<li>Shortcodes ready for buttons and other UI elements</li>
<li>and more.</li>
</ul>
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoCsOMerlTcXQUquJ4GjYlMaezofJ71-Z2-5ForbAUxonudMf3RWX_QUSYnjrX1KSU6807V1dElUUyBLCPShiJTa9LRaPi8QLXLlWdhwzKLeib2STzFiLlJQ3zTF5LDJgDmntzkl8sjc9M/s1600/axact-head.png" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrpSedRe93cB_IwZfKxu4C4GGHxDyaLZ0sjqn3GWOEKzOmdnbFWSGCSV8IBQt_mo6LRINJoRa0RpvPzIP_l5H8l8N24KD9FkgYJEwasTtBFJ1SJS8XfSRIU-cABI-ljc61lQS2CtZvWYvw/s1600/axactpresentation-big-1f.png" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dO6PujxbrRIcJ5e-CLo_8k4VirOA1XjJHwhCzFiCtnZ42NF7CxDAFfT4gMgMFiyghl6c1tE8xJ6SCkuHLQHedLEuJXvwX2hcjS4-EZ5WgM8PBvmxwqBkqEqMlCB0N7nRiNU5Af54HvTw/s1600/axactpresentation-big-2f.png" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrt3wxmMtT1SL7mJm9bjEC-iitFjJIRYCpLA_RCOqrHZqlo3N0Y-Z-QtMDlVDV58U6Ftgq6hxAveu9v9bNMP3sO2r3smi_ml4H0LlfaAR6yTTtZCSkuiFqIQgmm5pKvtAAIekP6HrQ8qwJ/s1600/axact-p1.png" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiBh2pSjk4sQfpViOn97ijioGJGilZkdMzLi5Y206jLddTUEozRNJd4Ns3Up2N9uF23OQyaln_GUm6QAmk1OourRiuxhyDFgge0nrFzPWq56uA5vEy21gKb_n0y_Js9FjoZJcNUglJAzDE/s1600/axact-p2.png" /><br />
Axact not only excels at front-end usability and user experience, but the admin back-end is very easy to use with full instructions in the documentation in the package. You can easily drag and drop widgets and add any widgets supported by this theme from the documentation. The detailed doc lets you to set up your blog fast. The main features includes SEO, Fast loading, Ajax search result, 5+ unique homepages, pro shortcodes and many more.</div>
</div>

Blogger Templates Blogging Axact - Responsive Magazine Blogger Theme

Axact is a modern, clean, responsive and flat Blogger template suitable for magazine, news, sports, tech, games and multipurpose blog. Axact...

How to Add Font Awesome Social Icons in Blogger

23:15 0

It's near impossible to find a blog or site these days without at least one social media account to their name. Be it Twitter or Facebook, Instagram or Pinterest, or all of those for that matter, what's become increasingly clear is that social media helps increase your online presence.<br /><br />Gone are the days when you used to rely on good old search engine results alone. These days, maybe you don't rank well in results for your keyword on Google or any other search engine, but you can launch a social media campaign that can hopefully give you the results that you want.<br /><br />Essentially, your site and social media need to co-exist. One cannot live without the other, if you want another way of putting it. Social media is one of the best drivers of traffic on the internet, and if you want to increase your chances of being seen, then you have got to get an account on one or more platforms as long as it fits with your brand's identity.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYW2t_HGEI-ef2StXAK-jqgLPSEhU7O7dAsrKhX4XqY7MNJrOvsYrt-IwxIFQHfAeaykejU5huECLe2Y72yNsTsm7r1sJ6wFM0BwZBBPbfFTJGxxTFnxTJYs5PH4iad2fBcXn_mmw4Ax35/s1600/font-awesome-social-icons.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYW2t_HGEI-ef2StXAK-jqgLPSEhU7O7dAsrKhX4XqY7MNJrOvsYrt-IwxIFQHfAeaykejU5huECLe2Y72yNsTsm7r1sJ6wFM0BwZBBPbfFTJGxxTFnxTJYs5PH4iad2fBcXn_mmw4Ax35/s1600/font-awesome-social-icons.png" /></a><br />Spreading Awareness of Your Social Media Presence<br /><br />Once you've set up your social media accounts, you don't just leave it there to be discovered. Sure, you can make use of hashtags and communicate with industry leaders, but that's not enough to bring awareness to your customers. To let them know you have a presence on Facebook, Twitter, Instagram, Vine or Pinterest, you have to make use of the real estate on your website.<br /><br />How exactly do you do that, you ask? Well, by means of social icon<br />Social icons are those little images you see that represent a symbol associated with a particular social network. For example, social icons for Twitter usually feature a blue bird. If not that, then a lowercase letter T.<br />       The presence of these images remind your viewers that they have other ways of being up to date with whatever you put out. Social media use is pretty high these days thanks to the immediacy of the medium as well as the fun factor. And more likely than not, your audience would want to know whether you're on any social network.<br />       If you're on the Blogger platform, you can add these social media representations through Font Awesome social icons.<br /><h4>
What is Font Awesome?</h4>
Font Awesome "gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS". In essence, it functions as a toolkit where you get access to more than 500 icons for use on your site - free of charge.<br />Now, if you've used social media icons before, you know that there are non-vector varieties. But those offered by Font Awesome are scalable vector icons, and in the long run, they are the better option for your site.<br /><h4>
Why is that the case?</h4>
Well, a very good reason would be that images take time to load. Yes, these images are tiny but the point still stands. Plus, images tend to lose their quality as computer resolution increases. In other words, if you want your icons to load faster and have a nice, crisp and clean look, then you're better off with using the collection of Font Awesome. Also, the chance to customize your icons accordingly is definitely an attractive factor too.<br /><div>
<h4>
Why you should start using Font Awesome?</h4>
Of the many providers out there, why stick with Font Awesome?</div>
<div>
<br />Large collection of icons. You'll not only find social media icons here, but other traditional icons as well. <br /><b>CSS support.</b> With CSS, you can adjust the icons according to what suits your site best. You can tinker with the colors, size, shadows and other components. This is something sorely lacking with non-vector images because you're stuck with the icon you chose. <br /><b>Speed.</b> Vector images are lightweight and therefore load faster. <br /><b>Free.</b> You don't have to pay a single thing when you use Font Awesome. <br /><br />So now you know the importance of icons on your site, it's time to learn how to add Font Awesome icons in Blogger.<br /><h4>
Adding Font Awesome Social Icons in Blogger</h4>
The adding of icons to your Blogger isn't rocket science. In fact, the process is pretty straightforward.<br />Here's what you have to do:<br /><b><br />Add Font Awesome Stylesheet into Blogger</b><br />Follow the steps below to get Font Awesome working with your blog:<br />1. <a href="http://fortawesome.github.io/Font-Awesome/#modal-download">Download Font Awesome</a> from the official page.<br />2. Copy the entire font-awesome directory into your project.<br />3. Open your Blogger dashboard, go to Template and press the Edit HTML button. Find the <head> tag then add this line of code referencing the location of your font-awesome.min.css stylesheet.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMNzad3jQYUTWsooHRgFuQnkIrREB8VqkQ5Xl2N4jQmfPXkuXivhf953ldOMRPAlDd02Lz8oUIBZy_3w3efA2XAu9z2jrmIWW6l9WV6LL1O7SxmBFSN8gry7FLMLF1hDgOWXor0bO-XD-5/s1600/add-font-awesome-stylesheet-to-blogger.png"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMNzad3jQYUTWsooHRgFuQnkIrREB8VqkQ5Xl2N4jQmfPXkuXivhf953ldOMRPAlDd02Lz8oUIBZy_3w3efA2XAu9z2jrmIWW6l9WV6LL1O7SxmBFSN8gry7FLMLF1hDgOWXor0bO-XD-5/s640/add-font-awesome-stylesheet-to-blogger.png" width="640" /></a><br /><br />Or if you'd prefer the easiest method, add this line just below the <head> tag:<br /><br /><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /><br /><br />4. Start playing with Font Awesome!<br /><h4>
Using the Font Awesome Icons</h4>
After you get the steps in the previous section done, you're now ready to use Font Awesome in your blog. The first thing you need to do is add the social icons links to the HTML and delete the icons that you don't need anymore. This is a sample HTML that you can add:<br /><br /><br /><div id="fawesomeicons"><br /><a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a><br /><a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a><br /><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a><br /><a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a><br /><a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a><br /><a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a> <br /><a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a><br /><a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a><br /></div><br /><br />In the above HTML code, we can see 8 separate social icons which can be recognized by looking at the link title attribute. For example, the first one is for Facebook.<br />To use the social icons, paste your URL where it says URL-HERE for each social icon you want to include. Put the link between the quotes and make sure to not remove any of the quotation marks.<br /></div>
<div>
If you want to remove a social icon, just delete that line of code starting with "<a href" and ending with "</a>".<br /><br />Now, keep in mind that Font Awesome works anywhere with the <i> tag as it was designed to work with inline elements. Although you can use <span>, official documentation prefers the <i> option for brevity.<br />Font Awesome icons can be placed anywhere using the CSS prefix fa together with the name of the icon. For a <a href="http://fontawesome.io/icons/">list of social media icon names</a>, you can refer to the official website of Font Awesome.<br /><br />Let's say that you want to display a Youtube icon so you can link it to your official account on the platform. Find the Youtube icon on the list and click on it:<br /><br /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Y-3aoyr4Wf26sUWtmF1-d1qMr1uIM0je58fFmHZxZv-LgPqBXNafVIEvHB7t02vVGsYvv15RGL-uZO61HITmYWkh-A9Fy6pGg4t8x3lvhoE-6v0r839kjwEwUVM0Xha-jDK5e9BPLnnC/s1600/youtube-font-awesome-icon.png" /><br />That will bring you to a page for Youtube where you will see this code:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRt2shgLQqq2Uht_sDM9-j4twuCWthfPakzpLQc30-U3ut5sqJMfQQICA4ajK1Zrig1G9cSD5A6gTBSJ5pQZPnB5G_HU7Fig-lmmmFaCAklXcWG3w085a0GOa9gx9pYkjfwRkKJcB1g6ME/s1600/font-awesome-icon-youtube.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRt2shgLQqq2Uht_sDM9-j4twuCWthfPakzpLQc30-U3ut5sqJMfQQICA4ajK1Zrig1G9cSD5A6gTBSJ5pQZPnB5G_HU7Fig-lmmmFaCAklXcWG3w085a0GOa9gx9pYkjfwRkKJcB1g6ME/s1600/font-awesome-icon-youtube.png" /></a><br />To include the icon within the list, copy any line starting with "<a href" and ending with "</a> from the code above, paste where you want it to appear and replace the code starting with "<i class="fa " and ending with "</i>" with that of your chosen icon.<br /><br />Finally, after adding the icon, the list will look like this: <br /><br /><div id="fawesomeicons"><br /><a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a></div>
<div>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a><br /><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a><br /><a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a><br /><a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a><br /><a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a><br /><a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a><br /><a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a><br /><a href="URL-HERE" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a><br /></div><br /><br />Note: don't forget to change the title and add your URL between the quotes.<br /><br />Once you've finished editing the icons, insert the code into a HTML/Javascript gadget by going to "Layout" and click on the "Add a gadget" link. If you're using WordPress, paste it in a Text widget.<br /><h4>
Customize the Font Awesome Icons Using CSS</h4>
Suppose you want to make the icons a lot bigger than they currently are. That task is made simple with the use of CSS. Here's a sample code:<br /><br />#fawesomeicons a {<br />font-size: 16px;<br />width: 30px;<br />height: 30px;<br />line-height: 30px;<br />}<br /><br />To change the font size, increase or decrease the 16px value. Below are the values (30px) for the container's width and height which should always match. Increasing/decreasing these values, will increase/decrease the size of the container where is the font.</div>
<div>
<br />Here are some different styles for the font awesome social icons. In the CSS, look for the #background-color, #border-color, #font-color and #hover-color text so that you can know here to put the color codes. You can use this tool to generate the color code: <a href="http://helplogger.blogspot.com/2012/02/color-code-generator.html">Color Code Generator</a>. If you don't know how to add CSS, follow this tutorial.<br /><div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl0kmoGnakQkdvHW8UPys4Yvao4KKDViVH_IlCswS9J5MTnY1m5uUbsmbPqsvEbqDch1xHgF2mnOcIrbiwqTXjaW4zeka6CcafZ2jWJ4wqeaHWomuTDCfxRFLJCfnqqUWPluLvCBOqyVem/s1600/font-awesome-social-icons-square.png" /></div>
#fawesomeicons {</div>
<div>
text-align: center;<br />}<br />#fawesomeicons a {<br />background: #background-color;<br />color: #font-color;<br />display: inline-block;<br />font-size: 16px;<br />width: 30px;<br />height: 30px;<br />line-height: 30px;<br />margin: 0 1px 6px;<br />}<br />#fawesomeicons a:hover{</div>
<div>
background: #hover-color;<br />}<br /><br /><div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeeaJG2eLyYissEfLBXJXLSFNyrAjNov8poSWe_mfq6iKeCQv_dt1OM_Dw55qRo27hXqkPz4q9aKSQ2izo1AEoRLvbNgIcqkmC0xHScSS4VtWwaXJpvhnj6WXHO2F1CefdTlPAhmjxvpE8/s1600/font-awesome-social-icons-rounded-icons.png" /></div>
#fawesomeicons {<br />text-align: center;<br />}<br />#fawesomeicons a {<br />background: #background-color;<br />color: #font-color;<br />display: inline-block;<br />font-size: 16px;<br />width: 30px;<br />height: 30px;<br />line-height: 30px;<br />margin: 0 1px 6px;<br />-webkit-border-radius: 100%;<br />-moz-border-radius: 100%;<br />border-radius: 100%;<br />}<br />#fawesomeicons a:hover{<br />background: #hover-color;<br />}<br /><br /><div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvL_im_bfK4quL1U6cS9H6W_4o_o0Fi-it8LsNHGSJkU6VXAFGYqrUi9NR5RwnYBlealZ2nCKHRHbXhSMFoIHGUq-voBB6X8Na6cgyFmtgqkM-5nBYMlwai9EevgB38jpLNNCmSdFZOTO/s1600/font-awesome-social-icons-square-border.png" /></div>
<br />#fawesomeicons {<br />text-align: center;<br />}<br />#fawesomeicons a {<br />border: 1px solid #border-color;<br />color: #font-color;<br />display: inline-block;<br />font-size: 16px;<br />width: 30px;<br />height: 30px;<br />line-height: 30px;<br />margin: 0 1px 6px;<br />}<br />#fawesomeicons a:hover{<br />background: #hover-color;<br />}<br /><br /><div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdEb15e3BfUffgq63he9wvjo7JtkPr4hmAsqHZotSUSKPNQlZJaLlE1Byf5VUQlO2Q8WsMsMSsKW3j52mzFFoxTrskxBt6xyQvEbKGoGOGD0VAAvzxGR6U2Lc2o9SLk2wh-CAzu8fUIkJz/s1600/font-awesome-social-icons-rounded-border.png" /></div>
<div>
#fawesomeicons {</div>
<div>
text-align: center;</div>
<div>
}</div>
<div>
#fawesomeicons a {</div>
<div>
border: 1px solid #border-color;</div>
<div>
color: #font-color;</div>
<div>
display: inline-block;</div>
<div>
font-size: 16px;</div>
<div>
width: 30px;</div>
<div>
height: 30px;</div>
<div>
line-height: 30px;</div>
<div>
margin: 0 1px 6px;</div>
<div>
-webkit-border-radius: 100%;</div>
<div>
-moz-border-radius: 100%;</div>
<div>
border-radius: 100%;</div>
<div>
}</div>
<div>
#fawesomeicons a:hover{</div>
<div>
background: #hover-color;</div>
<div>
}</div>
<br /><div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiijOoTsiLS2edWlg6sQqv9b6nBgNioa3psBGZmgCXm_SkaC02virvKQpyqpdbNemNobLQxKITbN3ef85aTOtMPV3Y2eFYomUVyKBPWGhj2IZyZNl6ztyCpGkSmCsdcNmPT5oujMPgDWnIu/s1600/font-awesome-social-icons-font-color.png" /></div>
<br /><div>
#fawesomeicons {</div>
<div>
text-align: center;</div>
<div>
}</div>
<div>
#fawesomeicons a {</div>
<div>
color: #font-color;</div>
<div>
display: inline-block;</div>
<div>
font-size: 23px;</div>
<div>
margin: 0 6px 6px;</div>
<div>
}</div>
<div>
#fawesomeicons a:hover{</div>
<div>
background: #hover-color;</div>
<div>
}</div>
<br /><br />Now, what if we want to change the background or font color of a specific icon? First, we need to identify the icon class which is just after the <i class="fa ..." and add it like this:<br /><br /><div>
#fawesomeicons a <span style="color: red;">.fa-facebook </span>{</div>
<div>
background: #background-color;</div>
<div>
color: #font-color;</div>
<div>
}</div>
<br />Here, we can change the background and color for the Facebook icon but we can do it for any icon you want. For example, let's add another rule for the twitter icon:<br /><br />#fawesomeicons a .fa-facebook {<br />background: #background-color;<br />color: #font-color;<br />}<br />#fawesomeicons a .fa-twitter {<br />background: #background-color;<br />color: #font-color;<br />}<br /><br />To make the fonts bigger, we can add the CSS code like this:<br /><br /><div>
#fawesomeicons {</div>
<div>
text-align: center;</div>
<div>
}</div>
<div>
#fawesomeicons a .fa{</div>
<div>
display: inline-block;</div>
<div>
font-size: 16px;</div>
<div>
width: 30px;</div>
<div>
height: 30px;</div>
<div>
line-height: 30px;</div>
<div>
}</div>
<div>
#fawesomeicons a .fa-facebook {</div>
<div>
background: #background-color;</div>
<div>
color: #font-color;</div>
<div>
}</div>
<div>
 #fawesomeicons a .fa-twitter {</div>
<div>
background: #background-color;</div>
<div>
color: #font-color;</div>
<div>
}</div>
<br />To apply, copy the code above and add the CSS rule with the icon class that you wish to change.<br /><br />Important: When adding the class for your icon, always put a dot (.) in front of it as you can see in the example above, otherwise it won't work.<br /><br />And that's it! Hopefully, this tutorial helped you to add Font Awesome social icons in Blogger. If you're still in trouble adding them, please take a look at <a href="http://fontawesome.io/examples/">Examples page</a>.</div>
<div>
<br /></div>

Blogging How to Add Font Awesome Social Icons in Blogger

It's near impossible to find a blog or site these days without at least one social media account to their name. Be it Twitter or Faceboo...

How to Add Rating Widget for Blogger Posts

22:15 0

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjry-m9MTyRr7lK0x0G9C-kcScZ6dnBwHzAQaKmVR6QW7LKsnuifcaC6bHVpldA-KgJkc-A13aM04Ffv5yKu1Z2NM9M7DM8oHLKMc_1FaAXTs8dZS-jF7D4lnodl3VTOzAomEE4p50SmQ/s1600/Rating-widget.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjry-m9MTyRr7lK0x0G9C-kcScZ6dnBwHzAQaKmVR6QW7LKsnuifcaC6bHVpldA-KgJkc-A13aM04Ffv5yKu1Z2NM9M7DM8oHLKMc_1FaAXTs8dZS-jF7D4lnodl3VTOzAomEE4p50SmQ/s400/Rating-widget.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Start Rating Widget is an awesome source of getting feedback and Positive response from your readers,this widget show stars at the top or below the blog post,where one can rate your blog article.This Widget also show the number of votes.You can rate an article by Selecting and Clicking the stars at Once.Actually this Blog has no effect on Blog Loading Speed.</div>
<div class="separator" style="clear: both; text-align: justify;">
To Add rating widget to blogger go to official Star Rating Widget Website.</div>
<div class="separator" style="clear: both; text-align: justify;">
Link to add star rating for blogger :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
http://rating-widget.com/get/rating/blogger/#editor</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Go to Link Given Above.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
1. Choose Your Style : Star Rating, Thumbs Up and Thumbs Down, or Thumbs Up like.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNYxTv3C4wcorQIdtyECiIJ6rXXm0UZl5EzXanpCz0MeJo7NTndKdvVNpLqSDyfGHclAm542Oqb9AZxE5fkGtBftksbFoDpQ6rgk2Tj-j2ZUcILzKXbhkbjro20ldm_pPBH-QJs_qCg/s1600/bandicam+2016-03-29+10-00-22-138.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNYxTv3C4wcorQIdtyECiIJ6rXXm0UZl5EzXanpCz0MeJo7NTndKdvVNpLqSDyfGHclAm542Oqb9AZxE5fkGtBftksbFoDpQ6rgk2Tj-j2ZUcILzKXbhkbjro20ldm_pPBH-QJs_qCg/s400/bandicam+2016-03-29+10-00-22-138.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. Choose Your Rating Widget's Theme and Color.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp76TEprr5SmGXzGN3Ek9EOGKuzOHOxbtlHOinmv7YyqVHgUEulHreeAxaF-M1z627jchA1FpD9xP4cF-pjY586h-PkP-idWHqBVOT2IfVg6aPZOEyxq3ytMb_6fQ0uIfBscDZi7M5uA/s1600/bandicam+2016-03-29+10-01-03-575.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp76TEprr5SmGXzGN3Ek9EOGKuzOHOxbtlHOinmv7YyqVHgUEulHreeAxaF-M1z627jchA1FpD9xP4cF-pjY586h-PkP-idWHqBVOT2IfVg6aPZOEyxq3ytMb_6fQ0uIfBscDZi7M5uA/s400/bandicam+2016-03-29+10-01-03-575.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
3. Choose Language and Font as you like.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgOHpES4PFuVPeOcwJ4AZTfF6R69SCAC2Q98utkg_S1e9vvm6cugbbqPuKFoG05V3MuTUrGfEdjUr-mvOtbDbvoFWqBbaUqhWzyt5YXvMsmSrx8Pb-MxCiVY4hR4rBrgUkPUiqCPRk4w/s1600/bandicam+2016-03-29+10-01-49-550.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgOHpES4PFuVPeOcwJ4AZTfF6R69SCAC2Q98utkg_S1e9vvm6cugbbqPuKFoG05V3MuTUrGfEdjUr-mvOtbDbvoFWqBbaUqhWzyt5YXvMsmSrx8Pb-MxCiVY4hR4rBrgUkPUiqCPRk4w/s400/bandicam+2016-03-29+10-01-49-550.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
4. Set Labels Position, Size as your Wish.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yEG8eTkIRJGHvec1CefGjmlKMgo2nGqgtASEAwbQ9jCVJdTvf-9cZ3n_RiSkV9Qji13dgCV9YCEBLZGh0K6ZYSZ8BCOVWBJBBmBlZWMNcK5BNF_pckUvFUQ36tDF25VDdzGkpe_sCg/s1600/bandicam+2016-03-29+10-02-20-152.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yEG8eTkIRJGHvec1CefGjmlKMgo2nGqgtASEAwbQ9jCVJdTvf-9cZ3n_RiSkV9Qji13dgCV9YCEBLZGh0K6ZYSZ8BCOVWBJBBmBlZWMNcK5BNF_pckUvFUQ36tDF25VDdzGkpe_sCg/s400/bandicam+2016-03-29+10-02-20-152.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
5. Choose How many Stars you Want to show in Rating Widget like 5 stars, 7 stars or 10 stars.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwei8hT_Afy0E5HsN6R52IhrcWA7xARolUSCqdP5BgVknpojZpSLO37nZbwQOqEpuf8UmfKTXm_9EbLE_bXPDXNDQ4TpLAE8WOucaf6r97VSlrNkci3Md9Y2OZkpQmao9swrX5VOmNcg/s1600/bandicam+2016-03-29+10-02-50-948.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwei8hT_Afy0E5HsN6R52IhrcWA7xARolUSCqdP5BgVknpojZpSLO37nZbwQOqEpuf8UmfKTXm_9EbLE_bXPDXNDQ4TpLAE8WOucaf6r97VSlrNkci3Md9Y2OZkpQmao9swrX5VOmNcg/s400/bandicam+2016-03-29+10-02-50-948.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
6. You can also set custom text for rating.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBewZ9gPjbQX_ZqL-hNhL5z38Vpci3-3nmA6Ql_O1jNQ1P1Gueq8w_PL40z6e1MIk80hx3esOkhwmWcysBeIBqxQ-NrmXl0Q-Kcg_z6dhWQQ7cG43ghCyWtjpqWeKIQ3exPncWwowcdA/s1600/bandicam+2016-03-29+10-03-12-457.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBewZ9gPjbQX_ZqL-hNhL5z38Vpci3-3nmA6Ql_O1jNQ1P1Gueq8w_PL40z6e1MIk80hx3esOkhwmWcysBeIBqxQ-NrmXl0Q-Kcg_z6dhWQQ7cG43ghCyWtjpqWeKIQ3exPncWwowcdA/s400/bandicam+2016-03-29+10-03-12-457.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
7. After all the Customization Click on "Sign Up and Add to Blogger". </div>
<div class="separator" style="clear: both; text-align: left;">
8. Fill up your Email and Password to Sign in.</div>
<div class="separator" style="clear: both; text-align: left;">
9. Fill your Blog Name and Click on "Add to Blogger".</div>
<div class="separator" style="clear: both; text-align: left;">
10. Enjoy. ^_^</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIcr2SKen0dizrtG24grpBbRvpE8rI4hEyNIeFl-r7S60mpD4WfhUmeZvxbP2jk2yU0jAEHXSCV-oeRaPXillU6du5eu8236_M7B_p0dhWvThapIWMrSa7fghmSZ3WcMUqOlv3hCZwA/s1600/bandicam+2016-03-29+10-03-52-990.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIcr2SKen0dizrtG24grpBbRvpE8rI4hEyNIeFl-r7S60mpD4WfhUmeZvxbP2jk2yU0jAEHXSCV-oeRaPXillU6du5eu8236_M7B_p0dhWvThapIWMrSa7fghmSZ3WcMUqOlv3hCZwA/s400/bandicam+2016-03-29+10-03-52-990.jpg" width="400" /></a></div>
<br />

Blogging How to Add Rating Widget for Blogger Posts

Start Rating Widget is an awesome source of getting feedback and Positive response from your readers,this widget show stars at the top ...

Add 10 Types of Emoticons (Smiley) in Blogger Comments

23:37 5

<span style="font-family: "verdana" , sans-serif;">Emoticons can be really useful to express your comment more effectively. This also make your blog stand out and encourages your readers to comments on your article. Though is pity it is not provided by default in blogger.</span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">But sure we can easily add this emoticons plugin in blogger commenting system. I have made this plugin very interesting and easy to use. I have also provided not one type of emoticon but TEN types of emoticons for you.</span></span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Its best for us to provide you with more than one option since every blog template is quite different from each other. Choose any one of the below emoticons and stick to it. It is important to note that once you have added one of emoticons then you could not be able to shift to another type of emoticons since they are not compatible with each other.</span></span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtRrN1K8D9VQII9s85u0ZZquyDwsmP9EhiO2EaiZ1mIbI_IcZqVhFplghtt8-bqRt7S2EaAa4khAajIdhsgBGoK5gauAaYjbAOBFq-SyB7dzg6W2aP2fC22SPfw7sfxTHBh4vKPx8Trw/s1600/fancies-emoticons-for-blogger-comments.jpg" imageanchor="1"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtRrN1K8D9VQII9s85u0ZZquyDwsmP9EhiO2EaiZ1mIbI_IcZqVhFplghtt8-bqRt7S2EaAa4khAajIdhsgBGoK5gauAaYjbAOBFq-SyB7dzg6W2aP2fC22SPfw7sfxTHBh4vKPx8Trw/s400/fancies-emoticons-for-blogger-comments.jpg" width="400" /></a></span></span><br />
<h3>
<span style="font-family: "verdana" , sans-serif;">How to add this emoticons in your blogger comments?</span></h3>
<h4>
<span style="font-family: "verdana" , sans-serif;">Step 1: </span></h4>
<span style="font-family: "verdana" , sans-serif;">Make a backup of template before proceeding the further steps. In this steps you should choose any below of CSS style for emoticons widget. Every style is very different from each other and it does make sure your blog stand out in crowd. Feel free to edit the CSS code to make it compatible to your blog design.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
Choose <b>any one</b> of the below CSS code and place before<b> ]]</b></span><span style="font-family: "verdana" , sans-serif;">></span><span style="font-family: "verdana" , sans-serif;"><b:/skin</span><span style="font-family: "verdana" , sans-serif;">></span><br />
;<span style="font-family: "verdana" , sans-serif;"><b>Style 1:</b></span><br />
<span style="font-family: "verdana" , sans-serif;"><img border="0" height="88" src="https://4.bp.blogspot.com/-fJW6oI672hk/VLZsMk30lBI/AAAAAAAABDM/qDrP78z9lzs/s640/css-style-emoticons-widget.jpg" width="640" /></span><br />
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: "verdana" , sans-serif;">.conemo{display:block;background-color:#F2D790;padding:10px;color:#735555;border:4px #D2C2C2;border-style:double}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#C73535;padding:4px;color:#fff;border-radius:3px}.emobttn:hover{box-shadow:2px 2px 5px #E77B7B}.emobttn{margin-left:15px}.emo-button{color:#fff!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}</span></blockquote>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />
</span><span style="font-family: "verdana" , sans-serif;"><b>Style 2:</b></span></span><br />
<span style="font-family: "verdana" , sans-serif;"><img border="0" height="88" src="https://2.bp.blogspot.com/-q5Q51swSHlU/VLZsRZoTMtI/AAAAAAAABDU/3PObxBGz35Q/s640/css-style-emoticons-widget1.jpg" width="640" /></span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: "verdana" , sans-serif;">.conemo{display:block;background-color:#FFF;padding:10px;color:#494949;border:5px solid #eee}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#8b8b8b;padding:4px;color:#fff;border-radius:3px}.emobttn:hover{box-shadow:2px 2px 5px #B2AAAA}.emobttn{margin-left:15px}.emo-button{color:#fff!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}</span></blockquote>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />
</span><span style="font-family: "verdana" , sans-serif;"><b>Style 3:</b></span></span><br />
<span style="font-family: "verdana" , sans-serif;"><img border="0" height="84" src="https://3.bp.blogspot.com/-sunDmpf-iPM/VLZsXKJoMDI/AAAAAAAABDk/pt8tyl5tvJ4/s640/css-style-emoticons-widget2.jpg" width="640" /></span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: "verdana" , sans-serif;">.conemo{display:block;background-color:#F7F7F7;padding:10px;color:#735555;border:2px #A6A6A6;border-style:dashed}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#fff;padding:4px;color:#fff;border-radius:3px;border:1px solid #F5ACAC}.emobttn:hover{box-shadow:1px 1px 5px #E77B7B}.emobttn{margin-left:15px}.emo-button{color:#E47B7B!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}</span></blockquote>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
<br />
<b>Style 4:</b><br />
<img border="0" height="84" src="https://2.bp.blogspot.com/-FmmL1q7PZbw/VLZsW97R4VI/AAAAAAAABDc/FH3q6WjD2hY/s640/css-style-emoticons-widget3.jpg" width="640" /></span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: "verdana" , sans-serif;">.conemo{display:block;background-color:#E78282;padding:10px;color:#FFF}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#E78282;padding:4px;color:#fff;border-radius:3px;border:1px solid #FFF}.emobttn:hover{background-color:#FFF}.emobttn{margin-left:15px}.emo-button{color:#fff!important}.convert-button:hover,.emo-button:hover{color:#000!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}</span></blockquote>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
<b><br />
Style 5:</b><br />
<img border="0" height="84" src="https://4.bp.blogspot.com/-ADZhD0B5s8s/VLZsXdVoLXI/AAAAAAAABDg/h_1tIC8CF8w/s640/css-style-emoticons-widget4.jpg" width="640" /></span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: "verdana" , sans-serif;">.conemo{display:block;background-color:#82C4E7;padding:10px;color:#FFF}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#73AECD;padding:5px;color:#fff;border-radius:2px}.emobttn:hover{background-color:#EF7F7F}.emobttn{margin-left:15px}.emo-button{color:#fff!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}</span></blockquote>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<h4>
<span style="font-family: "verdana" , sans-serif;">Steps 2: </span></h4>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;">Add the below JavaScript inside and before<b> </b></span></div>
<span style="font-family: "verdana" , sans-serif;"><b><br /></b></span>
 <span style="font-family: "verdana" , sans-serif;">Here in the below JavaScript some variable can edited as per your will.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><span style="background-color: #eeeeee;">pwd</span> : This variable will tell the widget to appear just over comments form. Change it if this value doesn’t work.</span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="background-color: #eeeeee;">notetext</span> : This is string variable and can be edited as per your will. This text will appear just above widget.</span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="background-color: #eeeeee;">emobox</span> : This is Boolean variable means it can take only “true” or ‘false” as their input. Change their value to false if you doesn't want to display widget, but still the widget will still work in background.</span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="background-color: #eeeeee;">emocode</span> : This is variable in which you have the ability to allow specific numbers of emoticon for your blog. Simply remove those emoticon code which is not useful for your readers.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Choose <b>any one</b> of the below emoticons and copy its JavaScript code inside and above<b> </b></span><span style="font-family: "verdana" , sans-serif;"></head></span><br />
<span style="font-family: "verdana" , sans-serif;"><b><br /></b></span>
 <b><i><span style="font-family: "verdana" , sans-serif;">Rice Balls (png)</span></i></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><img border="0" height="220" src="https://2.bp.blogspot.com/-RVSJXAB6j-8/VLZyrxBNekI/AAAAAAAABD8/5cB33-ZgN2E/s640/rice-emoticons-for-blogger-comments.jpg" width="640" /></span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="code">
<span style="font-family: "verdana" , sans-serif;"><script></span><br />
<span style="font-family: "verdana" , sans-serif;">//<![CDATA[</span><br />
<span style="font-family: "verdana" , sans-serif;">var emoRange = "#comments p, div#emoWrap",</span><br />
<span style="font-family: "verdana" , sans-serif;">pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",</span><br />
<span style="font-family: "verdana" , sans-serif;">emobox = true,</span><br />
<span style="font-family: "verdana" , sans-serif;">emocode = " :| ^o^ :@ :-} :s %OD :&#39;( :-! :frown: :o xD :halo: <3 8| :-* 8-0 :D :-# $-) >:-> 8-| >:O P-( :-> +o( :) :p (N) (Y) :&#92; :-{{ ;) :yum: ";</span><br />
<span style="font-family: "verdana" , sans-serif;">//]]></span><br />
<span style="font-family: "verdana" , sans-serif;"></script></span><br />
<span style="font-family: "verdana" , sans-serif;"><script src='https://blogeutectics.googlecode.com/svn/tags/emo/riceemo-eutectics.js' type='text/javascript'/></span></div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Fancies (png)</span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr9RaILvjICuSzd4Ocn1ZRdcWdwRDgqWCbwIazkTIDWUAGSoSvZIEzACBo1-K-5GqJImRPwtCA88I6xWgmg6qhHLcoYSKhjLYx97NrQk39TD1zGVw9zy3dtjbR8QmetFhe30rmqqxPaA/s1600/fancies-emoticons-for-blogger-comments.jpg" imageanchor="1"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr9RaILvjICuSzd4Ocn1ZRdcWdwRDgqWCbwIazkTIDWUAGSoSvZIEzACBo1-K-5GqJImRPwtCA88I6xWgmg6qhHLcoYSKhjLYx97NrQk39TD1zGVw9zy3dtjbR8QmetFhe30rmqqxPaA/s320/fancies-emoticons-for-blogger-comments.jpg" width="320" /></a><img alt="fancies emoticon" border="0" height="110" src="https://2.bp.blogspot.com/-Hhjln8uW1lI/VLZy3q_T-lI/AAAAAAAABEE/yGrXByWzyuE/s640/fancies-emoticons-for-blogger-comments.jpg" title="fancies emoticon" width="640" /></span></div>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;">
</span></code></pre>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " ^o^ :@ (B) :-} :bomb: (Z) :s 8| :'( >:-> %-6 :/ >:) (X) :D =) <3 :mac: 8-| <:o) P-( :( 8-0 +o( :-# |-) :) :stop: O.O :&#92; (N) (Y) :p x> ;) ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/emo2-eutectics.js' type='text/javascript'/></span></code></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Trollicons (png)</span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><img alt="troll emoticon" border="0" height="254" src="https://2.bp.blogspot.com/-6wmI0IQ-j14/VLZzALdyW8I/AAAAAAAABEM/tsiHOFDtulk/s640/troll-emoticons-for-blogger-comments.jpg" title="troll emoticon" width="640" /></span></div>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;">
</span></code></pre>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :-Z :-{{ |-( :-V :s :> :O >:) I:| ):-) :fkyeah: |< :-O =) :/ :-| :) :-)) :| 8-| %-} (P) 8| :@ :-@ =D :( :&#39;( @:-) :p (*0*) O.O :-! :-p :< :? :-(0) ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/troll-eutectics.js' type='text/javascript'/></span></code></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Onion Club (Animated gif)</span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><img alt="onion emoticon" border="0" height="248" src="https://1.bp.blogspot.com/-PdJ-fnGXaAQ/VLZzPX0JueI/AAAAAAAABEU/JFBzliulKyY/s640/onion-emoticons-for-blogger-comments.jpg" title="onion emoticon" width="640" /></span></div>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;">
</span></code></pre>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " +-( |@ :@ -:| B) :&#39;( |( :? (Y) +_+ :) |) |+) (hi) :f :-( =| :-) <3 X/) :X O.O :-@ :3 :O :( :E |-) :J :stfu: %&lt;) %| o.O :wind: :yawn: ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/onionemo-eutectics.js' type='text/javascript'/></span></code></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Pidgin (png)</span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><img alt="pidgin emoticon" border="0" height="90" src="https://2.bp.blogspot.com/--p4ObGkTdtc/VLZzYzR4gOI/AAAAAAAABEc/ZtRFB4L7nRY/s640/pidgin-emoticons-for-blogger-comments.jpg" title="pidgin emoticon" width="640" /></span></div>
<br />
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " >-) (A) :< (N) (bye) (mp) (clap) :s B) (^0^) 8*) }:-) :? D: :X (Y) <3 :E :D :b 8-| :-| <:o) :@ ?:| ^:D :( :-> :o +o( :) xD ^.^ &#39;:-) :&#92; :p >:-) >| ;) -_- -o- :| :&#36; (hi5) ({) (}) :-# |-) ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/pidemo-eutectics.js' type='text/javascript'/></span></code></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Simple White Smiley (png)</span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><img alt="simple white emoticon" border="0" height="82" src="https://1.bp.blogspot.com/-BJF_S8yIxE0/VLZzcGF0V9I/AAAAAAAABEo/TgoFuGzoHp0/s640/white-simple-emoticons-for-blogger-comments.jpg" title="simple white emoticon" width="640" /></span></div>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;">
</span></code></pre>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " ^o^ :@ ^w^ :s B) 8D :&#39;( ;3 }:-) :( :o >) :-) ^_^ ^.^ <3 x| x) 8-D >:D :-3 :-t ^^ +o( :) :| >:) 8) o.O 8( (N) (Y) -_- :p xp :< :/ ;D ;) ;p ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/whiteemo-eutectics.js' type='text/javascript'/></span></code></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Yolks (png)</span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><img alt="yolks emoticon" border="0" height="160" src="https://3.bp.blogspot.com/-VhjoLurTwYc/VLZzb_Lww9I/AAAAAAAABEs/apKZd-Ihogo/s640/yolks-emoticons-for-blogger-comments.jpg" title="yolks emoticon" width="640" /></span></div>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;">
</span></code></pre>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :@ X| @.@ B) :-Z |D <3 (B) :o x. 8-| :-@ &#39;:) :wtf: +o( |-) o.O :) :D :< -_- +o+ :G O.O xd PD &#39;:| ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/yolksemo-eutectics.js' type='text/javascript'/></span></code></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Qip 2005 (Animated gif)(GTAINSIDE Style)</span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><img alt="qip 2005 emoticon" border="0" height="182" src="https://3.bp.blogspot.com/-5pXLbcdW2Hc/VLZzbzoFmKI/AAAAAAAABEk/SoB6JGeIU1k/s640/qip-2005-emoticons-for-blogger-comments.jpg" title="qip 2005 emoticon" width="640" /></span></div>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;">
</span></code></pre>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :) :( ;) :p B) :D :&#36; :O :&#39;( 8- d^^b :s |p :-D }:-) B) :-* +o( |^o @^^. (L) (Th) (hi5) <3 (B) :help: (Z) 8s :-d 8:@ |-( :-v ;-D d^_^b :nono: d-.-b *^_^* *^O^* ^_^* (bye) (Y) (N) :bang: :-E :-s ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/qipemo-eutectics.js' type='text/javascript'/></span></code></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Wordpress smileys</span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><img alt="Wordpress smiley for blogger" border="0" height="180" src="https://2.bp.blogspot.com/-viEHBrpsq5g/VPQ106U9wCI/AAAAAAAABGs/8LEJuO25Jx8/s640/wordpress%2Bsmileys%2Bfor%2Bblogger%2Bcomments.jpg" title="Wordpress smiley for blogger" width="640" /></span></div>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;">
</span></code></pre>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :mrgreen: :arrow: :twisted: :evil: &gt;:D :idea: :oops: :roll: :lol: :cool: :( :) :?  :D :P  :o :x :| ;) :!: :?: &lt;3 &gt;-I |_| :burrito: O_o o_O (w) :star: :developer: :bear: ^^&#39; :&#39;( :/ :facepalm: =^-^= :alien: :cat: :dog: :gun: :poop: :santa: (Y) (N) :victory: ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/wpemo.js' type='text/javascript'/></span></code></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span> <b><span style="font-family: "verdana" , sans-serif;">Most general forum style (Animated gif) - <span style="color: red;">New</span></span></b><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><img alt="GIf emoticons for blogger" border="0" height="180" src="https://2.bp.blogspot.com/-Ry5pV7jYrf0/VPQ12UaBfBI/AAAAAAAABG0/LTjqorO0hzo/s640/add-Emotions-in-blogger-commenting-system.jpg" title="GIf emoticons for blogger" width="640" /></span></div>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;">
</span></code></pre>
<pre><code class="language-markup"><span style="font-family: "verdana" , sans-serif;"><script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :) :( =( :waaa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :yaya: :&#39;( T_T :&#92; :p B) :Q :Ozz 7:( &#92;o/ &#92;m/ **p &lt;3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( &lt;:) &lt;=) (-.-,) *=p =p* &#39;&#39;J :W :bye: :imhere: :cendol: :rolled: *bang* :drummer: :guitarist: :vocalist: ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/emo10eutectics.js' type='text/javascript'/></span></code></pre>
<br />
<h2 class="note">
<span style="font-family: "verdana" , sans-serif;">Troubleshooter</span></h2>
<span style="font-family: "verdana" , sans-serif;">1: If your emoticons box appears below commenting box. Then try this, open your HTML template editor and search for<br /><br /><b> document.getElementById(domId).insertBefore(replybox, null);</b><br /><br />and replace with below one.<br /><br /><b> document.getElementById(domId).insertBefore(replybox.parentNode, null);</b></span><br />
<h3>
<span style="font-family: "verdana" , sans-serif;">Resize Emoticons</span></h3>
<span style="font-family: "verdana" , sans-serif;">If you require to adjust the size of your emoticons to make it smaller simply add this css code before <b>]]></b></span>.<br />
<br />
.emo{
Width:30px;
}<br />
<br />
Add only width not height value since the emoticons will adjust itself accordingly. Change the width value as per your requirement.<br />
<br />
Hope you like this small and excellent plugin by us. If you face any problem regarding this article do comment. For more article like this subscribe us using your emails or like/follow on social domains.<br />
<div>
<br /></div>
<div>
<span style="font-family: "verdana" , sans-serif;">Source : http://eutectics.blogspot.in/</span></div>

Blogging Add 10 Types of Emoticons (Smiley) in Blogger Comments

Emoticons can be really useful to express your comment more effectively. This also make your blog stand out and encourages your readers to c...

How To Customize Your Blogger Blog Using Stylebot

21:51 0

<span style="font-family: Verdana, sans-serif;">Bloggers always wants their blogs to look a top notch infect not only bloggers any website owner will like his website to look stunning and different from others. Not much of bloggers and webmasters know how to code or customized their blogger blogs. We as bloggers normally search for a better looking template on the internet and when found simply apply to our blogs but where the uniqueness go. We usually neglect it and those who want to customize their blogs they don’t recognize the tricks. In this tutorial I will be guiding you how to customize your blogger blog using Stylebot which is a Google chrome extension.</span><h3>
<span style="font-family: Verdana, sans-serif;">What is stylebot</span></h3>
<span style="font-family: Verdana, sans-serif;">Stylebot is nothing but a Google chrome extensions that helps you stylizing your blogger blog that way you want by customizing css of blogs.<br />How To Customize Your Blogger Blog Using Stylebot<br />First download STYLEBOT from Google web store or click this <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha">LINK</a>. After that open your blogger blog by typing  the URL in address bar.<br /></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3viPd7k4ov5OYzQLef2yP5dXHuOxriN1PQT_aqb9qn6SRFdOmooBjOb6LPU-vRrNiwmNpA3clvfYDcR58aYnOB3PbGq9MCK6rVZLSQNoHD8vynuH51J1wZlOpx9PcPQvK_PAgeYzG2Q/s1600/sb1.jpg" style="font-family: Verdana, sans-serif;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3viPd7k4ov5OYzQLef2yP5dXHuOxriN1PQT_aqb9qn6SRFdOmooBjOb6LPU-vRrNiwmNpA3clvfYDcR58aYnOB3PbGq9MCK6rVZLSQNoHD8vynuH51J1wZlOpx9PcPQvK_PAgeYzG2Q/s320/sb1.jpg" width="320" /></a><span style="font-family: Verdana, sans-serif;"><br /><br />You will see a CSS icon placed besides the address bar. Click on it and then press “open Stylebot”<br /><br />Now a horizontal panel will open having different sets of options to customize your blogger blog. Simply move your mouse over blog you will notice a green color border will form around each element as you move, select that element of your blog which you want to customize. There is also another method for selecting an element.Go to that element press right click of the mouse and click Stylebot >> style element.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLOTIjjg1ruxuP6CTu6tKw72tmyNc_f0ZoflDueXpvMjPR_Ivisk0KOQiuwk35oWGKfQhxu0ydiiMWONa48fNGz0UFBXIS6YXAWumQ0x1ldrgdY30ta7_EJNfQ7p4i8a6uaCDfJ7O0Eg/s1600/sb2.jpg" imageanchor="1"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLOTIjjg1ruxuP6CTu6tKw72tmyNc_f0ZoflDueXpvMjPR_Ivisk0KOQiuwk35oWGKfQhxu0ydiiMWONa48fNGz0UFBXIS6YXAWumQ0x1ldrgdY30ta7_EJNfQ7p4i8a6uaCDfJ7O0Eg/s640/sb2.jpg" width="640" /></a><br /><br />Here I am presenting an example to explan how Stylebot works but you can do a whole lot more than this using Stylebot.</span><div>
<h3>
<span style="font-family: Verdana, sans-serif;">Customizing  Post Title</span></h3>
<span style="font-family: Verdana, sans-serif;">Select Post tile >> Go to the text section of Stylebot. Here you can customize your post title by changing its font, increasing font size, adding underline to it etc. You can reset the customization if you have done something wrong by pressing reset button on the bottom.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYVPCQby-Hv2OwRlDAyKe8NYjnpDbl5Et_s87I0s43wBGVLHtKSrbQds5K1CfFpkz_x8ywMGZAGitagjupgq89KJzHLQBI9rfSjpmTCXj4BnXwNCpa1n_RrSExR_Q4CLSSD1s__rLydkZ/s1600/Text+options.png"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYVPCQby-Hv2OwRlDAyKe8NYjnpDbl5Et_s87I0s43wBGVLHtKSrbQds5K1CfFpkz_x8ywMGZAGitagjupgq89KJzHLQBI9rfSjpmTCXj4BnXwNCpa1n_RrSExR_Q4CLSSD1s__rLydkZ/s320/Text+options.png" width="290" /></a><br /><br />When you are done with the styling of your blog, click on Edit CSS button place on the bottom screen of Stylebot and copy that code. We need this code to add it to our blogger blog.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxtWPFJ51RQVIXCTZVkiD8WCmzUw3QN24HfzHcuHl2V5p0MuHBf8bm7762AWaN5w2SZ-sALvo5YO1KCKti2qb6Q_1fKV2gBolFOdZARJI4Wrep3H38ttXhsddhM2Sd82bKEtC3ez4JsTy/s1600/Edit+CSS.png"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxtWPFJ51RQVIXCTZVkiD8WCmzUw3QN24HfzHcuHl2V5p0MuHBf8bm7762AWaN5w2SZ-sALvo5YO1KCKti2qb6Q_1fKV2gBolFOdZARJI4Wrep3H38ttXhsddhM2Sd82bKEtC3ez4JsTy/s320/Edit+CSS.png" width="320" /></a><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnDepTUEgMZfEnuzdS6Cl93ArdFLt_Q5u_mlHtrX7U1J2T-mIoA93Er5cyndZ3h-FO24n2L9TKhc2tNjPwfv0eW4TsFpuJuM4zRDK73IDbpLy51I0i5Uf7r6BOzhg655gbwNSlRwYj5wT/s1600/Copy+CSS.png"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnDepTUEgMZfEnuzdS6Cl93ArdFLt_Q5u_mlHtrX7U1J2T-mIoA93Er5cyndZ3h-FO24n2L9TKhc2tNjPwfv0eW4TsFpuJuM4zRDK73IDbpLy51I0i5Uf7r6BOzhg655gbwNSlRwYj5wT/s320/Copy+CSS.png" width="320" /></a><br /></span></div>
<div>
<h3>
<span style="font-family: Verdana, sans-serif;">Adding the code to your blog</span></h3>
<span style="font-family: Verdana, sans-serif;">Log-inn to blogger and go to the template section of a blog and click customize >> Advanced>> Add CSS >> Apply to blog.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiDg7XA5yndDh5EfqZkROv9m6JeuRUpt0gjRM2snSVb0RiirwDqrGDTVGpSJ4UKEMEKj-UfJ1CKg5gETLU4SWKnEj8uyYEzLOe74u71rWHaFxLqe0RtqsqVQC6bQV6gkpEffV-XsZoJr7q/s1600/Customise+Button.png"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiDg7XA5yndDh5EfqZkROv9m6JeuRUpt0gjRM2snSVb0RiirwDqrGDTVGpSJ4UKEMEKj-UfJ1CKg5gETLU4SWKnEj8uyYEzLOe74u71rWHaFxLqe0RtqsqVQC6bQV6gkpEffV-XsZoJr7q/s320/Customise+Button.png" width="320" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbby9fbyXQh0uW_7biTnwaGoabPzva-lWybX6w4q3BU5RxVueo2k6s8C5YOFeYUCIHLTdF2J5gY1w55C_WgxZN1fyWOWThIz-XucUqslHxgqjWDF0q4rmBukzo_KvOte59iEyAF609IZU3/s1600/Paste+CSS.png"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbby9fbyXQh0uW_7biTnwaGoabPzva-lWybX6w4q3BU5RxVueo2k6s8C5YOFeYUCIHLTdF2J5gY1w55C_WgxZN1fyWOWThIz-XucUqslHxgqjWDF0q4rmBukzo_KvOte59iEyAF609IZU3/s400/Paste+CSS.png" width="400" /></a><br /><br />Note: once you have customized your blogger blog in Stylebot but have not applied changes to blog, it will still show the changes to you only even you reload your blog, to remove this open your blog by typing its URL in address bar then click on CSS icon and Select Remove styling.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />I hope you have now known how to customize your blogger blog using Stylebot, this is an easy way you don’t need to be a tech person for it.</span></div>

Blogging How To Customize Your Blogger Blog Using Stylebot

Bloggers always wants their blogs to look a top notch infect not only bloggers any website owner will like his website to look stunning and ...

Ijonkz v1.3 – Responsive Magazine/News Blogger Template

22:03 2

<span style="font-family: "verdana" , sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZDt5gN0HlK1rSXZzJYzfxCP1z51DrQXtarVAxN1MiNIaHHFVAzeKMrGFggjqWYkYS0BCaLT3rH5yAch1aYOTElc7JEegpZMXZ2fBFyF0NmgJc4840wLxx-L-gizKsauQbrXCdqRLm2n87/s1600/Ijonkz_HowLoad.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZDt5gN0HlK1rSXZzJYzfxCP1z51DrQXtarVAxN1MiNIaHHFVAzeKMrGFggjqWYkYS0BCaLT3rH5yAch1aYOTElc7JEegpZMXZ2fBFyF0NmgJc4840wLxx-L-gizKsauQbrXCdqRLm2n87/s1600/Ijonkz_HowLoad.png" /></a><br />
<br />
Ijonkz a blogger theme with responsive layout and two style Boxed or Full width. Its High User Friendly Blogger Template. Its design simple and clean and perfect for News, Magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsu9vZmbuTVaZhP2rq4TuLa-LMfoYtnD41HGRIoc_RBffSlRGPP0ttj22-rNqV8spWRME-fJR4Aqv7qithBphuj5qqQU6-1xzltYlfYka6NeiRaxGTYhlBIuX6Zo2WzBhELoEpKt1V5I0/s1600/Presentation.png" /><br />
Ijonkz Responsive Magazine/News Blogger Template Features<br />
Current version: 1.3<br />
100% Responsive (Boxed or Full)<br />
Manual Featured Post from Image Widget (Responsive Skitter Slideshow)<br />
Auto Featured Post (Responsive Skitter Slideshow)<br />
Support Blogger Template Customize Editor (Upload Image Background)<br />
Lightweight Auto read-more (support third party image, and Youtube Thumbnail)<br />
Ajax Page Navigation<br />
Tabs Widgets ready (Sidebar)<br />
Ajax JSON Search Result *<br />
Ajax Recent Post by Tag (9 Post Type(Slider, Vertical, Combine, Gallery 1, Gallery 2, Hot, Simple, Noimage and Horizontal) support Random Post) Support Ajax Load More *<br />
Ajax Recent Comment Widget *<br />
Ajax Related Post Widget with Slider Effect<br />
Ajax News Ticker Widget *<br />
Two View Mode (List and Grid) width Cookies<br />
Optimize SEO<br />
Auto Resize Thumbnail image<br />
Meta Keywords And Description Support (Official Meta Description Support)<br />
Allow visitors increase / decrease text size and auto remember for future.<br />
Cool blogger threaded comment (Support Google+ Comment) with Emoticon<br />
3 Comment System (Blogger, Facebook, Disqus)<br />
Custom Error 404 Page<br />
Sticky Sidebar<br />
Custom Share widget icon (addthis widget plugin)<br />
Professional admin layout, help you easy work with blog layout.<br />
Support Print CSS and allow visitors share articles email<br />
Support shortcodes<br />
Support Mega Menu New<br />
Support Post Preview<br />
Added light Weight version New<br />
Support RTL Language<br />
Compatible with major browsers (IE8+,Mozilla,Chrome,Safari,Opera)<br />
<br />
* : Work with Blogger JSON Feed and Public Blog </span><br />
<div>
<span style="font-family: "verdana" , sans-serif;">Note : wait 5 second and click on "SKIP ADD" to go to download page</span><br />
<span style="font-family: "verdana" , sans-serif;">You Can view <a href="http://sh.st/RDTmz">DEMO</a> here</span></div>
<br />
<div style="text-align: center;">
<a href="http://sh.st/RDR4V"><img onmouseout="this.src='https://lh3.googleusercontent.com/-MNE-J5H8t2I/VuwE5iMTbfI/AAAAAAAAAjk/T3PvvvIdumY9MIbgA96HWmpJWVnzlQUJwCCo/s128-Ic42/DOWNLOAD.png'" onmouseover="this.src='https://lh3.googleusercontent.com/-fp19809VnRk/VuwFAfkg_VI/AAAAAAAAAjo/eBori0CxBJUGaBlK1B5NUcz3XtLK1qawACCo/s128-Ic42/DOWNLOAD2.png'" src="https://lh3.googleusercontent.com/-MNE-J5H8t2I/VuwE5iMTbfI/AAAAAAAAAjk/T3PvvvIdumY9MIbgA96HWmpJWVnzlQUJwCCo/s128-Ic42/DOWNLOAD.png" /></a></div>
<br />
<br />

Blogger Templates Blogging Ijonkz v1.3 – Responsive Magazine/News Blogger Template

Ijonkz a blogger theme with responsive layout and two style Boxed or Full width. Its High User Friendly Blogger Template. Its design simpl...

Axact - Responsive Magazine Blogger Theme

How to Add Font Awesome Social Icons in Blogger

How to Add Rating Widget for Blogger Posts

Add 10 Types of Emoticons (Smiley) in Blogger Comments

How To Customize Your Blogger Blog Using Stylebot

Ijonkz v1.3 – Responsive Magazine/News Blogger Template

Popular Posts

Comments

Blog Archive