MyBloggingTips: Widgets

Mashashare Style Social Sharing Buttons For 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/AVvXsEio_t-xMXCpby6HB6vzoo-ALFuYNnolzvIGBTp21YFMAEvKWKoZMope7Y51QxknUXUg-0MrsJwD2cvbtll97GJzeR9foJuKgpUA0tZuQ72gNgBxh0RmXhQaABF99XTz8d4ZvkQ174NEFHs/s1600/social+sharing+widget.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio_t-xMXCpby6HB6vzoo-ALFuYNnolzvIGBTp21YFMAEvKWKoZMope7Y51QxknUXUg-0MrsJwD2cvbtll97GJzeR9foJuKgpUA0tZuQ72gNgBxh0RmXhQaABF99XTz8d4ZvkQ174NEFHs/s1600/social+sharing+widget.PNG" title="Mashashare Style Social Sharing Buttons For Blogger " width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-size: normal;"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">This is just another<a href="http://www.mybloggingtips.com/search/label/Widgets?&max-results=6" target="_blank"> social sharing widget for blogger</a>. Simple, elegant and fast loading widget which will enhanced overall look of your blog.</span></span></span><br />
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="font-family: Georgia,"Times New Roman",serif;"><span style="color: #eeeeee;"> How To ?</span></span></h3>
<ul style="color: #343333;">
<li><span style="font-family: Georgia, Times New Roman, serif;">Go to <b>Blogger Dashboard > Template</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Click on <b>Edit Template.</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Search following code</span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Georgia, Times New Roman, serif;">post-header-line-1</span></blockquote>
<br />
<div>
<ul style="color: #343333;">
<li><span style="font-family: Georgia, Times New Roman, serif;">Paste following code below and save it. </span></li>
</ul>
<blockquote class="tr_bq">
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;link rel='stylesheet' id='stylesheet-css' href='http://www.mashshare.net/wp-content/themes/inovado/style.css?ver=1' type='text/css' media='all' /&gt; &lt;link rel='stylesheet' id='mashsharer_network_style-css' href='http://www.mashshare.net/wp-content/plugins/mashshare-networks/assets/mash-network.css?ver=3.9.1' type='text/css' media='all' /&gt; &lt;link rel='stylesheet' id='mashsharer_style-css' href='http://www.mashshare.net/wp-content/plugins/mashsharer/assets/mashsharer.css?ver=3.9.1' type='text/css' media='all' /&gt; &lt;script type='text/javascript' src='http://www.mashshare.net/wp-includes/js/jquery/jquery.js?ver=1.11.0'&gt;&lt;/script&gt; &lt;script type='text/javascript' src='http://www.mashshare.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'&gt;&lt;/script&gt; &lt;script type='text/javascript' src='http://www.mashshare.net/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05'&gt;&lt;/script&gt; &lt;script type='text/javascript' src='http://www.mashshare.net/wp-content/plugins/mashshare-networks/assets/mash-network.js?ver=1.1'&gt;&lt;/script&gt; &lt;div class=&quot;mashsharer-buttons&quot;&gt; <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>Share on Facebook</a> <a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'>Tweet on Twitter</a> &lt;/div&gt; &lt;div class=&quot;onoffswitch&quot;&gt; &lt;input type=&quot;checkbox&quot; name=&quot;onoffswitch&quot; class=&quot;onoffswitch-checkbox&quot; id=&quot;myonoffswitch&quot; checked='true'&gt; &lt;label class=&quot;onoffswitch-label&quot; for=&quot;myonoffswitch&quot;&gt; &lt;div class=&quot;onoffswitch-inner&quot;&gt;&lt;/div&gt; &lt;!--&lt;div class=&quot;onoffswitch-switch&quot;&gt;&lt;/div&gt;--&gt; &lt;/label&gt; &lt;/div&gt; &lt;div class=&quot;mashshare-extra-buttons&quot;&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;link rel='stylesheet' id='stylesheet-css' href='http://www.mashshare.net/wp-content/themes/inovado/style.css?ver=1' type='text/css' media='all' /&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;link rel='stylesheet' id='mashsharer_network_style-css' href='http://www.mashshare.net/wp-content/plugins/mashshare-networks/assets/mash-network.css?ver=3.9.1' type='text/css' media='all' /&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;link rel='stylesheet' id='mashsharer_style-css' href='http://www.mashshare.net/wp-content/plugins/mashsharer/assets/mashsharer.css?ver=3.9.1' type='text/css' media='all' /&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;script type='text/javascript' src='http://www.mashshare.net/wp-includes/js/jquery/jquery.js?ver=1.11.0'&gt;&lt;/script&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;script type='text/javascript' src='http://www.mashshare.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'&gt;&lt;/script&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;script type='text/javascript' src='http://www.mashshare.net/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05'&gt;&lt;/script&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;script type='text/javascript' src='http://www.mashshare.net/wp-content/plugins/mashshare-networks/assets/mash-network.js?ver=1.1'&gt;&lt;/script&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;div class=&quot;mashsharer-buttons&quot;&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;"><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>Share on Facebook</a></span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;"><a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'>Tweet on Twitter</a></span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;/div&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;div class=&quot;onoffswitch&quot;&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;input type=&quot;checkbox&quot; name=&quot;onoffswitch&quot; class=&quot;onoffswitch-checkbox&quot; id=&quot;myonoffswitch&quot; checked='true'&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;label class=&quot;onoffswitch-label&quot; for=&quot;myonoffswitch&quot;&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;div class=&quot;onoffswitch-inner&quot;&gt;&lt;/div&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;!--&lt;div class=&quot;onoffswitch-switch&quot;&gt;&lt;/div&gt;--&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;/label&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;/div&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;div class=&quot;mashshare-extra-buttons&quot;&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;"><div style='padding-top:5px'></span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;"><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-504abce20a0f7fba' type='text/javascript'/></span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;"><div class='addthis_sharing_toolbox'/></span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;"></div></span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;/div&gt;</span></span><br />
<span style="background-color: #cccccc;"><span style="font-size: small;">&lt;div style=&quot;clear:both;:&quot;&gt;&lt;/div&gt;&lt;div style=&quot;clear:both;:&quot;&gt;&lt;/div&gt;</span></span></blockquote>
<i>Credit:  Mashable and Mashshare. </i></div>
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="font-family: Georgia,"Times New Roman",serif;"><span style="color: #eeeeee;"> Did You Like It ?</span></span></h3>
<span style="font-family: Georgia, "Times New Roman", serif;">If you like it and it worked for you then please share it with your friends and on social media networks.</span><br />
<br /></div>

Mashashare Style Social Sharing Buttons For Blogger

This is just another social sharing widget for blogger . Simple, elegant and fast loading widget which will enhanced overall look of y...

