Your Post My Blog: Cool Widgets

Animated Multi Colored Popular Post Widget V2 With Spinning Hover Effects For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="color: #cc0000;"><span style="font-size: large;">Animated Multi Colored Popular Post Widget V2 With Spinning Hover Effects For Blogger</span></span></div>
  <br />
<div class="separator" style="clear: both; text-align: right;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy385OZsCsvrb6rw5TXCIZoTF-8bFWujAF1JKbkruLrwyZd7wqicQwuch6xfjcfQGoBrbPUtu5YLApXJ0dZAV59nA5z1bNOHhzybWhhU1DBJeBCIZX0yCreevwcg1Y6LKctR7z-NmjFeaK/s1600/Animated-Multi-Colored-Popular-Post-Widget-V2.1-With-Spinning-Hover-Effects-For-Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy385OZsCsvrb6rw5TXCIZoTF-8bFWujAF1JKbkruLrwyZd7wqicQwuch6xfjcfQGoBrbPUtu5YLApXJ0dZAV59nA5z1bNOHhzybWhhU1DBJeBCIZX0yCreevwcg1Y6LKctR7z-NmjFeaK/s1600/Animated-Multi-Colored-Popular-Post-Widget-V2.1-With-Spinning-Hover-Effects-For-Blogger.png" /></a></div>
<h2 class="post-title entry-title" itemprop="name">
</h2>
<div class="post-header">
</div>
<div class="post-body entry-content" id="post-body-3834336667847914266" itemprop="description articleBody">
<div dir="ltr" style="text-align: left;">
Recently we shared  Multi Colored Popular Post Widget  V1 with you. Lots of our readers  found this great widget. Now i have update this widget by making the  images round, adding the hover effects to the images and make the  installation simple. Now this tutorial will show you How to add  Different/Multi Colored Popular Post Widget With Hover Effect To  Blogger. </div>
<div dir="ltr" style="text-align: left;">
<br /></div>
<div dir="ltr" style="text-align: left;">
<h4 style="text-align: left;">
Animated Preview :</h4>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2KsFiPUGCZZWi8ZvNrZSfQOxnDfmwEKjobA37AtUqfyMceVxGEiM2N11Ci6KKaeksGwNI7lsyEt_P7jukI_6iUA22pBxWBHlQGFFP-iiEqxqVnDWKihSUC6a0DeeBUWbX4diCmEvhq6M/s1600/Multi-Colored-Popular-Post-Widget-V2.1-With-Spinning-Hover-Effects-For-Blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2KsFiPUGCZZWi8ZvNrZSfQOxnDfmwEKjobA37AtUqfyMceVxGEiM2N11Ci6KKaeksGwNI7lsyEt_P7jukI_6iUA22pBxWBHlQGFFP-iiEqxqVnDWKihSUC6a0DeeBUWbX4diCmEvhq6M/s1600/Multi-Colored-Popular-Post-Widget-V2.1-With-Spinning-Hover-Effects-For-Blogger.gif" /></a></div>
</div>
</div>
<div dir="ltr" style="text-align: left;">
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
 How To Add Different/Multi Colored Popular Post Widget To Blogger</h4>
