ITGenius4u: blogger widget

<h2>
       Stylish Recent Post With Thumbnail </h2>
<div>
Today i come up with another cool blogger trick , it's about showing Stylish Recent Post With Thumbnail in Blogger. So, if u want to do the same thing with your Blogger Blog, You just need to add some simple Scripts in your Blog Layout..</div>
<h2>
Preview:</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AwGThjPo7CNU3hNtC403wZORXHDIo8gWHizWWaN8oG5vd04daaXdkSsb7QAuXoOGKMAuxwQAvQjApmp2XvH06qGK9OKAfO8_0sxmCrxwpgFStEiOaVk11CY-wckK8vPgLWtCnprGR1t_/s1600/rp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AwGThjPo7CNU3hNtC403wZORXHDIo8gWHizWWaN8oG5vd04daaXdkSsb7QAuXoOGKMAuxwQAvQjApmp2XvH06qGK9OKAfO8_0sxmCrxwpgFStEiOaVk11CY-wckK8vPgLWtCnprGR1t_/s1600/rp.jpg" width="400" /></a></div>
<h2>
How to Install this Widget on Blog?</h2>
<div>
<ol>
<li>Sign in to your Blog</li>
<li>Go to layout of your Blog</li>
<li>Select HTML/Java Script</li>
<li>Copy and paste the Below Script </li>
<li>And you done.</li>
</ol>
<h2>
Script:</h2>
</div>
<div>
 
<div>
<style type="text/css"></div>


 
<div>
/*<![CDATA[*/</div>


 
<div>
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}</div>


<div>
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}</div>

<div>
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}</div>
<div>
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}</div>
<div>
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}</div>
<div>
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}</div>
<div>
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}</div>
<div>
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}</div>
<div>
#mdjumplink a:hover{color:#888!important;text-decoration:none}</div>
<div>
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}</div>
<div>
#mdcomments:hover{background:#F4A557;text-decoration:none}</div>
<div>
/*]]>*/</div>
<div>
</style></div>
<div>
<script type='text/javascript'></div>
<div>
//<![CDATA[</div>
<div>
var numposts = 6;</div>
<div>
var showpostthumbnails = true;</div>
<div>
var displaymore = true;</div>
<div>
var displayseparator = true;</div>
<div>
var showcommentnum = true;</div>
<div>
var showpostdate = true;</div>
<div>
var showpostsummary = true;</div>
<div>
var numchars = 80;</div>
<div>
//]]></div>
<div>
</script></div>
<div>
<script type="text/javascript" src="http://makingdifferent.github.com/blogger-widgets/Recent-posts%5Bwww.makingdifferent.com%5D.js"></script></div>
<div>
<script type="text/javascript" src="http://www.itgenius4u.blogspot.com/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>
<div>
 </div>
<h2>
Note:</h2>
<div>
replace your Blog URL with the Yellow mention Link.. 
 
                      Thanks for Visiting</div>
<div>
 </div>
</div>

Stylish Recent Post With Thumbnail ITGenius4u

Stylish Recent Post With Thumbnail Today i come up with another cool blogger trick , it's about showing Stylish Recent Post With Thumbnail in Blogger. So, if u want to do the same thing with …

<h2>
Facebook Pop Out Like Box With Smooth Jquery Hover Effect</h2>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6nNhgCIv6YplvlEiYSpnKmCFkV5bdkn-8FijjZVQ6HpLSlRi5uLDjMvZoMkgCXkhoPt96WXvFnxLKfF7HAeEnGbgJHmyIt-5eBfOt3B2odwy3mHSK2KjZJiaGGdt9JHeqy7cEkeoSwA2/s1600/facebook-popout-like-box.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Facebook Pop Out Like Box With Smooth Jquery Hover Effect" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6nNhgCIv6YplvlEiYSpnKmCFkV5bdkn-8FijjZVQ6HpLSlRi5uLDjMvZoMkgCXkhoPt96WXvFnxLKfF7HAeEnGbgJHmyIt-5eBfOt3B2odwy3mHSK2KjZJiaGGdt9JHeqy7cEkeoSwA2/s1600/facebook-popout-like-box.gif" title="Facebook Pop Out Like Box With Smooth Jquery Hover Effect" width="395" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Facebook Pop Out Like Box With Smooth Jquery Hover Effect</td></tr>
</tbody></table>
<div>
 </div>
