Technical Tutorials,Tips and Tricks And Premium Accounts: Blogger Tricks

Showing posts with label Blogger Tricks. Show all posts

How to Add Related Post Widget below Blog posts

How to Add Related Post Widget below Blog posts

How to Add Related Post Widget below Blog posts After reading to end of the topic, it is customary blogging practice to suggest other ...

9:27 AM

Add Facebook Pop Up Like Box In Blogger

Add Facebook Pop Up Like Box In Blogger

Add Facebook Pop Up Like Box In Blogger Every blogger wants to increase his blog's traffic which is most important. They use to tr...

3:21 AM

Add a Roseic Hexa Color Code Generator Tool

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsBe7dGXXhO-ToXXTOExo3EMWLlIIvbf-ZZ0-O1u00PIZzZO3j8C5NBcfI1yurmmcAlVSre_0zxLaMr9m6ipaonw_T1PcQJL5I1pHEu6M5MXSIwvCA9tqVK3P6m4yTKEFi0B9-R9ywamA2/s1600/dreamstime_17776541.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsBe7dGXXhO-ToXXTOExo3EMWLlIIvbf-ZZ0-O1u00PIZzZO3j8C5NBcfI1yurmmcAlVSre_0zxLaMr9m6ipaonw_T1PcQJL5I1pHEu6M5MXSIwvCA9tqVK3P6m4yTKEFi0B9-R9ywamA2/s320/dreamstime_17776541.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"> Add a Roseic Hexa Color Code Generator Tool</td></tr>
</tbody></table>
 
Blogger Tools is very important in these days just because of some blog have many unique and awesome tools but they never share that all tools with their visitors to add on another blog but as we saw that and we want to share that tools and we are starting from new and some one unique tools where you doesn't need to search the codes for your fav color just you have to click on your fav color and color code will be show automatically. This is not a SWF tool, this is simply created by the JavaScript. 
 
Step - Ist  Add Hexa Color Code Generator 
 
Login to Blogger > Dashborad 
Click on Drop Down Menu and select Template 
Backup your Template before making any changes to your blog 
Now Click on Edit HTML > Proceed >   Expand Widget Templates 
Press Ctrl + F and search the code </head> 
 
 
<blockquote class="tr_bq">
<script language='javascript'> function Barva(koda) { document.getElementById("vzorec").bgColor=koda; document.hcc.barva.value=koda.toUpperCase(); document.hcc.barva.select(); } function BarvaDruga(koda) { document.getElementById("vzorec2").bgColor=koda; document.hcc.Barva2.value=koda.toUpperCase(); document.hcc.Barva2.select(); } </script> <script type='text/javascript'> var hue; var picker; //var gLogger; var dd1, dd2; var r, g, b; function init() { if (typeof(ygLogger) != "undefined") ygLogger.init(document.getElementById("logDiv")); pickerInit(); //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1" //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1" } // Picker --------------------------------------------------------- function pickerInit() { hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180); hue.onChange = function(newVal) { hueUpdate(newVal); }; picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180); picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); }; hueUpdate(); dd1 = new YAHOO.util.DD("pickerPanel"); dd1.setHandleElId("pickerHandle"); dd1.endDrag = function(e) { // picker.thumb.resetConstraints(); // hue.thumb.resetConstraints(); }; } executeonload(init); function pickerUpdate(newX, newY) { pickerSwatchUpdate(); } function hueUpdate(newVal) { var h = (180 - hue.getValue()) / 180; if (h == 1) { h = 0; } var a = YAHOO.util.Color.hsv2rgb( h, 1, 1); document.getElementById("pickerDiv").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; pickerSwatchUpdate(); } function pickerSwatchUpdate() { var h = (180 - hue.getValue()); if (h == 180) { h = 0; } document.getElementById("pickerhval").value = (h*2); h = h / 180; var s = picker.getXValue() / 180; document.getElementById("pickersval").value = Math.round(s * 100); var v = (180 - picker.getYValue()) / 180; document.getElementById("pickervval").value = Math.round(v * 100); var a = YAHOO.util.Color.hsv2rgb( h, s, v ); document.getElementById("pickerSwatch").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; document.getElementById("pickerrval").value = a[0]; document.getElementById("pickergval").value = a[1]; document.getElementById("pickerbval").value = a[2]; var hexvalue = document.getElementById("pickerhexval").value ='#'+ YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]); ddcolorposter.initialize(a[0], a[1], a[2], hexvalue) if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select(); } </script></blockquote>
 
 
Now Save your template. 
 
 Step - IInd  Add Hexa Color Code Generator 
 