<ul style="text-align: left;">
<li>Go to <span style="color: red;">Blogger Dashboard</span><span style="color: #990000;"> </span></li>
<li>Click on <b>DropDown Menu</b> and select <b style="color: #274e13;">Template</b></li>
<li><b style="color: #4c1130;"><a href="http://www.mybloggertools.org/p/how-to-backup-or-download-blogger.html" target="_blank">Backup your Template</a></b> before making any changes to your blog</li>
<li>Now Click on <span style="color: purple;">Edit HTML</span> --> <span style="color: #990000;">Proceed</span><span style="color: purple;"><span style="color: black;"> --></span> </span> <input checked="checked" type="checkbox" /> Expand Widget Templates</li>
<li>Press <kbd>Ctrl</kbd> + <kbd>F</kbd> and search the code shown below</li>
</ul>
<br />
<div class="aps">
<span style="background-color: #cccccc;">]]></b:skin></span></div>
<br />
<ul style="text-align: left;">
<li>Now Paste the Code Shown Below just <b>above/before</b> it</li>
</ul>
<br />
<blockquote class="tr_bq">
<div class="aps">
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}<br />
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}<br />
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}<br />
#PopularPosts1 ul li:first-child:after{content:"1"}<br />
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}<br />
#PopularPosts1 ul li:first-child + li:after{content:"2"}<br />
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}<br />
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}<br />
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}<br />
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}<br />
#PopularPosts1 ul li:first-child:after,<br />
#PopularPosts1 ul li:first-child + li:after,<br />
#PopularPosts1 ul li:first-child + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +  li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}<br />
#PopularPosts1 ul li  .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}<br />
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}<br />
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}<br />
#PopularPosts3 img{<br />
    -moz-border-radius: 130px;<br />
    -webkit-border-radius: 130px;<br />
    border-radius: 130px;<br />
    -webkit-transition: all 0.3s ease;<br />
    -moz-transition: all 0.3s ease;<br />
    transition: all 0.3s ease;<br />
padding:4px;<br />
    border:1px solid #fff !important;<br />
    background: #F2F2F2;}#PopularPosts1 img:hover {<br />
    -moz-transform: scale(1.2) rotate(-560deg) ;<br />
    -webkit-transform: scale(1.2) rotate(-560deg) ;<br />
    -o-transform: scale(1.2) rotate(-560deg) ;<br />
    -ms-transform: scale(1.2) rotate(-560deg) ;<br />
    transform: scale(1.2) rotate(-560deg) ;<br />
}</div>
</blockquote>
<br />
<ul style="text-align: left;">
<li>Now save your template</li>
</ul>
<br />
<ul style="text-align: left;">
<li> Now Go to <span style="color: red;">Blogger Dashboard</span> --> <span style="color: blue;">Layout</span> --> <span style="color: purple;">Add a Gadget</span> --> <span style="color: #990000;">Popular Posts</span></li>
<li>Select "<span style="background-color: #4c1130; color: white;">display up to 9 posts</span>".</li>
<li>Now Save the widget</li>
</ul>
</div>
</div>
</div>

Animated Multi Colored Popular Post Widget V2 With Spinning Hover Effects For Blogger

Animated Multi Colored Popular Post Widget V2 With Spinning Hover Effects For Blogger Recently we shared Multi Colored Popula...