Responsive Metro Style Social Share Widget for 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/AVvXsEgNZlhyphenhyphenmg1PeUYBcmwx1d_7f_PhWIlYCkz4_-SQDq1pbvfdxCGrj7YktDoMSwJGlzPbMBQOEEZkTKEMPE46D5YyOWLgveS10RqS_xardqsCpzSLpFB4VxMcA4MR05D8var4RA_Zkdkdu2s/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZlhyphenhyphenmg1PeUYBcmwx1d_7f_PhWIlYCkz4_-SQDq1pbvfdxCGrj7YktDoMSwJGlzPbMBQOEEZkTKEMPE46D5YyOWLgveS10RqS_xardqsCpzSLpFB4VxMcA4MR05D8var4RA_Zkdkdu2s/s1600/Capture.PNG" width="640" /></a></div>
<br />
Social shares are really a great way to get more readers and page/post views. There are many <a href="http://www.mybloggingtips.com/2014/07/stylish-social-subscription-widgets-for.html" target="_blank">social subscription widgets</a> out there, but today I am going to share a responsive <a href="http://www.mybloggingtips.com/2014/06/ultimate-collection-of-metro-style.html" target="_blank">metro style social share widget</a> with you. It will increase not only your shares, views but will also look  great on your site.<br />
<br />
<div style="color: #343333; font-family: Verdana;">
<b>You may like it</b>:</div>
<ul>
<li><span style="color: blue; font-family: Verdana;"><b><a href="http://www.mybloggingtips.com/2014/06/ultimate-collection-of-metro-style.html" target="_blank">Ultimate Collection of Metro Style Widgets for Blogger</a></b></span></li>
<li><span style="color: blue; font-family: Verdana;"><b><a href="http://www.mybloggingtips.com/2014/06/pure-metro-style-menu-for-blogger.html" target="_blank">Metro Style Menu for Blogger</a></b></span></li>
</ul>
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> Show Me How</span></h3>
<ul style="color: #343333;">
<li><span style="font-family: Georgia, Times New Roman, serif;">Go to <b>Blogger Dashboard > Layout</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Click on <b>Add a Gadget</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Select <b>HTML/JavaScript</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Paste following code and save it.</span></li>
</ul>
<div style="border: 0px; font-family: 'Open Sans', sans-serif; outline: none medium; padding: 10px; vertical-align: baseline;">
<blockquote class="tr_bq">
<span style="background-color: #cccccc;"><style> </span><span style="background-color: #cccccc;">.Mbt-Social-metro {</span><span style="background-color: #cccccc;">    width: 960px;</span><span style="background-color: #cccccc;">    float: left;</span><span style="background-color: #cccccc;">    margin: 0;</span><span style="background-color: #cccccc;">    padding: 1em 0;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul {</span><span style="background-color: #cccccc;">    margin: 0;</span><span style="background-color: #cccccc;">    padding: 0;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul li {</span><span style="background-color: #cccccc;">    list-style: none;</span><span style="background-color: #cccccc;">    list-style-type: none;</span><span style="background-color: #cccccc;">    padding: 0;</span><span style="background-color: #cccccc;">    text-transform: none;</span><span style="background-color: #cccccc;">    margin: 0;</span><span style="background-color: #cccccc;">    float: left;</span><span style="background-color: #cccccc;">    display: inline-block;</span><span style="background-color: #cccccc;">    width: 20%;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul li a {</span><span style="background-color: #cccccc;">    font-size: 80%;</span><span style="background-color: #cccccc;">    color: #fff!important;</span><span style="background-color: #cccccc;">    display: block;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul li a:hover {</span><span style="background-color: #cccccc;">    color: #000!important;</span><span style="background-color: #cccccc;">    background-color: #999;</span><span style="background-color: #cccccc;">    text-decoration: none;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">idc-scoail ul li a, ul li a:hover {</span><span style="background-color: #cccccc;">    -moz-transition: all 0.3s ease-in-out;</span><span style="background-color: #cccccc;">    transition: all 0.3s ease-in-out;</span><span style="background-color: #cccccc;">    -webkit-transition: all 0.3s ease-in-out;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul li .rss {</span><span style="background-color: #cccccc;">    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWrNqc0VAmBtoD7_DEt33fEabik8PeC4lthvMMuPT0MhkULscbrPK9xlZm-1F49vJJCUp1Rjd6UN-q2qp5ME6nqRI9oNuZKmFHuPYZvlQsEucJvxN7Bqnv9GSW3ZIwr44FuR3yYBiEbok/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12;</span><span style="background-color: #cccccc;">    background-size: 20px;</span><span style="background-color: #cccccc;">    padding: 10px 50px;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul li .twitter {</span><span style="background-color: #cccccc;">    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0135eBmPgPSwqGxjXQS_HeiKgUbEz3ho4qZaHJuvbJ16YsYo9kJlMcixoY2kbAtA-JZ9Crb1NyXfdotR16Hbt8Mnfr6p7nAke_p65qRspFYszZ-PkhVKPuB9DzLEQ0sGqzP3BWHjCFrjc/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE;</span><span style="background-color: #cccccc;">    background-size: 20px;</span><span style="background-color: #cccccc;">    padding: 10px 50px;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul li .facebook {</span><span style="background-color: #cccccc;">    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT92I90zSKo1Q0X-Lhyphenhyphenn06dfeCnbEA1EDW78gjvlEvjSipb6PMA4gN9JMzjBv4wp84yOtoSLzfcwaDfGGXDhIHKzwC5fmSsgzmmBUS5RW3Q7QXlFQ-ueIpeshKZHgz4Zwlc-HW0RTXv3M-/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998;</span><span style="background-color: #cccccc;">    background-size: 20px;</span><span style="background-color: #cccccc;">    padding: 10px 50px;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul li .google {</span><span style="background-color: #cccccc;">    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7OIt09gOB7sHT_JwE3R1FQs9tr54HJEBuu9L1ozc0bExiZj_8D1YZuYQHM9scR2vDdb6fuy5oycYtFrRv_BaRUglEJ2QMLvLxrnPD_UwuuDTcFki191UvSTeQ0t0J5StvYroEl7tQNxje/s1600/google.png") no-repeat scroll 10px center #D44937;</span><span style="background-color: #cccccc;">    background-size: 20px;</span><span style="background-color: #cccccc;">    padding: 10px 50px;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.Mbt-Social-metro ul li .linkedin {</span><span style="background-color: #cccccc;">    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl9lQ10b6Zuiiod8MOsqm34RjozKFVcfwS6dSj5Fcr27kcjcdsnnnUPfWxSfdY608UDKevtT9MU7dk0JipTv1sIyOnhUX2012RQ4s6BhlN4DcIAhAWj1LukSaXeRxM2zX3J8I5Hu1PEcl_/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;</span><span style="background-color: #cccccc;">    background-size: 20px;</span><span style="background-color: #cccccc;">    padding: 10px 50px;</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">/* width of 768px */</span><span style="background-color: #cccccc;">@media only screen and (min-width: 768px) and (max-width: 959px) {</span><span style="background-color: #cccccc;">    .Mbt-Social-metro ul li {</span><span style="background-color: #cccccc;">        width: 50%;</span><span style="background-color: #cccccc;">    };</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">/* width of 480px */</span><span style="background-color: #cccccc;">@media only screen and (min-width: 480px) and (max-width: 767px) {</span><span style="background-color: #cccccc;">    .Mbt-Social-metro ul li {</span><span style="background-color: #cccccc;">        width: 50%;</span><span style="background-color: #cccccc;">    };</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">/* width of 320px */</span><span style="background-color: #cccccc;">@media only screen and (max-width: 480px) {</span><span style="background-color: #cccccc;">    .Mbt-Social-metro ul li {</span><span style="background-color: #cccccc;">        width: 100%;</span><span style="background-color: #cccccc;">    };</span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;"></style></span><span style="background-color: #cccccc;"><div class='Mbt-Social-metro'></span><span style="background-color: #cccccc;"><ul></span><span style="background-color: #cccccc;"><li><a class='rss' href='http://feeds.feedburner.com/<b><span style="color: blue;">mybloggingtips1</span></b>'>Subscribe our Feed</a></li></span><span style="background-color: #cccccc;"><li><a class='twitter' href='https://twitter.com/<span style="color: blue;"><b>mybloggingtips</b></span>'>Follow me on Twitter</a></li></span><span style="background-color: #cccccc;"><li><a class='facebook' href='https://www.facebook.com/<span style="color: blue;"><b>blogsmasala</b></span>'>Find me on Facebook</a></li></span><span style="background-color: #cccccc;"><li><a class='google' href='https://plus.google.com/<b><span style="color: blue;">ID here</span></b>'>Join me on Google+</a></li></span><span style="background-color: #cccccc;"><li><a class='linkedin' href='http://in.linkedin.com/in/<span style="color: blue;"><b>mybloggingtips</b></span>'>Connect with LinkedIn</a></li></span><span style="background-color: #cccccc;"></ul></span><span style="background-color: #cccccc;"></div></span></blockquote>
</div>
<b>You might want to check out: <a href="http://www.mybloggingtips.com/2014/06/best-facebook-like-widgets-for-your-blog.html" target="_blank">Collection of Facebook Like Widgets for Blogger</a> </b><br />
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> Customization</span></h3>
Just change the <b><span style="color: blue;">Blue</span></b> color text with your feed Id and other social sites names and you are done!. Please Like and Share it.<br />
<br /></div>

Responsive Metro Style Social Share Widget for Blogger

Social shares are really a great way to get more readers and page/post views. There are many social subscription widgets out there, but...

Simple Style Email Subscription Box for Blogger - WordPress Design

<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/AVvXsEigDI5EX5EgjBanScTVmuiAIQnPdg3EKAPUOVetNTMTvDNH4PLmDgZ0WPZbKFYH2-GkR2RKpsiKDL_bC1-3knCMJYWgqzemMVmM5NZ0h3EPNdsFDTSbEyzeWR9Ik9DPdbv-h765SxxFW0k/s1600/2014-07-21_9-00-21.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigDI5EX5EgjBanScTVmuiAIQnPdg3EKAPUOVetNTMTvDNH4PLmDgZ0WPZbKFYH2-GkR2RKpsiKDL_bC1-3knCMJYWgqzemMVmM5NZ0h3EPNdsFDTSbEyzeWR9Ik9DPdbv-h765SxxFW0k/s1600/2014-07-21_9-00-21.png" width="311" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Email subscription is a very popular way to subscribe any blog/website and get updates directly in the mailbox, that's why you may always notice that number of feeds subscribers is always more that any other <a href="http://www.mybloggingtips.com/2014/07/social-media-blogging-and-how-to-get.html" target="_blank">social network subscribers</a>. This is an awesome email <a href="http://www.mybloggingtips.com/search/label/Widgets?&max-results=6" target="_blank">subscription widget</a> which can be used to <a href="http://www.mybloggingtips.com/2014/06/add-easily-floating-social-media.html" target="_blank">increase your feedburner subscribers</a> and also makes your blog look professional and smart looking.</span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br />
</span> <br />
<div>
<div style="color: #343333; font-family: Verdana;">
<b>You may like it</b>:</div>
<ul>
<li><span style="color: blue; font-family: Verdana;"><b><a href="http://www.mybloggingtips.com/2014/07/email-subscription-widget-for-blogger.html" target="_blank">Email Subscription Box with Social Share Buttons</a></b></span></li>
<li><span style="color: #343333; font-family: Verdana;"><a href="http://www.mybloggingtips.com/2014/07/add-subscription-box-with-social-icons.html" target="_blank"><b>Awesome Subscription Widget for Blogger with Share Option</b></a></span></li>
</ul>
</div>
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> Show Me How</span></h3>
<ul style="color: #343333;">
<li><span style="font-family: Georgia, Times New Roman, serif;">Go to <b>Blogger Dashboard > Layout</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Click on <b>Add a Gadget</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Select <b>HTML/JavaScript</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Paste following code and save it.</span></li>
</ul>
<blockquote class="tr_bq">
<center><br />
<div align="center" id="truebloggertricks-Subscribe-wrapper"><br />
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;"><br />
<h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;"><br />
GET FREE EMAIL UPDATES</h3><br />
<div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;"><br />
Subscribe and get valuable content delivered right through your inbox.</div><br />
<br /><br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: blue;"><b>mybloggingtips/nJeF</b></span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><br />
<input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br /><br />
<input class="email" id="truebloggertricks_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /><br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
<input name="uri" type="hidden" value="<b><span style="color: blue;">mybloggingtips/nJeF</span></b>" /><input name="loc" type="hidden" value="en_US" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Hook Me Up!" /></form><br />
</div><br />
</div><br />
</center><br />
<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;<br />
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;<br />
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;<br />
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;<br />
padding: 5px;border: none;}#ig-subscription-optin input.name {<br />
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguLyqdjicf0TkheRuRm4xPlAVhESI4jt8g-d7FIsP-sLG6ueJsALo-mtMgR14DaQdBGwVKBp4uuYePBcLwSTioZMiE5SJg_aOGds0ChkhD3UdqTCJ6shaPdXCQhmRqdNAJVlz-coroW75y/s1600/subscribe-name.png) no-repeat center right;}<br />
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;<br />
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}<br />
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bgyYayNQQtJUUWeA53ZsnxZHPfJCK0p5U_N_RZNgN813bAlHKFagkfqIvaIe6HR7jn4I4-KDkroUKKXqpEkDh5kVu7g46FPjHcGKQ0ZMzCNIKsQmKbI1AzztMaFj93LZaX53EuWRKH4v/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {<br />
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;<br />
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;<br />
text-transform: none;text-decoration: none;<br />
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;<br />
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {<br />
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;<br />
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {<br />
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kF_eu1wT8IG7pBfZ3YkRLv0GQ99-3Z0b4Xu1cjpaDv7vPSQ2POqTAkQEB9Sx4griM6Pa5VweUN2vie-joMRNvN9XSFTEP_-wmOW7fk6tPGxHR3e_RoDqIECtVGttUBXtazS7Ou_1rj11/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;<br />
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}<br />
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style></blockquote>
<b>You might want to check out: <a href="http://www.mybloggingtips.com/2014/06/best-facebook-like-widgets-for-your-blog.html" target="_blank">Collection of Facebook Like Widgets for Blogger</a> </b><br />
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> Customization</span></h3>
Just change the <b><span style="color: blue;">Blue</span></b> color text with your feed Id and you are done!. Please Like and Share it.<br />
<br /></div>

Simple Style Email Subscription Box for Blogger - WordPress Design

Email subscription is a very popular way to subscribe any blog/website and get updates directly in the mailbox, that's why you may...

Decent Email Subscription Widgets For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq" dir="ltr" trbidi="on">
<div dir="ltr" trbidi="on">
<div dir="ltr" trbidi="on">
<div style="color: #343333; font-family: Verdana; font-size: 12px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WYjSkGWmaY53c7j-zLI3vlzxC7fvg_i8D73cszVgYn18BZ9080OsWY0X_ASpFPd4SufECehGZZJv_UQVhUJo4PblyJ_dkGh1qt-Bt9XX0VMvm9YPVh4lcgEEpDRnbWJwn6TTJAVziS0/s1600/helperblogger.com-blue.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WYjSkGWmaY53c7j-zLI3vlzxC7fvg_i8D73cszVgYn18BZ9080OsWY0X_ASpFPd4SufECehGZZJv_UQVhUJo4PblyJ_dkGh1qt-Bt9XX0VMvm9YPVh4lcgEEpDRnbWJwn6TTJAVziS0/s1600/helperblogger.com-blue.png" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
</div>
<div>
<div style="color: #343333; font-family: Verdana;">
Eye catching and fast loading email subscription widgets are compulsory part of for blogger. It not only gives an option to your readers to subscribe and get all updates free but also gives a professional look. Below are two simple and decent looking email subscription boxes for blogger. </div>
<div style="color: #343333; font-family: Verdana;">
<br /></div>
<div style="color: #343333; font-family: Verdana;">
<b>You may like it</b>:</div>
<ul style="text-align: left;">
<li><span style="color: blue; font-family: Verdana;"><b><a href="http://www.mybloggingtips.com/2014/07/email-subscription-widget-for-blogger.html" target="_blank">Email Subscription Box with Social Share Buttons</a></b></span></li>
<li><span style="color: #343333; font-family: Verdana;"><a href="http://www.mybloggingtips.com/2014/07/add-subscription-box-with-social-icons.html" target="_blank"><b>Awesome Subscription Widget for Blogger with Share Option</b></a></span></li>
</ul>
</div>
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="background-color: teal;"><span style="color: #eeeeee;"> Show Me How</span></span></h3>
<ul style="color: #343333; text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;">Go to <b>Blogger Dashboard > Layout</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Click on <b>Add a Gadget</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Select <b>HTML/JavaScript</b></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Paste any of the following code and save it.</span></li>
</ul>
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="background-color: teal;"><span style="color: #eeeeee;"> Style - 1</span></span></h3>
<div class="separator" style="clear: both; color: #343333; font-family: Verdana; font-size: 12px; text-align: left;">
<br /></div>
</div>
</div>
<div class="separator" style="clear: both; color: #343333; font-family: Verdana; font-size: 12px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WYjSkGWmaY53c7j-zLI3vlzxC7fvg_i8D73cszVgYn18BZ9080OsWY0X_ASpFPd4SufECehGZZJv_UQVhUJo4PblyJ_dkGh1qt-Bt9XX0VMvm9YPVh4lcgEEpDRnbWJwn6TTJAVziS0/s1600/helperblogger.com-blue.png" imageanchor="1" style="color: #017db0; margin-left: 1em; margin-right: 1em; outline: 0px;"><img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WYjSkGWmaY53c7j-zLI3vlzxC7fvg_i8D73cszVgYn18BZ9080OsWY0X_ASpFPd4SufECehGZZJv_UQVhUJo4PblyJ_dkGh1qt-Bt9XX0VMvm9YPVh4lcgEEpDRnbWJwn6TTJAVziS0/s1600/helperblogger.com-blue.png" style="border-width: 0px;" width="400" /></a></div>
<div style="color: #343333; font-family: Verdana;">
<br /></div>
<blockquote class="tr_bq" style="font-family: Verdana; font-size: 12px;">
<span style="color: #343333;"><style type="text/css"></span><span style="color: #343333;">#helperblogger-emailbox {</span><span style="color: #343333;">    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WYjSkGWmaY53c7j-zLI3vlzxC7fvg_i8D73cszVgYn18BZ9080OsWY0X_ASpFPd4SufECehGZZJv_UQVhUJo4PblyJ_dkGh1qt-Bt9XX0VMvm9YPVh4lcgEEpDRnbWJwn6TTJAVziS0/s1600/helperblogger.com-blue.png)no-repeat scroll center center transparent;</span><span style="color: #343333;">    height: 143px;</span><span style="color: #343333;">    width: 368px;</span><span style="color: #343333;">}</span><span style="color: #343333;"> </span><span style="color: #343333;">form#helperblogger-emailform {</span><span style="color: #343333;">    display: block;</span><span style="color: #343333;">    margin: 0;</span><span style="color: #343333;">    padding-left: 42px;</span><span style="color: #343333;">    padding-top: 67px;</span><span style="color: #343333;">}</span><span style="color: #343333;"> </span><span style="color: #343333;">form#helperblogger-emailform #s {</span><span style="color: #343333;">    background: transparent;</span><span style="color: #343333;">    border: none;</span><span style="color: #343333;">    color: #444242;</span><span style="color: #343333;">    font-family: georgia;</span><span style="color: #343333;">    font-size: 15px;</span><span style="color: #343333;">    font-style: italic;</span><span style="color: #343333;">    height: 30px;</span><span style="color: #343333;">    margin-top: -2px;</span><span style="color: #343333;">    padding-left: 2px;</span><span style="color: #343333;">    vertical-align: top;</span><span style="color: #343333;">    width: 227px;</span><span style="color: #343333;">}</span><span style="color: #343333;"> </span><span style="color: #343333;">form#helperblogger-emailform #sbutton {</span><span style="color: #343333;">    background: transparent;</span><span style="color: #343333;">    border: none;</span><span style="color: #343333;">    cursor: pointer;</span><span style="color: #343333;">    height: 30px;</span><span style="color: #343333;">    padding-right: 45px;</span><span style="color: #343333;">}</style><br />
</span><span style="color: #343333;"> </span><span style="color: #343333;"><div id="helperblogger-emailbox"></span><span style="color: #343333;">    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"</span><span style="color: #343333;">    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=</span><span style="color: blue;"><b>mybloggingtip</b></span><span style="color: #343333;">', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">         <input type="hidden" value="</span><span style="color: #343333;">        <input type="hidden" value="</span><b><span style="color: blue;">mybloggingtips</span></b><span style="color: #343333;">" name="uri" />         <input type="text" id="s" name="email" value="Enter Your E-Mail Here"         onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'         onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'         />         <input type="hidden" name="loc" value="en_US" />         <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"         />     </form> </div></span><span style="color: #343333;">        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"</span><span style="color: #343333;">        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'</span><span style="color: #343333;">        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'</span><span style="color: #343333;">        /></span><span style="color: #343333;">        <input type="hidden" name="loc" value="en_US" /></span><span style="color: #343333;">        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"</span><span style="color: #343333;">        /></span><span style="color: #343333;">    </form></span><span style="color: #343333;"></div></span></blockquote>
</div>
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="color: #eeeeee;"> Style - 2</span></h3>
<br />
<div class="separator" style="clear: both; color: #343333; font-family: Verdana; font-size: 12px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6JXHRp0pGfsyzRK0NwXOBQhCFEmcxtdo1E3qowMxeaeJh-xISEkUa-usoCXwmTkGBcuu0LxeL6u5YWOuXq093jRJ4oO1nPcoNKZ7oSWPTNZm6aMZmsZj-OYbk0OWZBoqSku5yRTkHUg/s1600/helperblogger.com-silver.png" imageanchor="1" style="color: #017db0; margin-left: 1em; margin-right: 1em; outline: 0px;"><img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6JXHRp0pGfsyzRK0NwXOBQhCFEmcxtdo1E3qowMxeaeJh-xISEkUa-usoCXwmTkGBcuu0LxeL6u5YWOuXq093jRJ4oO1nPcoNKZ7oSWPTNZm6aMZmsZj-OYbk0OWZBoqSku5yRTkHUg/s400/helperblogger.com-silver.png" style="border-width: 0px;" width="400" /></a></div>
<br style="color: #343333; font-family: Verdana; font-size: 12px;" />
<blockquote style="color: #343333;">
<style type="text/css"><br />
#helperblogger-emailbox {<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6JXHRp0pGfsyzRK0NwXOBQhCFEmcxtdo1E3qowMxeaeJh-xISEkUa-usoCXwmTkGBcuu0LxeL6u5YWOuXq093jRJ4oO1nPcoNKZ7oSWPTNZm6aMZmsZj-OYbk0OWZBoqSku5yRTkHUg/s1600/helperblogger.com-silver.png)no-repeat scroll center center transparent;<br />
height: 143px;<br />
width: 368px;<br />
}<br />
form#helperblogger-emailform {<br />
display: block;<br />
margin: 0;<br />
padding-left: 42px;<br />
padding-top: 67px;<br />
}<br />
form#helperblogger-emailform #s {<br />
background: transparent;<br />
border: none;<br />
color: #444242;<br />
font-family: georgia;<br />
font-size: 15px;<br />
font-style: italic;<br />
height: 30px;<br />
margin-top: -2px;<br />
padding-left: 2px;<br />
vertical-align: top;<br />
width: 227px;<br />
}<br />
form#helperblogger-emailform #sbutton {<br />
background: transparent;<br />
border: none;<br />
cursor: pointer;<br />
height: 30px;<br />
padding-right: 45px;<br />
}</style><br />
<div id="helperblogger-emailbox"><br />
<form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"<br />
method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<b style="color: black;"><span style="color: blue;">mybloggingtips</span></b>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br />
<input type="hidden" value="<b style="color: black;"><span style="color: blue;">mybloggingtips</span></b>" name="uri" /><br />
<input type="text" id="s" name="email" value="Enter Your E-Mail Here"<br />
onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'<br />
onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'<br />
/><br />
<input type="hidden" name="loc" value="en_US" /><br />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"<br />
/><br />
</form><br />
</div></blockquote>
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="color: #eeeeee;"> Customization</span></h3>
Just change the <b><span style="color: blue;">Blue</span></b> color text with your feed Id and you are done!. Please Like and Share it.<br />
<br /></div>