Go to Blogger posting area 
Click on HTML and paste below code in that area. 
 
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<center><form name="hcc" id="hcc"></blockquote>
<blockquote class="tr_bq">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5"></blockquote>
<blockquote class="tr_bq">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2"></blockquote>
<blockquote class="tr_bq">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff"></blockquote>
<blockquote class="tr_bq">
</td></tr></tbody></table></td></tr></tbody></table><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24"></blockquote>
<blockquote class="tr_bq">
</td><td valign="bottom">Color Code : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></td></tr></tbody></table></blockquote>
<blockquote class="tr_bq">
<a href="http://www.widgetgenerators.blogspot.com" style="color: #ffffff">Widget Generators</a></blockquote>
<blockquote class="tr_bq">
</form></center></blockquote>
</blockquote>
 
 
Now Publish Your Post and that's done. 
 
 
You can also add this by using iframe 
 
 Go to Blogger posting area 
Click on HTML and paste below code in that area. 
 
 
<blockquote class="tr_bq">
<center> <iframe frameborder="0" height="420px" marginheight="0px" marginwidth="0px" name="Roseic Hexa Color COde Generator" scrolling="no" src="https://dl.dropbox.com/u/63968842/roseic%20color%20code%20generator%28www.widgetgenerators.blogspot.com%29.html" style="border: 0px #FFFFFF none;" width="500px"></iframe> </center></blockquote>
 
 
Now Publish Your Post and that's done. 
</div>

Add a Roseic Hexa Color Code Generator Tool

Add a Roseic Hexa Color Code Generator Tool Blogger Tools is very important in these days just because of some blog have many unique ...

7:24 AM

How to Have A MetroStyle Cloud Label Or Categories List

How to Have A MetroStyle Cloud Label Or Categories List

How to Have A MetroStyle Cloud Label Or Categories List So in one of our previously featured Blogger tutorials you learned how to add...

10:39 AM

How to add Retro Style Social Sharing Widget With Email Subcription For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-K1iTuZ_wGDcTGvQI8rtzdNI3nq8JSg6M3f99qz3pnYazui2NKgbjC5S927qcizAdKecZ4blcBtheQk7BuGO3xowp6_fgLoZ_3KcfbtM4t3qDJFBoD5IA0L6qgKrOesyoWHWiSlFgbvcu/s1600/Capture.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-K1iTuZ_wGDcTGvQI8rtzdNI3nq8JSg6M3f99qz3pnYazui2NKgbjC5S927qcizAdKecZ4blcBtheQk7BuGO3xowp6_fgLoZ_3KcfbtM4t3qDJFBoD5IA0L6qgKrOesyoWHWiSlFgbvcu/s1600/Capture.PNG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">How to add Retro Style Social Sharing Widget With Email Subcription For Blogger</td></tr>
</tbody></table>
Today I'm gonna explain how to add  Retro Style Social Sharing Widget With Email Subcription For Blogger.This is a beautiful Social Sharing Widget.You can add this to your blog easily without any trouble.</div>
 
 
<h2 style="text-align: center;">
<a href="http://prosoftwares4u.blogspot.com/" target="_blank">Live Demo</a></h2>
 
 
Follow these steps 
1.)Log in to your blogger and Go to Layout > Add Gadget > HTML/JavaScript 
 
2.)Now paste bellow codes. 
<div>
 </div>
<div>
 </div>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<div class="tbisubscribe"></blockquote>