Fancy V2 Style Popular Posts Widget With Multi Color For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<div style="text-align: center;">
<span style="color: #cc0000;"><span style="font-size: large;">Fancy V2 Style Popular Posts Widget With Multi Color For Blogger </span></span></div>
<br />
<div style="text-align: center;">
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ZuWNyhfaG6MDhPHUrwalptraiFy0sMjxfFfR83zrATN9VC5fh3ZJY6TTyfIA4DLgbaEoi_SNmv_Dc-0pUzl7-UfSAz2Pntdud_xfyzNAOwAyqN95OauD4XeT0KkbjyLvFuUN2SWWo4QR/s1600/multicolored-popular-posts.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ZuWNyhfaG6MDhPHUrwalptraiFy0sMjxfFfR83zrATN9VC5fh3ZJY6TTyfIA4DLgbaEoi_SNmv_Dc-0pUzl7-UfSAz2Pntdud_xfyzNAOwAyqN95OauD4XeT0KkbjyLvFuUN2SWWo4QR/s1600/multicolored-popular-posts.png" /></a></div>
<br />
This is about Popular post widget. Actually earlier i posted about How To Add Multi-Color <br />
Popular Posts Widget For Blogger. So this is also same, But, this design is different, Its look Like round corners. You can add this effect with easily,You can try it.<br />
<br /></div>
<h4 style="text-align: left;">
How To Add Different/Multi Colored Popular Post Widget To Blogger</h4>
<ul style="text-align: left;">
<li>Go to <span style="color: red;">Blogger Dashboard</span><span style="color: #990000;"> </span></li>
<li>Click on <b>DropDown Menu</b> and select <b style="color: #274e13;">Template</b></li>
<li><b style="color: #4c1130;"><a href="http://www.mybloggertools.org/p/how-to-backup-or-download-blogger.html" target="_blank">Backup your Template</a></b> before making any changes to your blog</li>
<li>Now Click on <span style="color: purple;">Edit HTML</span> --> <span style="color: #990000;">Proceed</span><span style="color: purple;"><span style="color: black;"> --></span> </span> <input checked="checked" type="checkbox" /> Expand Widget Templates</li>
<li>Press <kbd>Ctrl</kbd> + <kbd>F</kbd> and search the code shown below</li>
</ul>
<div class="aps">
<span style="background-color: #cccccc;">]]></b:skin></span></div>
<ul style="text-align: left;">
<li>Now Paste the Code Shown Below just <b>above/before</b> it</li>
</ul>
<blockquote class="tr_bq">
<br />
<div class="aps">
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}<br />
#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 40px 0px 0px;  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;}<br />
#PopularPosts1 ul li  .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}<br />
#PopularPosts1 ul li:first-child:after,<br />
#PopularPosts1 ul li:first-child + li:after,<br />
#PopularPosts1 ul li:first-child + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,<br />
#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}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}<br />
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}<br />
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}<br />
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}<br />
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}<br />
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}<br />
#PopularPosts1 ul li:first-child + li:after{content:"2"}<br />
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}<br />
#PopularPosts1 ul li:first-child:after{content:"1"}<br />
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}<br />
#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}</div>
</blockquote>
<br />
<ul style="text-align: left;">
<li>Now save your template</li>
<li> Now Go to <span style="color: red;">Blogger Dashboard</span> --> <span style="color: blue;">Layout</span> --> <span style="color: purple;">Add a Gadget</span> --> <span style="color: #990000;">Popular Posts</span></li>
<li>Select "<span style="background-color: #4c1130; color: white;">display up to 9 posts</span>" and uncheck <span style="background-color: #4c1130; color: white;">image thumbnail</span> and <span style="background-color: #4c1130; color: white;">snippet</span></li>
<li>Now Save the widget </li>
</ul>
</div>

Fancy V2 Style Popular Posts Widget With Multi Color For Blogger

Fancy V2 Style Popular Posts Widget With Multi Color For Blogger This is about Popular post widget. Actually earlier i posted abo...