Decent Email Subscription Widgets For Blogger

Eye catching and fast loading email subscription widgets are compulsory part of for blogger. It not only gives an option to your...

Windows 8 Style Email Subscription Widget for Blogger With Social Count

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVYGC3oog936KsXZMJC9SenGa-i9v1FECERFTuEgRLoPwP37TGVpctdQ_7iIbyytHbtf626Wp1vThEU2dCHbRi0ltAclQCN1t6dxkzEq7p3uh_eRtOWGGu-17cuLdBRZsJMVk4ub_Z1NQ/s1600/2014-07-21_8-39-42.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVYGC3oog936KsXZMJC9SenGa-i9v1FECERFTuEgRLoPwP37TGVpctdQ_7iIbyytHbtf626Wp1vThEU2dCHbRi0ltAclQCN1t6dxkzEq7p3uh_eRtOWGGu-17cuLdBRZsJMVk4ub_Z1NQ/s1600/2014-07-21_8-39-42.png" width="640" /></a></div>
<br /></div>
<br />
<b>Recommended for you: <a href="http://www.mybloggingtips.com/2014/07/add-subscription-box-with-social-icons.html" target="_blank">Stylish Email Subscription Box for Blogger</a></b><br />
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> Tell Me How?</span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1Ma1aoVu2f2DVFoUGUamuyfc91QyqlveluwTgzDsgjLr8MkbeoHsq0g6Y8nwu_fzHUlIKKrvlp-U55SQvkX3_XcJiAjp0hFfRRgLsZDYwNib14PohDk7rV9-Yd0KHl2XyrOL3lM_1nk/s1600/2014-07-21_7-25-39.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1Ma1aoVu2f2DVFoUGUamuyfc91QyqlveluwTgzDsgjLr8MkbeoHsq0g6Y8nwu_fzHUlIKKrvlp-U55SQvkX3_XcJiAjp0hFfRRgLsZDYwNib14PohDk7rV9-Yd0KHl2XyrOL3lM_1nk/s1600/2014-07-21_7-25-39.png" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<ul>
<li>Go to your blogger account and select your blog.</li>
<li>Navigate to Template and make a backup of your blog.</li>
<li>Click on Edit html and find below code.</li>
</ul>
<div>
<blockquote class="tr_bq">
<span style="background-color: #cccccc; color: #333333; font-family: Oswald; line-height: 28px;"><div class='post-footer-line post-footer-line-1'></span></blockquote>
</div>
<div>
<ul>
<li>Now copy below code and paste it under above found code.</li>
</ul>
</div>
<blockquote class="tr_bq">
<span style="background-color: #cccccc;"><section class="technopcarea-newsletter"><br /><h2><br />Checking for new posts is time wasting,<br /></h2><br /><div id="form-technopcarea-newsletter"><br /><div class="technopcarea-social facebook"><br /><a href="https://www.facebook.com/<b><span style="color: blue;">blogsmasala</span></b>" target="_blank"><br /><img src="http://i.imgur.com/RbZgdq2.png" /><br /></a><a href=’http://www.<b><span style="color: blue;">mybloggingtips</span></b>.com/’><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgibdqMdU4gx3zkTJ5EHl8M8qVz8CVfvEcPCP_y_eMq17OsW1H-n6f4QFyt_oyapLkHIZHsiFW524WfyBgF3KWzQb3znN7EqIFL2UtElrWdoqGyAY21fz3ePII3nFOcbrWvHluGf6Cyrt4/s1600/1x1juice.png'/></a><br /><iframe allowtransparency="true" class="technopcarea-social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2F<b><span style="color: blue;">blogsmasala</span></b>&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;"><br /></iframe><br /></div><br /><div class="technopcarea-social twitter"><br /><a href="https://twitter.com/<span style="color: blue;"><b>mybloggingtips1</b></span>" target="_blank"><br /><img src="http://i.imgur.com/0A1kead.png" /><br /></a><br /><iframe allowtransparency="true" class="technopcarea-social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=TechnoPcArea&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button"><br /></iframe><br /><script><br />!function(d,s,id){<br />var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;<br />if(!d.getElementById(id)){<br />js=d.createElement(s);<br />js.id=id;<br />js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);<br /></script><br /></div><br /><div class="technopcarea-newsletter-form"><br /><fieldset><br /><h2><br />Get All Such Amazing Articals In Your Inbox.<br /></h2><br /><div class="fields"><br /><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: blue;"><b>mybloggingtips</b></span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><br /><input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." /><br /><input name="uri" type="hidden" value="<b><span style="color: blue;">mybloggingtips</span></b>" /><br /><input name="loc" type="hidden" value="en_US" /><br /><input class="subscribe" name="commit" type="submit" value="Subscribe" /><br /></form><br /></div><br /></fieldset><br /></div><br /></div><br /></section><br /><style><br />input { font-family: Open Sans; }<br />h2 {font-family: Open Sans; }<br />.technopcarea-newsletter{text-align:center;margin:20px 0;}<br />.technopcarea-newsletter .technopcarea-social.facebook{background:none repeat scroll 0 0 #3661A0}<br />.technopcarea-newsletter .technopcarea-social{padding-top:20%;width:20%;float:left;position:relative}<br />.technopcarea-newsletter #form-technopcarea-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}<br />.technopcarea-newsletter:before,.technopcarea-newsletter:after{content:&quot; &quot;;display:table}<br />.technopcarea-newsletter:after{clear:both}<br />.technopcarea-newsletter h2{color:#3B434D;font-family:Sniglet;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}<br />.technopcarea-newsletter .technopcarea-social.twitter{background:none repeat scroll 0 0 #00ACED}<br />.technopcarea-newsletter .technopcarea-social a{display:block;left:30%;position:absolute;top:20%;width:40%}<br />.technopcarea-newsletter .technopcarea-social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}<br />.technopcarea-newsletter .technopcarea-social a:hover img{transform:scale(1.1)}<br />.technopcarea-newsletter .technopcarea-social .technopcarea-social-box{bottom:20px;left:50%;position:absolute}<br />.technopcarea-newsletter .technopcarea-social .technopcarea-social-box.fb-like{margin-left:-45px}<br />.technopcarea-newsletter .technopcarea-social .technopcarea-social-box.twitter-follow-button{margin-left:-30px}<br />.technopcarea-newsletter .technopcarea-newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}<br />.technopcarea-newsletter .technopcarea-newsletter-form fieldset{height:37px;left:10%;position:absolute;top:10%;width:80%;border:none}<br />.technopcarea-newsletter .technopcarea-newsletter-form fieldset h2{color:#FFF;font-family:Sniglet;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}<br />.technopcarea-newsletter .technopcarea-newsletter-form fieldset .fields{position:relative}<br />.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}<br />.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:11px;transition:all ease 0.6s;}<br />.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}<br /></style><br /><script type="text/JavaScript"><br />fontsize = function () {<br />var abtSubs = $(".technopcarea-newsletter #form-technopcarea-newsletter").width() * 0.025; // 10% of container width<br />$(".technopcarea-newsletter .technopcarea-newsletter-form fieldset h2").css('font-size', abtSubs);<br />};<br />$(window).resize(fontsize);<br />$(document).ready(fontsize);<br /></script> </span></blockquote>
<div>
<ul>
<li>Save your template. </li>
</ul>
</div>
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> Customization</span></h3>
<ul>
<li>There are chances that you will find more than one instance of above (step 3) of code. Mostly it is 2nd one but check every code until it works for you.</li>
<li>Change the <span style="color: blue;"><b>Blue</b></span> color text with your facebook, twitter and feed burner Id.</li>
<li>You are Done!</li>
</ul>
<br /></div>