<blockquote class="tr_bq">
<div style="color: #4CC417; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">Get Free Updates in your Inbox</div></blockquote>
<blockquote class="tr_bq">
<div style="margin: 10px 0 0 6px;"></blockquote>
<blockquote class="tr_bq">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=TechnicalTutorialstipsAndTricksAndPremiumAccounts&amp;loc=en_US" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=http://feedburner.google.com/fb/a/mailverify?uri=blogspot/BMlWA&amp;loc=en_US, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow"></blockquote>
<blockquote class="tr_bq">
<input name="uri" type="hidden" value="TechnicalTutorialstipsAndTricksAndPremiumAccounts" /></blockquote>
<blockquote class="tr_bq">
<input name="loc" type="hidden" value="en_US" /></blockquote>
<blockquote class="tr_bq">
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." /></blockquote>
<blockquote class="tr_bq">
<input alt="" class="tbisubmit" title="" type="submit" value="Subscribe" /></blockquote>
<blockquote class="tr_bq">
</form></blockquote>
<blockquote class="tr_bq">
<style></blockquote>
<blockquote class="tr_bq">
/* www.tipsandtricktutorials.blogspot.com */</blockquote>
<blockquote class="tr_bq">
.bubblewrap{</blockquote>
<blockquote class="tr_bq">
list-style-type:none;</blockquote>
<blockquote class="tr_bq">
margin:0;</blockquote>
<blockquote class="tr_bq">
padding:0;</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.bubblewrap li{</blockquote>
<blockquote class="tr_bq">
display:inline;</blockquote>
<blockquote class="tr_bq">
width: 60px;</blockquote>
<blockquote class="tr_bq">
height:60px;</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.bubblewrap li img{</blockquote>
<blockquote class="tr_bq">
width: 50px; /* width of each image.*/</blockquote>
<blockquote class="tr_bq">
height: 50px; /* height of each image.*/</blockquote>
<blockquote class="tr_bq">
border:0;</blockquote>
<blockquote class="tr_bq">
margin-right: 4px; /*spacing between each image*/</blockquote>
<blockquote class="tr_bq">
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */</blockquote>
<blockquote class="tr_bq">
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.bubblewrap li img:hover{</blockquote>
<blockquote class="tr_bq">
-moz-transform:scale(1.8); /*scale up image 1.8x*/</blockquote>
<blockquote class="tr_bq">
-webkit-transform:scale(1.8);</blockquote>
<blockquote class="tr_bq">
-o-transform:scale(1.8);</blockquote>
<blockquote class="tr_bq">
}</style></blockquote>
<blockquote class="tr_bq">
 </blockquote>
<blockquote class="tr_bq">
<center></blockquote>
<blockquote class="tr_bq">
 </blockquote>
<blockquote class="tr_bq">
<ul class="bubblewrap"></blockquote>
<blockquote class="tr_bq">
<li><a href="http://plus.google.com/u/0/104705415499395107820"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM6jGWQPjqp8TEvWE9YMw0Ln-n9Sd5TcL4y6fzqVH11DjnuCVR2gol_ES_0Rlq3S35R84pSLwLbsOpNroJCTmDza1p-h1p0G6a3FI2FNOSGIOlZKyPWQyD9DM4oOrzJIBlny4Mpqy1Ni0/s1600/bloggertrix-google-icon.png" title="Follow to Google"></a></li></blockquote>
<blockquote class="tr_bq">
<li><a href="http://www.facebook.com/NUMANMLK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Hh90s2KDYtfL90HDfZ13-MB7x0mmzR8qy-N6LSdo6LjlahLluiM4omoemhsifTcVlM0nfHcQvtp55Dkeb4S6DVJmlahzt9i0RkDd4GJ347Q4HoKe8xz0SDsSqX5P7k_2MsIlvQYQtJQ/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook"></a></li></blockquote>
<blockquote class="tr_bq">
<li><a href="http://pinterest.com/numanmalik999/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTg8nl1dZWH8Zmb8j1hB7B90An4z8GC21X2tx0cjnzR_QYeRjznHB6BLs1FxAjASHThixLHcbqsNrvIvTRuYan-BV04mG9FpmKErQ-nVoxq0F7BMU2ExOyvU0MW4ZUKsSYEfeoavXleA/s1600/bloggertrix-pinterest-icon.png" title="Add to Pinterest"></a></li></blockquote>
<blockquote class="tr_bq">
<li><a href="http://www.twitter/numanmalik999"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY0x4hdLBQSPMU89cL6jmlMVn5i2F-Ag92eINc9T1K_ss0oIMV2BWgH__BTmYj2YnXu6B7CXT32OHTBBuZFdzXRl8swa2qncaL974mhTPmv2CIxO4mHSEv9HzQTU7GW8_5-pYfXCFjtPk/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter"></a></li></blockquote>
<blockquote class="tr_bq">
</ul></blockquote>
</blockquote>
 
 
 3.)  After paste above codes, 
      Change(replace)  this account ID's to your account ID's 
 
Change 104705415499395107820 to your Google plus Id. 
Change NUMANMALIK to your web site's fan page or your Facebook profile user name. 
Change numanmalik999 to your Pinterest Username. 
Change numanmalik999 to your Twitter Username. 
Change TechnicalTutorialstipsAndTricksAndPremiumAccounts to your Feedburner user Name. 
4.) Now save your "HTML/JavaScript" 
 
You're Done....:) 
Enjoy...</div>

How to add Retro Style Social Sharing Widget With Email Subcription For Blogger

How to add Retro Style Social Sharing Widget With Email Subcription For Blogger Today I'm gonna explain how to add Retro Style ...

8:22 AM

Floating Social Sharing Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9Igjc3WjfedbBSHgSxdl0jYm8Xh3dL21kWeVdtofPDCjPB-K5vCmGu-wmg4o9t30WOQsEBLpVpePS0Q_n7ZP3RAWudURcw1g24pl3rGnULjFcQTrYjziuJL303kci5cLcHFjulQ5XMhy/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9Igjc3WjfedbBSHgSxdl0jYm8Xh3dL21kWeVdtofPDCjPB-K5vCmGu-wmg4o9t30WOQsEBLpVpePS0Q_n7ZP3RAWudURcw1g24pl3rGnULjFcQTrYjziuJL303kci5cLcHFjulQ5XMhy/s320/Capture.PNG" width="40" /></a>Apart from working on traffic and search engine optimization (SEO), it is very important to integrate your blog with popular social networking websites. So, in this post I am presenting how to add floating share buttons (social bookmarking) widget by the right or left of every page. It is just one of the gadgets you must have to add to your blog if you intend to get free</div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
 
Having floating share widgets in either side of the websites an easy way to engage your visitors to share your knowledge with others on those social networks. So let’s talk how to add it. 
 
How to Add Floating Share Buttons On the Sidebar: 
<div>
 </div>
<div>
<div>
1. Login to Blogger dashboard and choose the blog to which you want to add this widget</div>
<div>
2. Go to template section of your blog and then edit its HTML</div>
<div>
<div style="text-align: left;">
3. Now find </body> by pressing Ctrl+F and paste below code just above </body></div>
</div>
</div>
<div>
 </div>
<div>
 </div>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
 
 
 
<div class='addthis_toolbox addthis_floating_style addthis_32x32_style' style='left:100px;top:100px;'> 
<a class="addthis_button_preferred_1"></a> 
<a class="addthis_button_preferred_2"></a> 
<a class="addthis_button_preferred_3"></a> 
<a class="addthis_button_preferred_4"></a> 
<a class="addthis_button_preferred_5"></a> 
<a class="addthis_button_preferred_6"></a> 
<a class="addthis_button_preferred_7"></a> 
<a class="addthis_button_preferred_8"></a> 
<a class="addthis_button_preferred_9"></a> 
<a class="addthis_button_preferred_10"></a> 
<a class="addthis_button_preferred_11"></a> 
<a class="addthis_button_preferred_12"></a> 
<a class="addthis_button_compact at300m"></a> 
<div class="atclear"></div></div> 
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-512e6add1a7ae526' type='text/javascript'/> 
 
</blockquote>
</blockquote>
 
 
4. Save your template. You are all done! 
 
That's it now you have a floating share widget in your Website's Sidebar.</div>

Floating Social Sharing Widget For Blogger

Apart from working on traffic and search engine optimization (SEO), it is very important to integrate your blog with popular social networ...

8:05 AM

Customized Stylish Popular Posts Widget With Round Thumbnail in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_5P_K13ifgoPk5w58deT8eHx3itd8q7MBNS_opYwfM69jveqppbP_aIKIMRkjlkQeQ3Bivf4Svj_M27pz-uW75CNynKqP99fOgQ1ABW64fujtyHBTAcnlRAS5iHY-dAas3c7rLoh0zvZ/s1600/Popolar-Post-Widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_5P_K13ifgoPk5w58deT8eHx3itd8q7MBNS_opYwfM69jveqppbP_aIKIMRkjlkQeQ3Bivf4Svj_M27pz-uW75CNynKqP99fOgQ1ABW64fujtyHBTAcnlRAS5iHY-dAas3c7rLoh0zvZ/s320/Popolar-Post-Widget.png" width="300" /></a></div>
 
 
Popular posts widget in blogger is the best widget which helps to represent the whole blog in a better way to the visitors. It shows the most popular posts of a blog to the readers  so that they can also read them. This amazing gadget in blogger sidebar helps to highlight the trending posts in front of readers. Except these benefits, there is also a limitation of this widget. The only limitation is that the default popular posts gadget is not so attractive and attention grabbing because of its designing and dull looks. But don't worry, we can override its stylesheet and change its colors and fonts according to our need so that it matches best with our blog template. In today's tutorial I will tell you the way to make this gadget more prominent and stylish so that it grabs your visitor's attention. We will customize the default gadget to transform it into a masterpiece. So, let start the tutorial. 
 
 
Add Popular Posts Widget To Blogger Blog 
 
First we need to add default popular posts widget into our blog. Perform the following simple steps to add it. 
Go to Blogger > Layout. 
 
Click on Add a gadget link and choose popular posts gadget from the gadgets list. 
 
Now make following settings 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1CZXlFYJJ5LUEHLTtaZcjfHWo78HSlZ6TfMKPjfpguxyqkLPOjUqmeE_mbTl3zH1UDquNZhbow1lgg0hNl_4CVJNafkloQbbWWQSzy2KuUuEWWuZovanTiftvOpBrnC7P2hY_ZdpLOyi/s1600/Popular-Posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1CZXlFYJJ5LUEHLTtaZcjfHWo78HSlZ6TfMKPjfpguxyqkLPOjUqmeE_mbTl3zH1UDquNZhbow1lgg0hNl_4CVJNafkloQbbWWQSzy2KuUuEWWuZovanTiftvOpBrnC7P2hY_ZdpLOyi/s320/Popular-Posts.png" width="302" /></a></div>
 
 
Set most viewed to Last 7 days 
Check image thumbnail and snippet to show thumbnail along with post summary. It will make our gadget spicier. 
Select no. of posts you want to show. In this example I am selecting 5. You can show at most 10 posts. 
Save the widget. 
Now go to Blogger > Template 
Backup your template to prevent it from any crash. 
Edit HTML > Proceed 
Search ]]></b:skin> 
Now replace it with the following code: 
 