Add A Reflection Effect To The Images In Blogger Posts

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="color: #cc0000;"><span style="font-size: large;">Add A Reflection Effect To The Images In Blogger Posts </span></span></div>
<br />
<div style="text-align: center;">
<img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUUHIAtfSKBdEAgjgCcBW8RPmRfEta7eU97V7zR_3hzp7rA4FmTxrtuY1y7GZ8Nx7zrfK-9z-8B9A04niHsL1l6GoH3WooUdJE5Nlc-DL3ddPFE2GnFBXiNfTG54zNGpQX2bsS0oklhQgJ/s400/reflection-effect-to-images.png" class="decoded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUUHIAtfSKBdEAgjgCcBW8RPmRfEta7eU97V7zR_3hzp7rA4FmTxrtuY1y7GZ8Nx7zrfK-9z-8B9A04niHsL1l6GoH3WooUdJE5Nlc-DL3ddPFE2GnFBXiNfTG54zNGpQX2bsS0oklhQgJ/s400/reflection-effect-to-images.png" /></div>
<br />
<br />
Every bloggers desire is to make their blog more different from others.  Someone likes to make their blog more professionally in looks and try to  make their blog post more beautiful with images. Now Its time to know  about adding reflection effect to your blog post images using simple  tricks. Its absolutely awesome because you never wanna depend on other  Image editing software as well as Online image editors. Reflection hack  gives a nice reflection effect to the images. Reflection effect is made  by using java script. Reflection Effect is shown only at the bottom of  the image. Before we dive into the code, take a look at the demo image  shown below to get an idea of what we are going to build here.<br />
<br />
<br />
<h4 style="text-align: left;">
Reflection Effect To The Images In Blogger Posts Demo</h4>
<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6gWAT9t5GUnxCalhh99RVEAyYljt0FXZLE12NmcgbGpUmh84v-1V35-McxqWdZRHCpWRFh0r4KIz3LS0WPbbv2RlWJg2tN6RjflG9K84hZ3FyfcZwkeaiMvwItbJ7hHZ82L5L7VDCbSa/s1600/relection-effect.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6gWAT9t5GUnxCalhh99RVEAyYljt0FXZLE12NmcgbGpUmh84v-1V35-McxqWdZRHCpWRFh0r4KIz3LS0WPbbv2RlWJg2tN6RjflG9K84hZ3FyfcZwkeaiMvwItbJ7hHZ82L5L7VDCbSa/s400/relection-effect.png" width="354" /></a></div>
<br /></div>
<div>
<h4 style="text-align: left;">
How To Add A Reflection Effect To The Images In Blogger Posts</h4>
<ul style="text-align: left;">
<li>Go to <span style="color: red;">Blogger Dashboard</span><span style="color: #990000;"> </span></li>
<li>Click on <b>DropDown Menu</b> and select <b style="color: #274e13;">Template</b></li>
<li><b style="color: #4c1130;"><a href="http://www.mybloggertools.org/p/how-to-backup-or-download-blogger.html" target="_blank">Backup your Template</a></b> before making any changes to your blog</li>
<li>Now Click on <span style="color: purple;">Edit HTML</span> --> <span style="color: #990000;">Proceed</span><span style="color: purple;"><span style="color: black;"> --></span> </span> <input checked="checked" type="checkbox" /> Expand Widget Templates</li>
<li>Press <kbd>Ctrl</kbd> + <kbd>F</kbd> and search the code shown below</li>
</ul>
<span style="background-color: #cccccc;"><span style="color: red; font-weight: bold;"></head></span></span><br />
<ul style="text-align: left;">
<li>Now Paste the Code Shown Below just <b>above/before</b> it</li>
</ul>
<blockquote class="tr_bq">
<div class="aps">
<script src='http://latest-hacks.googlecode.com/svn/gadgets/extras/reflection.js' type='text/javascript'/></div>
</blockquote>
<ul style="text-align: left;">
<li>Now save your template</li>
</ul>
<ul style="text-align: left;">
<li>Now when you upload an image to blogger post click on Edit HTML tab and add a <span style="background-color: #4c1130; color: white;">class="reflect"</span> attribute inside the image tag as shown below</li>
</ul>
<blockquote class="tr_bq">
<div class="aps">
<a  href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7AXAQU3B-XUsEo9V1bWOd2I6Tw3qHXSRCGqo465nGH5mtuQKLSazKPvg2pnbIUY72FvczvRCKLmyM9ubysJ365E3hHwaodCyeCPJ1qs32YZ1Xnn40psb9xIOeSDE8J_UtuVdRROQX9uk/s1600/reflection-effect-to-images.png"  imageanchor="1" style="clear: right; float: center; margin-bottom: 1em;  margin-left: 1em;"><img border="0" <span style="background-color: #4c1130; color: white;">class="reflect"</span>  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7AXAQU3B-XUsEo9V1bWOd2I6Tw3qHXSRCGqo465nGH5mtuQKLSazKPvg2pnbIUY72FvczvRCKLmyM9ubysJ365E3hHwaodCyeCPJ1qs32YZ1Xnn40psb9xIOeSDE8J_UtuVdRROQX9uk/s1600/reflection-effect-to-images.png"  /></a></div>
</blockquote>
<div class="aps">
</div>
<div class="aps">
 Done...</div>
<div class="aps">
 </div>
</div>
</div>

Add A Reflection Effect To The Images In Blogger Posts

Add A Reflection Effect To The Images In Blogger Posts Every bloggers desire is to make their blog more different from others. Som...