Windows 8 Style Email Subscription Widget for Blogger With Social Count

Recommended for you: Stylish Email Subscription Box for Blogger Tell Me How? Go to your blogger account and select your blog...

Email Subscription Widget For Blogger With Social Share Buttons

<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/AVvXsEi6Sju6E6Ay0IgXKHHLFKWRBaBY4cd9v_WNA5WoNCPzIpRAaAOoBpH6UmVacdmRDhvOMKVwuGVBcQmHlrlLNzzNnW7SmRrjqa3Gt8-3l7fg781QhJP140mIEfdlWwc1cxw-HJsHzwiZvpI/s1600/2014-07-21_7-32-55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Sju6E6Ay0IgXKHHLFKWRBaBY4cd9v_WNA5WoNCPzIpRAaAOoBpH6UmVacdmRDhvOMKVwuGVBcQmHlrlLNzzNnW7SmRrjqa3Gt8-3l7fg781QhJP140mIEfdlWwc1cxw-HJsHzwiZvpI/s1600/2014-07-21_7-32-55.png" width="640" /></a></div><div style="text-align: center;"><br />
</div>A simple and good looking blogger email subscription widget is here for you. It is fast loading and will not effect your page loading time and you can use it easily.<br />
<br />
<span style="font-size: large;"><b><a href="http://testblogsforme.blogspot.com/2014/06/facebook.html" target="_blank">Demo</a></b></span><br />
<br />
<b>Recommended for you: <a href="http://www.mybloggingtips.com/2014/07/add-subscription-box-with-social-icons.html" target="_blank">Stylish Email Subscription Box for Blogger</a></b><br />
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;"><span style="color: #eeeeee;"> Tell Me How?</span></h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1Ma1aoVu2f2DVFoUGUamuyfc91QyqlveluwTgzDsgjLr8MkbeoHsq0g6Y8nwu_fzHUlIKKrvlp-U55SQvkX3_XcJiAjp0hFfRRgLsZDYwNib14PohDk7rV9-Yd0KHl2XyrOL3lM_1nk/s1600/2014-07-21_7-25-39.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1Ma1aoVu2f2DVFoUGUamuyfc91QyqlveluwTgzDsgjLr8MkbeoHsq0g6Y8nwu_fzHUlIKKrvlp-U55SQvkX3_XcJiAjp0hFfRRgLsZDYwNib14PohDk7rV9-Yd0KHl2XyrOL3lM_1nk/s1600/2014-07-21_7-25-39.png" width="400" /></a></div><div style="text-align: center;"><br />
</div><ul style="text-align: left;"><li>Go to your blogger account and select your blog.</li>
<li>Navigate to Template and make a backup of your blog.</li>
<li>Click on Edit html and find below code.</li>
</ul><div><blockquote class="tr_bq"><span style="background-color: #cccccc; color: #333333; font-family: Oswald; line-height: 28px;"><div class='post-footer-line post-footer-line-1'></span></blockquote></div><div><ul style="text-align: left;"><li>Now copy below code and paste it under above found code.</li>
</ul><div><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br />
<div class='after-post bloggingehow'><br />
<div class='widget enews-widget' id='enews-ext-2'><br />
<div class='widget-wrap'><br />
<div class='enews'><br />
<h4 class='widgettitle'>Subscribe Us!</h4><br />
<p>Subscribe our daily newsletter for Free Updates</p><br />
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' name='Email Newsletter' onsubmit='window.open( &apos;http://feedburner.google.com/fb/a/mailverify?uri=<b><span style="color: blue;">mybloggingtips/nJeF</span></b>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><br />
<label class='screenread' for='subbox'>Enter your email address...</label><br />
  <input id='subbox' name='email' onblur='if ( this.value == &apos;&apos; ) { this.value = &apos;Enter your email address...&apos;; }' onfocus='if ( this.value == &apos;Enter your email address...&apos;) { this.value = &apos;&apos;; }' type='text' value='Enter your email address...'/><br />
  <input name='uri' type='hidden' value='<b><span style="color: blue;">mybloggingtips/nJeF</span></b>'/><br />
  <input name='loc' type='hidden' value='en_US'/><br />
  <input id='subbutton' type='submit' value='Get It'/><br />
</form><br />
</div><br />
</div><br />
</div><br />
<center><br />
  <span class='st_facebook_hcount' displayText='Facebook'/><br />
<span class='st_twitter_hcount' displayText='Tweet'/><br />
<span class='st_sharethis_hcount' displayText='ShareThis'/><br />
</center><br />
  <p style=' line-height:0px; font-size:5px; font-weight:bold; text-align:right;padding-top:0px;'><a class='beh-link-style' href='http://www.mybloggingtips.com'>Get this</a></p><br />
</div><br />
<style><br />
.beh-link-style  {text-decoration:none; color:#242424;}<br />
  .after-post {<br />
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYWrN8iuLFvGwPhqUHNLHxrN3GTrErAIrW3bn1UmBrNsXBQYeLleweLRjgqWur1lPch_1QJFAOdHXITPFQ5k6T-QWT86MYSKuQYbpktqtA3Qlf5yiyHCtIBw3LBW6lm_NOCywLKqP3pk/s1600/bg-pattern.png&quot;) repeat scroll 0 0 transparent;<br />
    border: medium double #DDDDDD;<br />
    clear: both;<br />
    color: #FFFFFF;<br />
    margin: 30px 0;<br />
    overflow: hidden;<br />
    padding: 25px;<br />
    text-shadow: 0 1px #111111;<br />
}<br />
.after-post p {<br />
    color: #FFFFFF;<br />
}<br />
.after-post form {<br />
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP1rb2A6s7R3Y2RURuwqzXdoUK1hM2Ctc4ivP2HFijiQTAfARFIY5ZhX3ih0YtGHnktLciSNG-Jn7NwG6FPm8MocH0-CRZnoMUMrPP_VFLsjKgBS6Vr_jM5OyjEm0Ze3bEpl6m_qLmF9Y/s1600/arrow.png&quot;) no-repeat scroll 40px 0 transparent;<br />
    display: block;<br />
    padding: 10px 0 10px 120px;<br />
}<br />
  .enews #subbox {<br />
    margin: 5px -7px 0 0;<br />
    padding: 9px 8px;<br />
    width: 70%;<br />
}<br />
<br />
 #subbox input[type=&quot;button&quot;], input[type=&quot;submit&quot;] {<br />
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPu9U_O6JpfueAUomy1W46sNVq5hXmza3jBxTUfDZF5G1F0U3QcntlMtK9tBYnbyaMl8eOueaZck54lpTfdAo-zjdNmuhkMkyrD4bTfFI41K8TsRqEc3zUjfzUJQ71axGfhUeHkpmGQk/s1600/gradient.png&quot;) repeat scroll 0 0 transparent;<br />
    border: 1px solid #ED702B;<br />
    color: #FFFFFF;<br />
    cursor: pointer;<br />
    line-height: 19px;<br />
    padding: 8px 10px;<br />
    text-decoration: none;<br />
}<br />
#subbox input[type=&quot;button&quot;]:hover, input[type=&quot;submit&quot;]:hover {<br />
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPu9U_O6JpfueAUomy1W46sNVq5hXmza3jBxTUfDZF5G1F0U3QcntlMtK9tBYnbyaMl8eOueaZck54lpTfdAo-zjdNmuhkMkyrD4bTfFI41K8TsRqEc3zUjfzUJQ71axGfhUeHkpmGQk/s1600/gradient.png&quot;) repeat scroll 0 -33px transparent;<br />
    text-decoration: none;<br />
}<br />
<br />
   .bloggingehow h4 {<br />
    font-size: 16px;<br />
   color: #DDDDDD;<br />
    font-size: 20px;<br />
    margin: 0 0 20px;<br />
    padding: 0;<br />
    text-shadow: 0 2px #111111;<br />
}<br />
</style><br />
 <script type='text/javascript'>var switchTo5x=false;</script><br />
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><br />
<script type='text/javascript'>stLight.options({publisher: &quot;ur-88a9f357-eb7f-69fe-f4c5-4fe18ad04bda&quot;, doNotHash: false, doNotCopy: false, hashAddressBar: false});</script><br />
</span></blockquote><ul style="text-align: left;"><li>Save your template. </li>
</ul></div></div><h3 style="background-color: teal; border: 3px solid silver; text-align: left;"><span style="color: #eeeeee;"> Customization</span></h3><ul style="text-align: left;"><li>There are chances that you will find more than one instance of above (step 3) of code. Mostly it is 2nd one but check every code until it works for you.</li>
<li>Change the <span style="color: blue;">Blue</span> color text with your feed burner Id.</li>
<li>If you don't want social Share buttons then remove block of code containing <center>...... </center></li>
<li>You are Done!</li>
</ul></div>