<blockquote class="tr_bq">
/*--- BloggerTipsTricks --- */ .popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXfnN3T_JWdh5rcV-fgWIiy79wuS9ktatQR7VM-kJCTFvUUkdu4OqGSBxV7KBFUF7stgTaE3qiO0RHxgdjfXAJg-OFFTUaCwttXkjSCZ6jebS_umZoZBHzfZZDFF0tVBy0yv5UJcetbs/s1600/1.gif)  no-repeat scroll 5px 10px;   list-style-type: none;   margin:0 0 5px 0px;   padding:5px 5px 5px 20px !important;   border: 1px solid #ddd;   border-radius:10px;   -moz-border-radius:10px;   -webkit-border-radius:10px; } .popular-posts ul   li:hover {   border:1px solid #6BB5FF; } .popular-posts ul   li a:hover {   text-decoration:none; } .popular-posts .item-thumbnail img {   webkit-border-radius: 100px;   -moz-border-radius: 100px;   border-radius: 100px;   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);   box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } ]]></b:skin></blockquote>
 
 
Save your template. 
Done! 
Now visit your blog and check this fancy popular posts plugin in your blog sidebar. 
 
</div>

Customized Stylish Popular Posts Widget With Round Thumbnail in Blogger

Popular posts widget in blogger is the best widget which helps to represent the whole blog in a better way to the visitors. It shows th...

9:34 AM

Latest Posts