Stylish Animated 3D Social Media Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="color: #cc0000;"><span style="font-size: large;">Stylish Animated 3D Social Media Widget (With Mouse Hover Rotating Effect) For Blogger</span></span></div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsJVRJzjMqfKZ4O7GYWyE8nQsKcU0eucxJjFDMRjETlu_bBTXsJJhPDIrtfsr0FBuIfQmroZ29H35G90F9YQt1oGHNnAs3EXi_7oIawsOANoU2pAwvq1mEwpsnDhpkJyYz0Siqo65l_Eh/s1600/Add-New-Animated-3d-social-icons-with-css-rotate.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsJVRJzjMqfKZ4O7GYWyE8nQsKcU0eucxJjFDMRjETlu_bBTXsJJhPDIrtfsr0FBuIfQmroZ29H35G90F9YQt1oGHNnAs3EXi_7oIawsOANoU2pAwvq1mEwpsnDhpkJyYz0Siqo65l_Eh/s1600/Add-New-Animated-3d-social-icons-with-css-rotate.png" /></a></div>
<br />
<span style="color: #ff8040;"><span style="color: black;">Friend, This is a social media widget, it  made with CSS coding.. It look like a 3D rectangle widget with mouse  hover spinning effect . It rotate 360 degree when we move mouse hover  this widget.Use this stylish widget and make your blog more stylish .If  you want to install this widget, Please follow this post and enjoy… </span></span><br />
<h4 style="text-align: left;">
Animated Preview :</h4>
<div style="text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #ff8040;"> </span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia_55lPv58fcF6GcvmvtuPeqzpCAHN8fjCr7VUEK5iKBYIey_fZZsZazz2Lx7WMjfvFlVrWHJmXbTiiPbcPatVL4L9Ittb0wSk9UDmpopmxGiThnG5eov1YMDnN2OPhtwVCREosiKarj6y/s1600/Adding-3D+Social-Icons-+With-Rotate-Spin-Effect-To.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia_55lPv58fcF6GcvmvtuPeqzpCAHN8fjCr7VUEK5iKBYIey_fZZsZazz2Lx7WMjfvFlVrWHJmXbTiiPbcPatVL4L9Ittb0wSk9UDmpopmxGiThnG5eov1YMDnN2OPhtwVCREosiKarj6y/s320/Adding-3D+Social-Icons-+With-Rotate-Spin-Effect-To.gif" width="320" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="text-align: left;">
3D V2 Social Media Widget Demo</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://s2freelab.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4BJPvWYMIF9e3kjVbOSKuMWWORpkTvGEnjAXRMJxght1cDaBCSalI3D_IKgSeuSR8X2XL5uiRhFhDmd9aIPjZTznhvzxJJ3NUWgksMqmzHfmHBaZO2Rnhf_WELpF7aaj4J9wU6K8s6ZW/s1600/demo-button-s2free.gif" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Log in to your <a href="http://www.blogger.com/"><b>Blogger</b></a><b> </b>account</div>
<ul>
<li>Select  <b>Layout</b></li>
<li>Click on<b> </b><b>Add a Gadget</b></li>
<li>Select <b>HTML/JavaScript</b> from the options listed</li>
<li>Copy and Paste the following code in <b>HTML/Javascript</b> box. </li>
</ul>
<blockquote class="tr_bq">
<span style="color: #ff8040;"> </span><style>  <br />
</*Blogger Industries Presents CSS 3D Icons Start*/>       <br />
#social  a:hover {background-color: transparent;opacity:0.7;} #social img {  -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s  ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all  0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover {  -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg);  -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform:  rotate(360deg); }       <br />
<*Blogger Industries Presents CSS 3D Icons End*/>       <br />
</style><br />
<br />
<div id="social"><br />
<br />
 <a href="http://feeds.feedburner.com/<b><span style="color: red;">YOUR-FEED-URL-HERE</span></b>"  target="_blank" title="Grab Our Rss Feed"><img alt="Icon"  border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaHu1rhu-nsIuTKbOocv-_3Pi666jb3ZaOOl6xmHz-VFDUjdw6A7m8ohEhTyPFon-ptmcoSiAa3FnNCI24U9OWzXOvmmCmlqbJ5KFecEOJLUoLDXdyOUZZJxbOoNuIKR7sP9hanOyB7S5Y/s1600/RSS-48x48.png"  style="margin-right: 1px;" /></a>  <a href="http://www.<b><span style="color: red;">YOUR-EMAIL-RSS-URL-HERE</span></b>/"  rel="nofollow" target="_blank" title="Get Free Updates Via  Email"><img alt="Icon" border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3V3W2hPIReW1eMAriwlWNzEKtSjR0gZnYbEnsOLtfBNhYTk1eBOhodrLR1v5_3YQh7BiWGzpm87MzAAG3yr4sshgL_fxbRDQi1e31a5RJqUOPA5cW9mMfshOLwwbQSl7jSwo1w-U7aM1l/s1600/RSS-EMAIL-48x48.png"  style="margin-right: 1px;" /></a>  <a href="http://www.facebook.com/<span style="color: red;"><b>YOUR-FACEBOOK-PAGE-URL-HERE</b></span>"  rel="nofollow" target="_blank" title="Like Our Facebook  Page"><img alt="Icon" border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ91-GfdIv09dsOtid8CO9a_bSnLTcffjOozpFDgZAf6IZnjXeNof1nJFl_nw_WSWeJAoR8zaU5pFXWyMP18fpRp9XavqvA0omHCdYyVXz992ya1nxl-UiawkIAdzbdS3cckp4XSIIuhYC/s1600/FACEBOOK-48x48.png"  style="margin-right: 1px;" /></a>  <a href="http://www.twitter.com/<span style="color: red;"><b>YOUR-TWITTER-URL-HERE</b></span>"  rel="nofollow" target="_blank" title="Follow Our Updates On  Twitter"><img alt="Icon" border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_Nr3nDdyF7dZ66WovoZMIk8pYMxVgFaHNOtEhGu5wn-AIaqnF0Yv4-TqXvgt-EcHw-KV09rrTva7SnglSwna0XlbArBgZJg2xfqpCopKYK9rP9UKcALNPEZPl2GSrgWK5BFD3MZ9HW9D/s1600/TWITTER-48x48.png"  style="margin-right: 1px;" /></a>  <a  href="https://plus.google.com/YOUR-GOOGLE-PLUS-URL-HERE" rel="nofollow"  target="_blank" title="Follow Us On Google+"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv4VIkhShY7CBr5XIbC015w7Bkq383Ntfat9fg52SshPmTZZZvG-SCF4gxK0qNpzhjaFngCQtZ-i0dnvSrVvD84jkDXid2QjJp8PYj7UorVLELBCJ_aSWPcos01BkBCDWGNgmWlIlnln2K/s1600/GOOGLE-PLUS-48x48.png"  style="margin-right: 1px;" /></a>  <a href="http://pinterest.com/<span style="color: red;"><b>YOUR-PINTEREST-URL-HERE</b></span>"  rel="nofollow" target="_blank" title="Follow Our Pins"><img  alt="Follow Me on Pinterest"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZ9ATI3fZwkhuA_LJBd-jaWovnVPf6nrMmx7Q2PqmJK6S6KznTebIV6qkZXaHj94XoToav74qafKRQyI4D-kh_IgYntFHXee-4alayPa_3LXE-uVRGHZ0bF_0tuui_ehFvM4IoSq6baTW/s1600/PINTEREST-48x48.png"  style="margin-right: 1px;" /></a>  </div><br />