Email Subscription Widget For Blogger With Social Share Buttons

A simple and good looking blogger email subscription widget is here for you. It is fast loading and will not effect your page loading time ...

Stylish Popular Post Widget for 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/AVvXsEiiM6QbsVr-xyhP1lkyNL8Uni8I8wfYlUViPraNAh7-O15FtHdJklwAYPTU08JWAZxRWrMkMaTESHEJIlchQVjfJ3ujWrh3eGnFN0gNyksds9zfaB_P7cPMDNNr0Om7-L2mkDzhAMM7rKs/s1600/popular-posts-widget.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiM6QbsVr-xyhP1lkyNL8Uni8I8wfYlUViPraNAh7-O15FtHdJklwAYPTU08JWAZxRWrMkMaTESHEJIlchQVjfJ3ujWrh3eGnFN0gNyksds9zfaB_P7cPMDNNr0Om7-L2mkDzhAMM7rKs/s1600/popular-posts-widget.jpg" width="275" /></a></div>
<div style="text-align: center;">
<br /></div>
A blog without <a href="http://www.mybloggingtips.com/2014/07/colorful-popular-posts-widget-for.html" target="_blank">Popular Post Widget</a> is incomplete. Popular Posts Widget not only gives quick access to most viewed articles but also enhanced your blog overall look as well. So, I am going to share another popular post widget with you. Hope you will like it.<br />
<br />
<b>Recommended</b>: <a href="http://www.mybloggingtips.com/2014/07/auto-numbered-popular-posts-widget-for.html" target="_blank">Auto Numbered Popular Posts Widget For Blogger</a><br />
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="background-color: teal;"><span style="color: #eeeeee;"> How To ?</span></span></h3>
<ul style="text-align: left;">
<li>Go to your Blogger account and login.</li>
<li>Select your blog and then Select Template.</li>
<li>Make a backup of you template by clicking on upper right side of blog on following button</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DGpaHVfoP8pOFaE3dq8nZnVXMFPI4H1B4QGRcYI7dtXwvgN3mujX947Vl5OahfT5EVhqShgmqlpIoU2cVnBLKNKBVEwWb4ed5QW7HDAQ1X4y7LnzMDl7YrAFF5XI9-4uYdayXn6nkqM/s1600/2014-07-17_15-36-05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DGpaHVfoP8pOFaE3dq8nZnVXMFPI4H1B4QGRcYI7dtXwvgN3mujX947Vl5OahfT5EVhqShgmqlpIoU2cVnBLKNKBVEwWb4ed5QW7HDAQ1X4y7LnzMDl7YrAFF5XI9-4uYdayXn6nkqM/s1600/2014-07-17_15-36-05.png" width="320" /></a></div>
<ul style="text-align: left;">
<li> Now find below code:</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNh5g-J2kOWGU9CYcVm2uaV0EqCFui5kI2g9q3r9l4IdPcnVCDesEEezBhTkpO1W-Pr3k_KGZVdmtWyQZbLhWfstaaBi6DIn9WmsjGKqJsflTgf2OFYnEkrzK7WsMYVoJ8XwGD5iSWGo/s1600/2014-07-17_15-36-56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNh5g-J2kOWGU9CYcVm2uaV0EqCFui5kI2g9q3r9l4IdPcnVCDesEEezBhTkpO1W-Pr3k_KGZVdmtWyQZbLhWfstaaBi6DIn9WmsjGKqJsflTgf2OFYnEkrzK7WsMYVoJ8XwGD5iSWGo/s1600/2014-07-17_15-36-56.png" width="320" /></a></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<b style="color: #555555; line-height: 21px; text-align: justify;"><span style="background-color: #cccccc; font-family: Verdana, sans-serif;">]]></b:skin> or </b:skin></span></b></blockquote>
<br />
<ul style="text-align: left;">
<li>Paste the following code above it.</li>
</ul>
<blockquote class="tr_bq">
<span style="background-color: #cccccc;">/*Custom Popular Posts Widget Start*/ </span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li + li:after{content:"3"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child + li:after{content:"2"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li:first-child:after{content:"1"}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">#PopularPosts1 img {</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">border-radius:200px;</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">width:60px; height:60px;</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">margin-left:4px;</span></span><span style="background-color: #cccccc;"><span style="font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">}</span></span><span style="background-color: #cccccc;">/*Custom Popular Posts Widget Start*/ </span></blockquote>
<div>
<ul style="text-align: left;">
<li>Save your template and you are done.</li>
<li>If you already applied some custom Popular Post widget code then remove that</li>
<li>If you don't have any popular post widget on your blog then add one by going to </li>
<ul>
<li>Blogger account >> select your blog.</li>
<li>Move to Layout and click on Add a widget.</li>
<li>Select Html/Java widget.</li>
</ul>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjjkOkTYna2XtxD4OBgWmvmDNlJOqEBxIjZcDEiRIMKkcepo36cJ8yGHGf02EOljzRzh4siNJbJDLixEbHmL0VYQ2wIg9b6yLoxevV8ATxoVfeZ0CHNkUU0D5Ox7U1MG223rE-3ghpTY/s1600/2014-07-17_15-03-35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="562" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjjkOkTYna2XtxD4OBgWmvmDNlJOqEBxIjZcDEiRIMKkcepo36cJ8yGHGf02EOljzRzh4siNJbJDLixEbHmL0VYQ2wIg9b6yLoxevV8ATxoVfeZ0CHNkUU0D5Ox7U1MG223rE-3ghpTY/s1600/2014-07-17_15-03-35.png" width="640" /></a></div>
<div style="text-align: left;">
<b>You might like to check out</b>: <a href="http://www.mybloggingtips.com/2014/07/colorful-popular-posts-widget-for.html" target="_blank">Multi-Color Popular Posts Widget For Blogger</a></div>
<div>
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="color: #eeeeee;"> You Like It ??</span></h3>
If you like this widget then please share it your friends. Your comments and feedback is much appreciated.<br />
<br /></div>
</div>
</div>

Stylish Popular Post Widget for Blogger

A blog without Popular Post Widget is incomplete. Popular Posts Widget not only gives quick access to most viewed articles but also en...

Auto Numbered Popular Posts Widget for 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/AVvXsEgXNnBwrZOVFc1FcKQMnc4HYx0xMPwHKPE7ip9qOdAg7jWmz50Bk8eCXO7C7X1eL7c6T0KKXKGtJLh6PD8yTPa9FVRXtAGOq-7twHeDX2PgYEcAhw9VRrOWfVWDkZ4f5aB1DnOm36l2MNw/s1600/popular+posts+with+automatic+numbering+for+blogger+01_thumb%5B3%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="588" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNnBwrZOVFc1FcKQMnc4HYx0xMPwHKPE7ip9qOdAg7jWmz50Bk8eCXO7C7X1eL7c6T0KKXKGtJLh6PD8yTPa9FVRXtAGOq-7twHeDX2PgYEcAhw9VRrOWfVWDkZ4f5aB1DnOm36l2MNw/s1600/popular+posts+with+automatic+numbering+for+blogger+01_thumb%5B3%5D.png" width="640" /></a></div>
<br />
This is another simple and good looking popular posts widget for blogger. You can customize its bubble shape and text color. It will give a nice look to your blog. Hope you will like it.<br />
<br />
<b>Recommended</b>: <a href="http://www.mybloggingtips.com/2014/07/colorful-popular-posts-widget-for.html" target="_blank"><b>Multi-Color Popular Post Widget for Blogger</b></a><br />
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> How To ?</span></h3>
<ul>
<li>Go to your Blogger account and login.</li>
<li>Select your blog and then Select Template.</li>
<li>Make a backup of you template by clicking on upper right side of blog on following button</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DGpaHVfoP8pOFaE3dq8nZnVXMFPI4H1B4QGRcYI7dtXwvgN3mujX947Vl5OahfT5EVhqShgmqlpIoU2cVnBLKNKBVEwWb4ed5QW7HDAQ1X4y7LnzMDl7YrAFF5XI9-4uYdayXn6nkqM/s1600/2014-07-17_15-36-05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DGpaHVfoP8pOFaE3dq8nZnVXMFPI4H1B4QGRcYI7dtXwvgN3mujX947Vl5OahfT5EVhqShgmqlpIoU2cVnBLKNKBVEwWb4ed5QW7HDAQ1X4y7LnzMDl7YrAFF5XI9-4uYdayXn6nkqM/s1600/2014-07-17_15-36-05.png" width="320" /></a></div>
<ul>
<li> Now find below code:</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNh5g-J2kOWGU9CYcVm2uaV0EqCFui5kI2g9q3r9l4IdPcnVCDesEEezBhTkpO1W-Pr3k_KGZVdmtWyQZbLhWfstaaBi6DIn9WmsjGKqJsflTgf2OFYnEkrzK7WsMYVoJ8XwGD5iSWGo/s1600/2014-07-17_15-36-56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNh5g-J2kOWGU9CYcVm2uaV0EqCFui5kI2g9q3r9l4IdPcnVCDesEEezBhTkpO1W-Pr3k_KGZVdmtWyQZbLhWfstaaBi6DIn9WmsjGKqJsflTgf2OFYnEkrzK7WsMYVoJ8XwGD5iSWGo/s1600/2014-07-17_15-36-56.png" width="320" /></a></div>
<blockquote class="tr_bq" style="clear: both;">
<b style="color: #555555; line-height: 21px; text-align: justify;"><span style="background-color: #cccccc; font-family: Verdana, sans-serif;">]]></b:skin> or </b:skin></span></b></blockquote>
<br />
<ul>
<li>Paste the following code above it.</li>
</ul>
<div>
<blockquote class="tr_bq" style="font-family: 'Courier New', Courier, monospace; line-height: 16px; text-align: justify;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace; line-height: 16px; text-align: justify;">/*Custom Popular Posts Widget Start*/ </span></span><span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace; line-height: 16px; text-align: justify;">.popular-posts ul { </span></span><span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace; line-height: 16px; text-align: justify;">padding-left: 0px; </span></span><span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace; line-height: 16px; text-align: justify;">counter-reset: popcount; </span></span><span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace; line-height: 16px; text-align: justify;">}</span></span><span style="background-color: #cccccc;">.popular-posts ul li:before { </span><span style="background-color: #cccccc;">list-style-type: none; </span><span style="background-color: #cccccc;">margin-right: 15px; </span><span style="background-color: #cccccc;">padding: 0.3em 0.6em; </span><span style="background-color: #cccccc;">counter-increment: popcount; </span><span style="background-color: #cccccc;">content: counter(popcount); </span><span style="background-color: #cccccc;">font-size: 16px; </span><span style="background-color: #cccccc;">background: <span style="color: blue;">#292D30</span>; </span><span style="background-color: #cccccc;">color: <span style="color: red;">#ffffff</span>; </span><span style="background-color: #cccccc;">position: relative; </span><span style="background-color: #cccccc;">font-weight: bold; </span><span style="background-color: #cccccc;">font-family: georgia; </span><span style="background-color: #cccccc;">float: left; </span><span style="background-color: #cccccc;">border: 2px solid #dddddd; </span><span style="background-color: #cccccc;"><span style="color: purple;">box-shadow: 1px 2px 9px #666666;</span> }</span><span style="background-color: #cccccc;">.popular-posts ul li { </span><span style="background-color: #cccccc;">border-bottom: 1px dashed #dddddd; </span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.popular-posts ul li:hover { </span><span style="background-color: #cccccc;">border-bottom: 1px dashed #696969; </span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.popular-posts ul li a { </span><span style="background-color: #cccccc;">text-decoration:none; color:#5A5F63; </span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">.popular-posts ul li a:hover { </span><span style="background-color: #cccccc;">text-decoration:none; </span><span style="background-color: #cccccc;">}</span><span style="background-color: #cccccc;">/*Custom Popular Posts Widget End*/ </span></blockquote>
<div style="font-family: 'Courier New', Courier, monospace; line-height: 16px; text-align: justify;">
</div>
<div style="font-family: 'Courier New', Courier, monospace; line-height: 16px; text-align: justify;">
<span style="background-color: #cccccc;"><br />
</span></div>
<div style="text-align: justify;">
</div>
<ul>
<li><span style="line-height: 16px;"><span style="font-family: Arial, Helvetica, sans-serif;">Save your template.</span></span></li>
</ul>
</div>
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> Customization</span></h3>
<ul style="text-align: left;">
<li>In Popular Post Widget, uncheck image thumbnail and snippet. </li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjjkOkTYna2XtxD4OBgWmvmDNlJOqEBxIjZcDEiRIMKkcepo36cJ8yGHGf02EOljzRzh4siNJbJDLixEbHmL0VYQ2wIg9b6yLoxevV8ATxoVfeZ0CHNkUU0D5Ox7U1MG223rE-3ghpTY/s1600/2014-07-17_15-03-35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjjkOkTYna2XtxD4OBgWmvmDNlJOqEBxIjZcDEiRIMKkcepo36cJ8yGHGf02EOljzRzh4siNJbJDLixEbHmL0VYQ2wIg9b6yLoxevV8ATxoVfeZ0CHNkUU0D5Ox7U1MG223rE-3ghpTY/s1600/2014-07-17_15-03-35.png" /></a></div>
<div>
<br /></div>
<ul style="text-align: left;">
<li>To change background color of Square Bubble, change <span style="color: blue;"><b>Blue</b></span> color code.</li>
<li>To change text color of Square Bubble, change <span style="color: red;"><b>Red</b></span> color code.</li>
<li>By default, shape of bubble is square. If you want to change it to circle then add below code just after <b><span style="color: purple;">Purple</span></b> color code:</li>
</ul>
<blockquote class="tr_bq">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 16px; text-align: justify;">border-radius:15px;</span></blockquote>
<h3 style="background-color: teal; border: 3px solid silver;">
<span style="color: #eeeeee;"> Like It ?</span></h3>
Please Share and like this post. </div>

Auto Numbered Popular Posts Widget for Blogger

This is another simple and good looking popular posts widget for blogger. You can customize its bubble shape and text color. It will giv...

Colorful Popular Posts Widget for 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/AVvXsEjBaHTJZ3-O8RU5gohiY7rx3y0t1nNXcWB0p4h3l1SpCJgpTlbYev5YqtTohOEhnrUiiqA5rdF6xF96hJwQTkKtOru2l-MyLYggdGS5_xcSCaxTJIW1fUe_CkzR9q60u19eKfkR0Bx6MSk/s1600/multi-color-popular-post-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBaHTJZ3-O8RU5gohiY7rx3y0t1nNXcWB0p4h3l1SpCJgpTlbYev5YqtTohOEhnrUiiqA5rdF6xF96hJwQTkKtOru2l-MyLYggdGS5_xcSCaxTJIW1fUe_CkzR9q60u19eKfkR0Bx6MSk/s1600/multi-color-popular-post-widget.png" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
Popular posts widget is an important widget for a blogger which shows most viewed post and also gives user a chance to see which contents are trending on the blog. By default, blogger gives a simple popular widget but you can customize it to get a more colorful and attractive widget. Today, I am going to share a Stylish popular widget with numbers.<br />
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="color: #eeeeee;"> How To ?</span></h3>
<ul style="text-align: left;">
<li>Go to your blogger account and select your blog.</li>
<li>Then go to template and click on Edit Html (must make a backup) </li>
<li>Now find following code:</li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">]]></b:skin></span></blockquote>
<br />
<ul style="text-align: left;">
<li>Paste the below code above it.</li>
</ul>
<blockquote class="tr_bq">
<span style="background-color: #cccccc;"><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">/* Custom Popular Post Widget Starts*/</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts ul,</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts li, </span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts li img,</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts li a,</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts li a img {</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">margin:0 0;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">padding:0 0;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">list-style:none;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">border:none;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">background:none;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">outline:none;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts ul {</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">margin:.5em 0;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">list-style:none;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">color:black;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">counter-reset:num;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts ul li img {</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">display:block;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">margin:0 .5em 0 0;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">width:50px;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">height:50px;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">float:left;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts ul li {</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">background-color:#eee;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">margin:0 10% .4em 0 !important;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">padding:.5em 1.5em .5em .5em !important;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">counter-increment:num;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">position:relative;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts ul li:before,</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts ul li .item-title a, .PopularPosts ul li a {</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">font-weight:bold;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">color:#000 !important;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">text-decoration:none;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts ul li:before {</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">content:counter(num) !important;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">display:block;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">position:absolute;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">background-color:#333;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">color:#fff !important;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">width:22px;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">height:22px;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">line-height:22px;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">text-align:center;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">top:0px;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">right:0px;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">padding-right:0px !important;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">/* Set color and level */</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}</span><span style="border: 0px; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts .item-thumbnail {</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">margin:0 0 0 0;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.PopularPosts .item-snippet {</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">font-size:11px;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">}</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">.profile-img{</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">display:inline;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">opaciry:10;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">margin:0 6px 3px 0;</span><span style="font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;">/* Custom Popular Post Widget Ends*/</span></span></blockquote>
<br />
<ul style="text-align: left;">
<li>Save the template.</li>
<li> Now, if you have added Popular Widget already then skip this step, move to Layout and click Add a widget. Select 'Popular Widget'.</li>
</ul>
<div>
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="color: #eeeeee;"> Customization</span></h3>
</div>
<ul style="text-align: left;">
<li> You can customize the Popular Widget by showing image, snippet and increasing/decreasing number of posts to show.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZz4-s4nZq2gdpfAXk1SeYIhTbSEezRZYZssIS1FxYsdD1tBi2KSt0ZGcMpaISPsqR2WxJNcul_FYDiUodum37GohK_9yr3A1I88xyV2Z2AChfqbv9Br1K2VO4GTimIZSByy5oCqsd6i4/s1600/2014-07-17_15-03-35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZz4-s4nZq2gdpfAXk1SeYIhTbSEezRZYZssIS1FxYsdD1tBi2KSt0ZGcMpaISPsqR2WxJNcul_FYDiUodum37GohK_9yr3A1I88xyV2Z2AChfqbv9Br1K2VO4GTimIZSByy5oCqsd6i4/s1600/2014-07-17_15-03-35.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li>You can change background color and margin. find <span style="background-color: white; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19.200000762939453px;"><span style="color: blue;">background-color / margin-right </span>in above code and customize it. </span></li>
<li>Save after customization.</li>
</ul>
<h3 style="background-color: teal; border: 3px solid silver; text-align: left;">
<span style="color: #eeeeee;"> You Like It ?</span></h3>
You comments are like Oxygen to us. Please don't hesitate to give as must as you can. Like and share this post with your friends.<br />
<br /></div>

Colorful Popular Posts Widget for Blogger

Popular posts widget is an important widget for a blogger which shows most viewed post and also gives user a chance to see which conten...