This widget is Usage By Every Blogger widget, Firstly this Widget was Developed By ( Haris ) 
I just Re-share this Widget on my Blog.. 
<h2>
How Install This Widget On Blogger?</h2>
<div>
<ol>
<li>Click On Layout On the Left Side Of Your Blogger Dashboard.</li>
<li>Click Add a Gadget</li>
</ol>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh73uDoCOKvhDwgLPnlqpVcni_WbuzQ4hLTanysuvVS-8Oysieraw9HT9HT0lsL4yyN416pbP4Thk6qRLJrcQPxcNz976Pkh95WtIye4Q6ZWQ4clcCXmd1_-Gv2u-qWRLNKv0uqwK7vlQBn/s1600/Screenshot_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh73uDoCOKvhDwgLPnlqpVcni_WbuzQ4hLTanysuvVS-8Oysieraw9HT9HT0lsL4yyN416pbP4Thk6qRLJrcQPxcNz976Pkh95WtIye4Q6ZWQ4clcCXmd1_-Gv2u-qWRLNKv0uqwK7vlQBn/s1600/Screenshot_2.png" /></a></div>
</div>
<ol>
<li>Click on HTML/JavaScript</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOeyL2B1X2c14Cjvqhewt0mCn4svHmmfLrbQUeaSnxvelV3IcLKPP1EBR24k7kKjBrc1GKCEx9RppGp0Lw2G6nRxwp8RG1zVv5AcNMfgS-1de1xm05g_x2hMrFVh6PyOAADAQCHkCTpzog/s1600/Screenshot_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOeyL2B1X2c14Cjvqhewt0mCn4svHmmfLrbQUeaSnxvelV3IcLKPP1EBR24k7kKjBrc1GKCEx9RppGp0Lw2G6nRxwp8RG1zVv5AcNMfgS-1de1xm05g_x2hMrFVh6PyOAADAQCHkCTpzog/s1600/Screenshot_1.png" width="320" /></a></div>
<div>
 </div>
<ol>
<li>Copy The Script Given Below And Paste it</li>
<li>Do Nothing Just Change Your Facebook Name Instead Of ITGeniu4u in the Blu Color.</li>
</ol>
<div>
<pre class="prettyprint lang-html prettyprinted" style="-webkit-user-select: text; background-color: #333333; border: 1px solid rgb(136, 136, 136); line-height: 21px; max-height: 500px; overflow: auto; padding: 2px; width: 827px;"><script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><style type="text/css">.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXDh0pgZNoWrkcdtb1fmvQk3ZuVQMFgIqmg11cmMw9krO7ONkjqI9eypsPXBih1Q0AYDiWIapJame5t3CR_Qc81CaXhTvQ5Pdbpn-MSlgOeFquVByiLNHuLJmetGAPBvcEThYPHWi_lE3/s1600/md_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
 (function(md){
 md(document).ready(function(){
 var $dur = "medium"; // Duration of Animation
 md("#fbplikebox").css({left: -250, "top" : 100 })
 md("#fbplikebox").hover(function () {
 md(this).stop().animate({
 left: 0
 }, $dur);
 }, function () {
 md(this).stop().animate({
 left: -250
 }, $dur);
 });
 md("#fbplikebox").show();
 });
 })(jQuery);
/*]]>*/
</script>
<div class="mdfbplikebox">
<div id="fbplikebox" style="display:none;">
 <div class="fbplbadge"></div> 
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/ITGenius4u&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowTransparency="true"></iframe>
By <a href="http://www.makingdifferent.com/">Making DIfferent</a> / <a href="http://www.makingdifferent.com/add-static-facebook-pop-out-like-box-with-smooth-jquery-hover-effect/">+Get This!</a>

</div>
</div></pre>
</div>
</div>

Facebook Pop Out Like Box With Smooth Jquery Hover Effect ITGenius4u

Facebook Pop Out Like Box With Smooth Jquery Hover Effect Facebook Pop Out Like Box With Smooth Jquery Hover Effect This widget is Usage By Every Blogger widget, Firstly this Widget was Developed By …