<br />
 <a href="http://feeds.feedburner.com/<b><span style="color: red;">YOUR-FEEDBURNER-URL-HERE</span></b>"  target="_blank"><img alt="spice up your blog"  src="http://feeds.feedburner.com/~fc/dulshan?bg=ff9933&amp;fg=000000&amp;anim=1"  style="border: 0;" /></a><br />
<!--End Feed Count Button—></blockquote>
<br />
<br />
<span style="color: #ff8040;">Change all <b><span style="color: red;">RED</span></b> color with your  Social media links.</span><br />
<ul>
<li>Save It. </li>
</ul>
</div>

Stylish Animated 3D Social Media Widget For Blogger

Stylish Animated 3D Social Media Widget (With Mouse Hover Rotating Effect) For Blogger Friend, This is a social media widget, it made...

Most Popular Post Slider/Image Gallery V2 For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="color: #cc0000;"><span style="font-size: large;">Add Popular Post Slider/Image Gallery In Blogger </span></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLpL3l5hNOfXGC4t1vQyCdf7k2-Ag642etYN1dcu2Q0FoiB-to1H1wvhW-qypiSzl__KgUprxapS8P5UfOeMvVrbAbwnGMBhG2g8_AHBZQ8-isMtY0AH6iz5xEFqIrUvJkLI6fqA6IxUSt/s1600/Add-Popular+Post-animated-Slider-Image-Gallery-In+Blogger+.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLpL3l5hNOfXGC4t1vQyCdf7k2-Ag642etYN1dcu2Q0FoiB-to1H1wvhW-qypiSzl__KgUprxapS8P5UfOeMvVrbAbwnGMBhG2g8_AHBZQ8-isMtY0AH6iz5xEFqIrUvJkLI6fqA6IxUSt/s320/Add-Popular+Post-animated-Slider-Image-Gallery-In+Blogger+.gif" width="320" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8RCHa4ntqGMXVfATbKwJArkAVvsdse2S5uojbztGLUzD4znb48vIKaSxfPVmHFtrQHfg64ASaJ9BEkjZQcBgfqw-MT5WeVcwV-R8tvT5uzmcySd7oM6TGWTzN3BQXQI1qloBTwwucs2D/s1600/popular-posts.png" style="margin-left: 1em; margin-right: 1em;"></a> </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
You might have seen so many sliders or crousels that works on the recent  posts or you have to add images in it manually. In this tutorial i will  give you the slider/image gallery that works on the popular posts. This  widget shows your 10 popular posts images in form of slider. This slider  is made by <a href="http://www.dynamicdrive.com/" rel="nofollow" target="_blank">dynamicdrive.com</a> and i make some changes to make it popular post slider<br />
<br />
<br />
<br />
<h4 style="text-align: left;">
Animated Preview :</h4>
<div style="text-align: left;">
Also See : <a href="http://s2free.blogspot.com/2013/05/record-any-web-screen-as-video-convert.html" target="_blank">How to Create Animated GIF Like Previewing Below</a>..</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLpL3l5hNOfXGC4t1vQyCdf7k2-Ag642etYN1dcu2Q0FoiB-to1H1wvhW-qypiSzl__KgUprxapS8P5UfOeMvVrbAbwnGMBhG2g8_AHBZQ8-isMtY0AH6iz5xEFqIrUvJkLI6fqA6IxUSt/s1600/Add-Popular+Post-animated-Slider-Image-Gallery-In+Blogger+.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLpL3l5hNOfXGC4t1vQyCdf7k2-Ag642etYN1dcu2Q0FoiB-to1H1wvhW-qypiSzl__KgUprxapS8P5UfOeMvVrbAbwnGMBhG2g8_AHBZQ8-isMtY0AH6iz5xEFqIrUvJkLI6fqA6IxUSt/s320/Add-Popular+Post-animated-Slider-Image-Gallery-In+Blogger+.gif" width="320" /></a></div>
</div>
<br />
<h4 style="text-align: left;">
How To Add Popular Post Slider/Image Gallery To Blogger</h4>
<ul style="text-align: left;">
<li>Go to <span style="color: red;">Blogger Dashboard</span><span style="color: #990000;"> </span></li>
<li>Click on <b>DropDown Menu</b> and select <b style="color: #274e13;">Template</b></li>
<li><b style="color: #4c1130;"><a href="http://www.mybloggertools.org/p/how-to-backup-or-download-blogger.html" target="_blank">Backup your Template</a></b> before making any changes to your blog</li>
<li>Now Click on <span style="color: purple;">Edit HTML</span> --> <span style="color: #990000;">Proceed</span><span style="color: purple;"><span style="color: black;"> --></span> </span> <input checked="checked" type="checkbox" /> Expand Widget Templates</li>
<li>Press <kbd>Ctrl</kbd> + <kbd>F</kbd> and search the code shown below</li>
</ul>
<div class="aps">
<span style="background-color: #cccccc;"><span style="color: red; font-weight: bold;"></head></span></span></div>
<ul style="text-align: left;">
<li>Now Paste the Code shown below just <b>before/above</b> it</li>
</ul>
<blockquote class="tr_bq">
<div class="aps">
<style type="text/css"><br />
#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}<br />
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}<br />
#gallery  .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9blg_RQTrDqOczV_RRAZvqHzscLVyQyclvlTJD-iEkX-tdslNP8IPNGt2XAbVu9dcUWDLvTKqwLy57Sd3IGYLUUYQVqsMk8aYiWIHbpWmZGto4Lx1iFTu5x7xiQhTsKStx78LSwpp3E/s1600/bg-slider.png)  bottom center no-repeat;overflow:hidden}<br />
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}<br />
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}<br />
</style> <br />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br />
<script src='http://latest-hacks.googlecode.com/svn/gadgets/popularposts/popular-posts.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
stepcarousel.setup({<br />
galleryid: "gallery",<br />
beltclass: "belt",<br />
panelclass: "panel",<br />
autostep: {enable:true, moveby:1, pause:3000},<br />
panelbehavior: {speed:500, wraparound:true, persist:true},<br />
defaultbuttons: {enable: true, moveby: 2, leftnav:  ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqvHSDsMm4zf55kWaaKwGMi3QbYBUF0C7LTtcc__u-fQRnlO6HFiuDygeFDhxpKLoPjN3FYuWzP1ZKYCmFPkS-Zy_DXk-9afFWj3d0v3y8KynPCnjX9auPjRcgkDm_fGfUUmnNtZJMn0/s1600/prev.png",  -40, 36], rightnav:  ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzr8KH30rS0eVDeUbyZQyFHP2CMt05PjrJFWZeGSHR82Q-_4Pdm99pPDEC-2dsLngNAyL3cGyEAYSTvcRqqNLF7SMW-Z3cQ83705sr3k6uGGTKRm4dm1-uDK8vswqpqUQaubw7iROxcGw/s1600/next.png",  2, 36]},<br />
contenttype: ["external"]<br />
})<br />
//]]><br />
</script> </div>
</blockquote>
<br />
<ul style="text-align: left;">
<li>Now Find the code shown below using [ctrl+F]</li>
</ul>
<blockquote class="tr_bq">
<div class="aps">
<span style="color: red; font-weight: bold;"><b:section class='sidebar' id='sidebar' preferred='yes'></span></div>
</blockquote>
<ul style="text-align: left;">
<li>Now Paste the Code Shown Below just <b>below/afte</b>r it</li>
</ul>
<blockquote class="tr_bq">
<div class="aps">
<b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'><br />
<b:includable id='main'><br />
<b style="background-color: #4c1130; color: white;"><b:if cond='data:blog.url == data:blog.homepageUrl'></b><br />
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'><br />
  <div id='gallery'><br />
   <ul class='belt'><br />
    <b:loop values='data:posts' var='post'><br />
     <li class='panel'><br />
      <b:if cond='data:showThumbnails == &quot;false&quot;'><br />
       <b:if cond='data:showSnippets == &quot;false&quot;'><br />
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a><br />
       <b:else/><br />
        <div class='item-title'><br />
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a><br />
        </div><br />
        <div class='item-snippet'><br />
         <data:post.snippet/><br />
        </div><br />
       </b:if><br />
      <b:else/><br />
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><br />
        <b:if cond='data:post.thumbnail'><br />
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/><br />
        <b:else/><br />
         <img alt='no image'   src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY1XQ8-oGn9-JgQOqblAq_XUyk9-FSNrgvATCDurwNcVLRTle4P6pxSk4f-ho6rSjWUKXHu30ak__YGI-fRT36OXXnL9NBqEx6GkH5oDOxke1IwJ4L4i8JZqvzCk_EFQqaN0wC1xFKAoI/s1600/defaultimage.jpg'/><br />
        </b:if><br />
       </a><br />
      </b:if><br />
     </li><br />
    </b:loop><br />
   </ul><br />
  </div></div><b style="background-color: #4c1130; color: white;"></b:if></b><br />
 </b:includable><br />
</b:widget></div>
</blockquote>
<br />
<ul style="text-align: left;">
<li>Now save your template</li>
</ul>
</div>

Most Popular Post Slider/Image Gallery V2 For Blogger

Add Popular Post Slider/Image Gallery In Blogger You might have seen so many sliders or crousels that works on the recent ...