ALL MOBILE DRIVERS: Animated Stuff

Click Spraying Subscription Round Buttons Widgets 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;">Click Spraying Subscription Round Buttons Widgets For Blogger</span></span></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZMWK3pCUoCfI-GgRXvHJ9xCXWXT3GchhlLcrHMZaf7jQG-3JKiPJ4Al9Qhlxgkkd4RX0K16LW9BrDVdooxt8Gz23GNhVhXC3Q-2Xwxo44heAFuIYdSZpCEq8wcGbzHxifGiXm5-tW06T/s1600/Click-Spraying-Animated-Subscription-Round-Buttons-widgets-for-Blogger.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZMWK3pCUoCfI-GgRXvHJ9xCXWXT3GchhlLcrHMZaf7jQG-3JKiPJ4Al9Qhlxgkkd4RX0K16LW9BrDVdooxt8Gz23GNhVhXC3Q-2Xwxo44heAFuIYdSZpCEq8wcGbzHxifGiXm5-tW06T/s1600/Click-Spraying-Animated-Subscription-Round-Buttons-widgets-for-Blogger.gif" /></a></div> Dear Bloggiyan!<br />In this post we are going to share a beautiful subscription widget for blogger, Its will show right bottom corner on your blog and maximum possibility is this that user will click it due to its spraying animated effect .This animated subscription buttons created by <a href="http://www.redeyeoperations.com/" target="_blank">Redeyeoperations</a><br /><br /><div class="testbutton" style="text-align: center;"><a class="hupt" href="http://s2freelab.blogspot.com/" target="_blank">Live Demo </a></div><br /><h4 style="text-align: left;">How To Add Animated Spraying Subscription Button To Your Blog.</h4> <span style="font-size: large;"><b>Step 1</b></span><br /><ul style="text-align: left;"><li>Go to blogger dashboard</li><li>Go to <b>Template</b>-><b>Edit HTML</b></li><li>Now Search <span style="background-color: yellow;"><b><head></b></span></li><li>Now Copy the below code and paste it after <b style="background-color: yellow;"><head></b> code</li></ul><br /><div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/></div><br /><br /><span style="font-size: large;"> Step 2</span><br /><span style="font-size: large;"></span><br /><b>Copy the below code and paste it in <span style="color: blue;">Html/Javascript </span>of your blog.</b><br /><br /><div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;"><style type="text/css">#circle-mod{bottom: 0 !important;left: 5px  !important;position:  fixed;}#container-circle{position:relative;height:100px;width:100px}#base-button{background:-moz-linear-gradient(center  top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0  #6D0019;background:-webkit-linear-gradient(top,#a90329 0,#8f0222  44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222  44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222  44%,#6d0019 100%);background:linear-gradient(top,#a90329 0,#8f0222  44%,#6d0019 100%);border:4px solid #fff;text-decoration:  none;z-index:9999;cursor:pointer;border-radius:50px 50px 50px  50px;box-shadow:0 1px 3px rgba(0,0,0,0.5);color:#fff;font:68px  Arial;height:80px;left:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;left:15px;-webkit-transition:all  250ms;-moz-transition:all 250ms;-o-transition:all  250ms;-ms-transition:all 250ms;transition:all 250ms;box-shadow:0 1px 3px   rgba(0,0,0,.5)}#netoopsblog-fb.open{top:-125px;left:25px}#netoopsblog-fb.open.clicked{top:-135px;left:15px}#netoopsblog-tw.open{top:-105px;left:80px}#netoopsblog-gplus.open{top:-75px;left:125px}#netoopsblog-rss.open{top:-30px;left:160px}#netoopsblog-mail.open{left:175px;top:25px}.plus{-moz-user-select:  none;-moz-transition:all 200ms ease-in 0s;-webkit-transition:all 200ms  ease-in;-o-transition:all 200ms  ease-in}.rot{-moz-transform:rotate(137deg);-o-transform:rotate(137deg);-webkit-transform:rotate(137deg);transform:rotate(137deg)}</style><script  type="text/javascript">var  delay=40,delayTime;$(function(){btns=$(".btn");$("#base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var   b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var   b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a  href="http://netoopsblog.blogspot.com"  style="position:absolute;z-index:-11"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE9Cwp3FHTf5ixzXxnzB9ZQMTqKaQX5I3E-PiBJap6-6Aa-svsk96rAZXTezNoEt8EusLlAneIkS-SXoiPidp5YMMEFVW-JBbEx06hb9mHljN6nTLIC1tc34oZXLgdkz8U7TtZS0Meq5s/s1600/1x1juice.png"  /></a><div id="circle-mod"><div  id="container-circle"><a id="netoopsblog-fb" class="btn"  style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJlVtXOgE6RQIxncMJT09Xs2_t86I7Brvh2ZYqaquK5Y799oCWtG4kwzwkPlybD0afvbEc9d_NXtsZW9QXCUvL4N8X1OhltLIGD-_8vpu-7Nc_4HsTthlrh9aopZdpaOUmb-e6dCdbkMc/s1600/netoopsblog_share+buttons2.png)  repeat -1px 0" href="<b><span style="color: red;">http://www.facebook.com/warsi.log9</span></b>"  rel="nofollow" target="_blank"></a><a id="netoopsblog-tw"  class="btn"  style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJlVtXOgE6RQIxncMJT09Xs2_t86I7Brvh2ZYqaquK5Y799oCWtG4kwzwkPlybD0afvbEc9d_NXtsZW9QXCUvL4N8X1OhltLIGD-_8vpu-7Nc_4HsTthlrh9aopZdpaOUmb-e6dCdbkMc/s1600/netoopsblog_share+buttons2.png)  repeat -52px 0" href="<b><span style="color: red;">http://twitter.com/s2free</span></b>"  rel="nofollow" target="_blank"></a><a  id="netoopsblog-gplus" class="btn"  style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJlVtXOgE6RQIxncMJT09Xs2_t86I7Brvh2ZYqaquK5Y799oCWtG4kwzwkPlybD0afvbEc9d_NXtsZW9QXCUvL4N8X1OhltLIGD-_8vpu-7Nc_4HsTthlrh9aopZdpaOUmb-e6dCdbkMc/s1600/netoopsblog_share+buttons2.png)  repeat -157px 0" href="<b><span style="color: red;">https://plus.google.com/u/0/your id</span></b>"  rel="nofollow" target="_blank"></a><a id="netoopsblog-rss"  class="btn"  style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJlVtXOgE6RQIxncMJT09Xs2_t86I7Brvh2ZYqaquK5Y799oCWtG4kwzwkPlybD0afvbEc9d_NXtsZW9QXCUvL4N8X1OhltLIGD-_8vpu-7Nc_4HsTthlrh9aopZdpaOUmb-e6dCdbkMc/s1600/netoopsblog_share+buttons2.png)  repeat -105px 0" href="<b><span style="color: red;">http://feeds.feedburner.com/s2free</span></b>"  rel="nofollow" target="_blank"></a><a id="netoopsblog-mail"  class="btn"  style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJlVtXOgE6RQIxncMJT09Xs2_t86I7Brvh2ZYqaquK5Y799oCWtG4kwzwkPlybD0afvbEc9d_NXtsZW9QXCUvL4N8X1OhltLIGD-_8vpu-7Nc_4HsTthlrh9aopZdpaOUmb-e6dCdbkMc/s1600/netoopsblog_share+buttons2.png)  repeat -210px 0"  href="http://feedburner.google.com/fb/a/mailverify?uri=<b><span style="color: red;">s2free</span></b>"  rel="nofollow" target="_blank"></a><a  id="base-button"><span  class="plus">+</span></a></div></div><a  href="http://netoopsblog.blogspot.com" rel="dofollow"></a></div><br /><h4 style="text-align: left;"><b>Customization </b></h4><b>Now replace the highlighted <b><span style="color: red;">Red </span></b>color Link with your social media link.</b><br /><b>Done!<br /><b><span style="color: #38761d; font-size: medium;"><br /></span></b></b><br /><div style="text-align: center;"><b><b><span style="color: #38761d; font-size: medium;"> </span></b></b><b><span style="color: #6aa84f;"><span style="font-size: medium;">Post Your Comments And Ideas </span></span></b></div><div style="text-align: left;"></div><div style="text-align: left;"></div><div class="hreview">Click Spraying Subscription Round Buttons Widgets For Blogger<span class="item"><br /> </span> Last Reviewed by <span class="reviewer">S2Free Blog Team</span> on <span class="dtreviewed">June 10 2013<span class="value-title" title="June 10 2013"></span><br /> </span> Rating: <span class="rating">4.5</span></div></div>

Click Spraying Subscription Round Buttons Widgets For Blogger

Click Spraying Subscription Round Buttons Widgets For Blogger Dear Bloggiyan! In this post we are going to share a beautiful subscription w...

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span style="font-size: large;"><span style="color: #cc0000;">Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1</span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxE_NtrlyBDvzeyqjJ3HelUD5ZHnrgWoGya42pkEQysiJxjzYRqM9N5YxVIuwHyqnEfkpNncElZP9TMO7fsrfd556Ke5DuEMJo53OeHPjJycESIbADbk3nnIGAaf7Qih9soizv9Hkg1VuM/s1600/Animated-CSS3-Metro-UI-Drop-Down-Menu-With-Sliding-Tiles-Effect-v1.1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxE_NtrlyBDvzeyqjJ3HelUD5ZHnrgWoGya42pkEQysiJxjzYRqM9N5YxVIuwHyqnEfkpNncElZP9TMO7fsrfd556Ke5DuEMJo53OeHPjJycESIbADbk3nnIGAaf7Qih9soizv9Hkg1VuM/s320/Animated-CSS3-Metro-UI-Drop-Down-Menu-With-Sliding-Tiles-Effect-v1.1.PNG" width="305" /></a></div><div style="text-align: left;"><br /></div><div style="text-align: left;"></div><div style="text-align: left;">I have Posted My First Two Creation Using CSS3   Earlier In my Posts Before,, Those are</div><ol style="text-align: left;"><li> <a href="http://s2free.blogspot.com/2013/05/animated-metro-ui-social-profile-and.html" target="">Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger ..</a></li><li> <a href="http://s2free.blogspot.com/2013/05/simple-and-stylish-metro-ribbon-ui.html" target="_blank">Simple and Stylish Ribbon UI Social Profile Widget v1.0 by MJN For Blogger..</a></li></ol><div style="text-align: left;">So after Working on Those Two <a href="http://s2free.blogspot.com/search/label/Metro%20UI" target="_blank">Metro UI</a> and Ribbon UI Widgets today  I am Here With One More Metro UI Win 8 Style Drop Down Menu Using CSS3..  </div><div style="text-align: left;"><br /></div><div style="text-align: center;">Demo of Metro UI Drop Down Menu With Sliding Tiles Effect v1.1</div><div style="text-align: center;"></div><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/AVvXsEgeg62wF9XTW-Qg1YQr1-EEIexxWGOILgbuIbLnMUrPwLFvxn9XKgdFAreQMaRxMga2wziuZerIogUfyWXeKYi4vq1J8M2cIUBCL6QQfqliw6iUxkvWS98rhT0tBl5H1acaCbLBPmWpyERC/s1600/demo-button-s2free.gif" /></a></div>  <br />After Previewing Live Demo I think you are "Happy!!" to add it to your Blog or Site..<br /><div style="text-align: left;"><br /></div><h4 style="text-align: left;"> How to Add Metro UI Drop Down Menu With Sliding Effect Into Your Blog:<br /> </h4><ol style="text-align: left;"><li>First Go to <a href="http://www.blogger.com/home" target="_blank">"Blogger"</a> and Go to  your Blog Dashboard..</li><li>Now Click On "Layout" In Left Side of your Blog..</li><li>Now Click on "Add Gadget"..</li><li>You Will Get Many Widgets..Scroll Down to "HTML/JavaScript"..</li><li>Click On "HTML/JavaScript"..</li><li>Now Paste This Below Set of Code in it..</li></ol><blockquote class="tr_bq" style="text-align: left;"><div class="codebox"><style><br /><br />/* demo page styles */<br />.mjn-tab1<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFEvzo_pQaMr4SFCfPNWEJKayQ9cjmQKJEy2uZyZ8kF8JJLP8jC9XXAZjILj9UsIbpsm4ZR7rQ3Z-TDe0QXFFSFJcYam7U0Aq1yR41arGfgFfsXRHcjI9xpv8GFTwA5KfXY-7TKZaB1w/h120/home.png)  no-repeat center center #4d90fe;<br />}<br />.tab1:hover<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFEvzo_pQaMr4SFCfPNWEJKayQ9cjmQKJEy2uZyZ8kF8JJLP8jC9XXAZjILj9UsIbpsm4ZR7rQ3Z-TDe0QXFFSFJcYam7U0Aq1yR41arGfgFfsXRHcjI9xpv8GFTwA5KfXY-7TKZaB1w/h120/home.png)  no-repeat center center #3682FC;<br />}<br />.mjn-fb<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipySYk891GXg6ylmeLe-9iCYY-qXe3-D9f70_lkfRSvOYgtHsT35vBRZrm5QjPDNUf38w_NoBhrDu9cgdjIE-LvAL5iF8Wh5FuUMKRYS85FTPBeiCMkqkEjKqIT4Qpw1shPRtl0U29ELs/s1600/facebook2.png)  no-repeat center center #2A82D9;<br />}<br />.mjn-fb:hover<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipySYk891GXg6ylmeLe-9iCYY-qXe3-D9f70_lkfRSvOYgtHsT35vBRZrm5QjPDNUf38w_NoBhrDu9cgdjIE-LvAL5iF8Wh5FuUMKRYS85FTPBeiCMkqkEjKqIT4Qpw1shPRtl0U29ELs/s1600/facebook2.png)  no-repeat center center #1f69b3;<br />}<br />.mjn-tw<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E9AjPwOGuiprVhlvQAEVOqL0cKOEr2USmx1bX3iVl2t91GOah9jWvLoux258NXnIjHH8VHw-gei0A0JXpuH9ETzEhOu-J-DISppzvWSVZR3I7MourFkoyr2ZuFmbv1K2AAusQP7pErs/h120/twitter-bird-dark-bgs.png)   no-repeat center center #0CA8F0;<br />}<br />.mjn-tw:hover<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E9AjPwOGuiprVhlvQAEVOqL0cKOEr2USmx1bX3iVl2t91GOah9jWvLoux258NXnIjHH8VHw-gei0A0JXpuH9ETzEhOu-J-DISppzvWSVZR3I7MourFkoyr2ZuFmbv1K2AAusQP7pErs/h120/twitter-bird-dark-bgs.png)   no-repeat center center #43b3e5;<br />}<br />.mjn-g<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnHpfSae6pWVj1FfWnK62Q4xFCooUR4ZQB38WEcTIGIbqRL97C57M3TRC5768cP5IAgnsFdXhrU7V_oJDq6UTpDdJoZf6GxlfQYlQWJYhdAF3XIGaEe0IF5tr8nXMlyYBH3YAhoi8V94/s1600/google+plus2.png)  no-repeat center center #DC321E;<br />}<br />.mjn-g:hover<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnHpfSae6pWVj1FfWnK62Q4xFCooUR4ZQB38WEcTIGIbqRL97C57M3TRC5768cP5IAgnsFdXhrU7V_oJDq6UTpDdJoZf6GxlfQYlQWJYhdAF3XIGaEe0IF5tr8nXMlyYBH3YAhoi8V94/s1600/google+plus2.png)  no-repeat center center #c53727;<br />}<br />.mjn-rss<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bW8UkvyKfKiQcyoMwMHe7au9AINJyQdsScWRRic5O76s-BhvKAY3l6H2Bs0ZiPNYMN7xKuJ8mxTyxGEhJcxSc0eoMv3mtwm0LW-AWPbTz79namapF_QiaV4PdwJifOJbBJrCE9d8at0/s1600/feed2.png)  no-repeat center center #E9A01C;<br />}<br />.mjn-rss:hover<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bW8UkvyKfKiQcyoMwMHe7au9AINJyQdsScWRRic5O76s-BhvKAY3l6H2Bs0ZiPNYMN7xKuJ8mxTyxGEhJcxSc0eoMv3mtwm0LW-AWPbTz79namapF_QiaV4PdwJifOJbBJrCE9d8at0/s1600/feed2.png)  no-repeat center center #F9A914;<br />}<br />.mjn-tab2<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbGQblxp4PnBSDgEAxyKN_zvf0uGK04CR-FNncprk6DIkCNmXP5sfzi4Q4pzq_kCUOPzoZe6NE0cWk9ctwOJAZoDiTT578lcAAcqigQv4u68wjTv9zpF80tO2lmx-7J7XN7SrIxOBpGM/h120/Tag.png)  no-repeat center center #35aa47;<br />}<br />.mjn-tab2:hover{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbGQblxp4PnBSDgEAxyKN_zvf0uGK04CR-FNncprk6DIkCNmXP5sfzi4Q4pzq_kCUOPzoZe6NE0cWk9ctwOJAZoDiTT578lcAAcqigQv4u68wjTv9zpF80tO2lmx-7J7XN7SrIxOBpGM/h120/Tag.png)  no-repeat center center #1d943b;<br />}<br />.mjn-tab2sub<br />{<br />background: #35aa47;<br />}<br />.mjn-tab2sub:hover{<br />background: #1d943b;<br />}<br />.mjn-tab3<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzb_P0R2cK6_5OzUgeWBkpXNfeVj_ZgeedVscYdDxn1YJLtklWBk-nrKtHG56Dhyphenhyphenp83Eocvt3RhxD0EDyKUh4NwsUHpoIiszj4c__BX19uitvDGJQ-8DNHZ2izBFQQQYdOx7VVpKIUMl0/h120/archives.png)  no-repeat center center #852b99;<br />}<br />.mjn-tab3:hover<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzb_P0R2cK6_5OzUgeWBkpXNfeVj_ZgeedVscYdDxn1YJLtklWBk-nrKtHG56Dhyphenhyphenp83Eocvt3RhxD0EDyKUh4NwsUHpoIiszj4c__BX19uitvDGJQ-8DNHZ2izBFQQQYdOx7VVpKIUMl0/h120/archives.png)  no-repeat center center #6d1b81;<br />}<br />.mjn-tab3sub<br />{<br />background: #852b99;<br />height:70px;<br />}<br />.mjn-tab3sub:hover<br />{<br />background: #6d1b81;<br />}<br />.mjn-tab4<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc3V8qAVN2G4vBWrNUWj7IoMWbuT8Ps4w4mWH3y8l1o9iXcA75M5ch9LYW5o7byc4iJO_Zh-lXgNevwiEw5A7B6yPaQyRrvu4s_Dl_sJp0aoIxJhWYABg4OzJoyfEKLJlDss4o8PdC80/h120/contact.png)  no-repeat center center #d84a38;;<br />}<br />.mjn-tab4:hover{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc3V8qAVN2G4vBWrNUWj7IoMWbuT8Ps4w4mWH3y8l1o9iXcA75M5ch9LYW5o7byc4iJO_Zh-lXgNevwiEw5A7B6yPaQyRrvu4s_Dl_sJp0aoIxJhWYABg4OzJoyfEKLJlDss4o8PdC80/h120/contact.png)  no-repeat center center #c53727;<br />}<br />.mjn-tab4sub<br />{<br />background: #d84a38;;<br />}<br />.mjn-tab4sub:hover{<br />background: #c53727;<br />}<br />.mjn-tab5<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoKU8YoX-dKVWsAwti68WUe5n2ss2m-xdLFNGJWBsKfNilGlQ-MHGQJLRjJYG2INzScCGRqZhzqy4X0KeJGlyRDr0TU7nlpZyPucPgpDVHYQbDaK5isy5nR69ACtyGkFNzxlOcxrqeMw/h120/Menu.png)  no-repeat center center #555;<br />}<br />.mjn-tab5:hover<br />{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoKU8YoX-dKVWsAwti68WUe5n2ss2m-xdLFNGJWBsKfNilGlQ-MHGQJLRjJYG2INzScCGRqZhzqy4X0KeJGlyRDr0TU7nlpZyPucPgpDVHYQbDaK5isy5nR69ACtyGkFNzxlOcxrqeMw/h120/Menu.png)  no-repeat center center #222;<br />}<br /><br />body {<br />    background:none;<br />    margin:0;<br />    padding:0;<br />    font-family: Helvetica,Arial,sans-serif;<br />    font-size: 11px;<br />}<br />.mjn-metro-menu {<br />    position:relative;<br />    background:none;<br />    width:500px;<br />    height:90px;<br />    border:none;<br />    margin:20px auto;<br />    padding:20px;<br />float:left;<br />}<br /><br />/* navigation menu styles - main styles */<br />ul.navi {<br />    position:relative;<br />    z-index:100;<br />    padding:0;<br />    margin:0 0 0 60px;<br />    list-style:none;<br />    width:auto;<br />    height:30px;<br />}<br />ul.navi > li {<br />    width:70px;<br />    height:70px;<br />    position:absolute;<br />    left:0;<br />    top:0; <br />    -moz-transition: -moz-transform 0.5s ease-in-out;<br />    -ms-transition: -ms-transform 0.5s ease-in-out;<br />    -o-transition: -o-transform 0.5s ease-in-out;<br />    -webkit-transition: -webkit-transform 0.5s ease-in-out;<br />    transition: transform 0.5s ease-in-out;<br />}<br />ul.navi a {<br />    display:block;<br />    width:70px;<br />    height:70px;<br />    position:absolute;<br />    left:0;<br />    top:0;<br />    line-height:30px;<br />    text-align:center;<br />    text-decoration:none;<br />}<br />ul.navi a img {<br />    border:0;<br />}<br />ul.navi a span {<br />    position:relative;<br />    top:30%;<br />    font: 14px Segoe UI, Helvetica, Arial, sans-serif;<br />    color:#fff;<br />}<br /><br />/* top line - hover styles */<br />ul.navi:hover {<br />    height:200px;<br />}<br />ul.navi:hover li#n1 {<br />    -moz-transform: translatex(0px);<br />    -ms-transform: translatex(0px);<br />    -o-transform: translatex(0px);<br />    -webkit-transform: translatex(0px);<br />    transform: translatex(0px);<br />}<br />ul.navi:hover li#n2 {<br />    -moz-transform: translatex(90px);<br />    -ms-transform: translatex(90px);<br />    -o-transform: translatex(90px);<br />    -webkit-transform: translatex(90px);<br />    transform: translatex(90px);<br />}<br />ul.navi:hover li#n3 {<br />    -moz-transform: translatex(180px);<br />    -ms-transform: translatex(160px);<br />    -o-transform: translatex(160px);<br />    -webkit-transform: translatex(160px);<br />    transform: translatex(180px);<br />}<br />ul.navi:hover li#n4 {<br />    -moz-transform: translatex(260px);<br />    -ms-transform: translatex(270px);<br />    -o-transform: translatex(270px);<br />    -webkit-transform: translatex(270px);<br />    transform: translatex(270px);<br />}<br />ul.navi:hover li#n5 {<br />    -moz-transform: translatex(360px);<br />    -ms-transform: translatex(360px);<br />    -o-transform: translatex(360px);<br />    -webkit-transform: translatex(360px);<br />    transform: translatex(360px);<br />}<br /><br />/* submenus - common styles */<br />ul.sub {<br />    padding:0;<br />    margin:0;<br />    list-style:none;<br />    width:100%;<br />    height:200px auto;<br />    position:absolute;<br />    left:0;<br />    top:0;<br />    z-index:-1;<br />    opacity:0;<br /><br />    -moz-transition: opacity 0s linear 1s;<br />    -ms-transition: opacity 0s linear 1s;<br />    -o-transition: opacity 0s linear 1s;<br />    -webkit-transition: opacity 0s linear 1s;<br />    transition: opacity 0s linear 1s;<br />}<br />ul.sub li {<br />        width:80px auto;<br />       height:80px;<br />       position:absolute;<br />       left:0;<br />      top:0;<br />      z-index:-1;<br />    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;<br />    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;<br />    -o-transition: -o-transform 0.5s ease-in-out 0.5s;<br />    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;<br />    transition: transform 0.5s ease-in-out 0.5s;<br />}<br /><br />/* submenus - hover styles */<br />ul.navi > li:hover ul {<br />    opacity:1;<br /><br />    -moz-transition: opacity 0s linear 0.5s;<br />    -ms-transition: opacity 0s linear 0.5s;<br />    -o-transition: opacity 0s linear 0.5s;<br />    -webkit-transition: opacity 0s linear 0.5s;<br />    transition: opacity 0s linear 0.5s;<br />}<br />ul.navi li:hover ul li.l {<br />    -moz-transform: translatex(-70px) translatey(90px);<br />    -ms-transform: translatex(-70px) translatey(90px);<br />    -o-transform: translatex(-70px) translatey(90px);<br />    -webkit-transform: translatex(-70px) translatey(90px);<br />    transform: translatex(-70px) translatey(90px);<br />}<br />ul.navi li:hover ul li.c {<br />-moz-transform: translatex(2px) translatey(90px);<br />    -ms-transform: translatex(2px) translatey(90px);<br />    -o-transform: translatex(2px) translatey(90px);<br />    -webkit-transform: translatex(2px) translatey(90px);<br />    transform: translatex(2px) translatey(90px);<br />}<br />ul.navi li:hover ul li.r {<br />    -moz-transform: translatex(74px) translatey(90px);<br />    -ms-transform: translatex(74px) translatey(90px);<br />    -o-transform: translatex(74px) translatey(90px);<br />    -webkit-transform: translatex(74px) translatey(90px);<br />    transform: translatex(74px) translatey(90px);<br />}<br />ul.navi li:hover ul li.r1 {<br />    -moz-transform: translatex(146px) translatey(90px);<br />    -ms-transform: translatex(146px) translatey(90px);<br />    -o-transform: translatex(146px) translatey(90px);<br />    -webkit-transform: translatex(146px) translatey(90px);<br />    transform: translatex(146px) translatey(90px);<br />}<br /></style><br /><br /><!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><br /><br />  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /><br /><br /><br /><div class="mjn-metro-menu"><br /><br /><br /><ul class="navi"><br /> <li id="n1"><a class="mjn-tab1" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/</span>" title="Home" ></a><br /><ul class="sub"><br /> <li class="l"><a class="mjn-fb" href="<span style="color: #0b5394;">https://www.facebook.com/yourlink</span>" title="Like Us on Facebook"></a></li><br /> <li class="c"><a class="mjn-tw" href="<span style="color: cyan;">https://www.twitter.com/yourlink</span>" title="Follow Us on Twitter"></a></li><br />  <li class="r"><a class="mjn-g" href="<span style="color: red;">https://plus.google.com/u/0/123456789</span>"></a></li><br /><li class="r1"><a class="mjn-rss" href="<span style="color: orange;">https://feeds.feedburner.com/yourlink</span>"></a></li><br /></ul><br /></li><br /><li id="n2"><a class="mjn-tab2" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/search/label/</span>" title="Tags" ></a><br /><ul class="sub"><br /><li class="l"><a class="mjn-tab2sub" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/search/label/Windows</span>"title="Windows"><span><span style="color: magenta;">Windows</span></span></a></li><br /><li class="c"><a class="mjn-tab2sub" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/label/Blogger</span>" title="Blogger"><span><span style="color: magenta;">Blogger</span></span></a></li><br /> <li class="r"><a class="mjn-tab2sub" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/search/label/CSS3</span>" title="CSS/HTML"><span><span style="color: magenta;">CSS/HTML</span></span></a></li><br /><li class="r1"><a class="mjn-tab2sub" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/search/label/Softwares</span>" title="Softwares"><span><span style="color: magenta;">Softwares</span></span></a></li><br /></ul><br /></li><br /><li id="n3"><a class="mjn-tab3" href="<span style="color: red;">s2free.blogspot.com</span><span style="color: red;">/2013/</span>" title="Blog Archive" ></a><br /><ul class="sub"><br /><li class="l"><a class="mjn-tab3sub" href="<span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/2013/</span>"><span><span style="color: magenta;">2013</span></span></a></li><br /><li class="c"><a class="mjn-tab3sub" href="<span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/2013/</span>"><span><span style="color: magenta;">2012</span></span></a></li><br /><li class="r"><a class="mjn-tab3sub" href="<span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/2013/</span>"><span><span style="color: magenta;">2011</span></span></a></li><br /><li class="r1"><a class="mjn-tab3sub" href="<span style="color: red;">s2free.blogspot.com/2013</span>"><span><span style="color: magenta;">2010</span></span></a></li><br /></ul><br /></li><br /><li id="n4"><a class="mjn-tab4" href="<span style="color: red;">http://mjntechtips.blogspot.in/p/blog-page.html</span>" title="Contact Us" ></a><br /><ul class="sub"><br /><li class="l"><a class="mjn-tab4sub" href="<span style="color: red;">#</span>"><span><span style="color: magenta;">LINK 1</span></span></a></li><br /><li class="c"><a class="mjn-tab4sub" href="<span style="color: red;">#</span>"><span><span style="color: magenta;">LINK 2</span></span></a></li><br /><li class="r1"><a class="mjn-tab4sub" href="<span style="color: red;">#</span>"><span><span style="color: magenta;">LINK 3</span></span></a></li><br /><li class="r"><a class="mjn-tab4sub" href="<span style="color: red;">#</span>"><span><span style="color: magenta;">LINK 4</span></span></a></li><br /></ul><br /></li><br /><li id="n5"><a class="mjn-tab5" href="<span style="color: red;">#</span>" ><span></span></a><br /></li><br /></ul><br /><div style="clear:both"></div><br /></div><br /></!doctype></div></blockquote><br /><ul style="text-align: left;"><li>Now Click Save and Drag it to your desired position..</li></ul><br /><h4 style="text-align: left;">Customization : </h4>Now Replace Links Text Highlighted in Color <span style="color: #0b5394;">Facebook</span>,<span style="color: cyan;">Twitter</span>,<span style="color: red;">Google+</span>,<span style="color: orange;">RSS</span> and other in <span style="color: red;">Red</span> with your Link..  <br />Replace the Names Highlighted in  <span style="color: magenta;">Pink <span style="color: black;">with your Words appropriate to link given..</span></span></div>

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1 I have Posted My First Two Creation Using CSS3 Earlier In my Posts Be...

Animated Awesome Simple But Cool CSS3 Social Profile Widget with Zooming and Shrinking Effect

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span style="color: #cc0000;"><span style="font-size: large;">Animated Awesome Simple But Cool CSS3 Social Profile Widget with Zooming and Shrinking Effect</span></span></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqlyitcOtOt4Dq8wkCZE-6t388DZeP9gc4Z8e3XkG1IYNAEuRkc1gvTRdCz1LWV7OPEMB4n7mFUiGFvZaqJdahMOLVbcu4hRRiypZeygpp_3nEX8bqoAmqLnyQwBZZI2zmRNH_bDTO1vX/s1600/Metro-Style-win8-Animated-Awesome-Simple-But-Cool-CSS3-Social-Profile-Widget-with-Zooming-and-Shrinking-Effect.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqlyitcOtOt4Dq8wkCZE-6t388DZeP9gc4Z8e3XkG1IYNAEuRkc1gvTRdCz1LWV7OPEMB4n7mFUiGFvZaqJdahMOLVbcu4hRRiypZeygpp_3nEX8bqoAmqLnyQwBZZI2zmRNH_bDTO1vX/s1600/Metro-Style-win8-Animated-Awesome-Simple-But-Cool-CSS3-Social-Profile-Widget-with-Zooming-and-Shrinking-Effect.gif" /></a></div><br />You Will Love It After placing on your blog specially it will look more rocking with Metro UI Template For Blog Its Style Like Metro UI You Effect ..<br /><br />Today I am Adding One More Widget For . As you all know I have 3 Widgets of My Own  Collection in Before Posts.. So Today Let Me Share My Fourth Widget ..Its  Simple Widget Made Using "CSS3" Effects..<br /><br /><h4 style="text-align: left;"> Animated Preview :</h4><div style="text-align: left;"></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqlyitcOtOt4Dq8wkCZE-6t388DZeP9gc4Z8e3XkG1IYNAEuRkc1gvTRdCz1LWV7OPEMB4n7mFUiGFvZaqJdahMOLVbcu4hRRiypZeygpp_3nEX8bqoAmqLnyQwBZZI2zmRNH_bDTO1vX/s1600/Metro-Style-win8-Animated-Awesome-Simple-But-Cool-CSS3-Social-Profile-Widget-with-Zooming-and-Shrinking-Effect.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqlyitcOtOt4Dq8wkCZE-6t388DZeP9gc4Z8e3XkG1IYNAEuRkc1gvTRdCz1LWV7OPEMB4n7mFUiGFvZaqJdahMOLVbcu4hRRiypZeygpp_3nEX8bqoAmqLnyQwBZZI2zmRNH_bDTO1vX/s1600/Metro-Style-win8-Animated-Awesome-Simple-But-Cool-CSS3-Social-Profile-Widget-with-Zooming-and-Shrinking-Effect.gif" /></a></div><br />This Widget Is Made Using the Concept Of Combined CSS3 Tutorials of Different Sites.. Thanks to them..<br /><br /><div style="text-align: center;">Demo of Animated Awesome Simple But Cool CSS3 Social Profile Widget</div><div style="text-align: center;"></div><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/AVvXsEgeg62wF9XTW-Qg1YQr1-EEIexxWGOILgbuIbLnMUrPwLFvxn9XKgdFAreQMaRxMga2wziuZerIogUfyWXeKYi4vq1J8M2cIUBCL6QQfqliw6iUxkvWS98rhT0tBl5H1acaCbLBPmWpyERC/s1600/demo-button-s2free.gif" /></a></div><br />So Now Lets get Started !!!<br /><br /><h4 style="text-align: left;">How to add this Widget to your Blog..<u><b> </b></u></h4><h4></h4><ul style="text-align: left;"><li>First Go to "<a href="http://www.blogger.com/home" target="_blank">Blogger</a>" >> Then Go to your Blog "Dashboard"..</li><li>Now Click on Layout Section in the Left Side of your Blog "Dashboard"..</li><li>Now click on "Add Gadget" ..</li><li>You will get Many Options ..Scroll Down And Click on to "HTML/Java Script"..</li><li>Now Paste The Below Code in it..</li></ul><br /><blockquote class="tr_bq"><div class="codebox"><style><br /><br />/* CSS reset */<br />body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { <br />    margin:0;<br />    padding:0;<br />}<br />html,body {<br />    margin:0;<br />    padding:0;<br />}<br />table {<br />    border-collapse:collapse;<br />    border-spacing:0;<br />}<br />fieldset,img { <br />    border:0;<br />}<br />input{<br />    border:1px solid #b0b0b0;<br />    padding:3px 5px 4px;<br />    color:#979797;<br />    width:190px;<br />}<br />address,caption,cite,code,dfn,th,var {<br />    font-style:normal;<br />    font-weight:normal;<br />}<br />ol,ul {<br />    list-style:none;<br />}<br />caption,th {<br />    text-align:left;<br />}<br />h1,h2,h3,h4,h5,h6 {<br />    font-size:100%;<br />    font-weight:normal;<br />}<br />q:before,q:after {<br />    content:'';<br />}<br />abbr,acronym { border:0;<br />}<br /><br /><br />/*****************fb*****************/<br />.ca-menuf{<br />    padding: 0;<br />    width:100%;<br />    color: #fff;<br />    margin: 1px auto;<br />}<br />.ca-menuf li{<br />    width: 100%;<br />    height: 75px;<br />    overflow: hidden;<br />    display: block;<br />    background: #017CD4;<br />    color: #fff;<br />    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    -webkit-transition: all 300ms ease-in-out;<br />    -moz-transition: all 300ms ease-in-out;<br />    -o-transition: all 300ms ease-in-out;<br />    -ms-transition: all 300ms ease-in-out;<br />    transition: all 300ms ease-in-out;<br />}<br />.ca-menuf li:last-child{<br />    margin-bottom: 2px;<br />    color: #fff;<br />}<br />.ca-menuf li a{<br />    text-align: left;<br />    text-decoration:none;<br />    display: block;<br />    width: 100%;<br />    height: 100%;<br />    color: #fff;<br />    position:relative;<br />}<br />.ca-contentf{<br />    color: #fff;<br />    position: absolute;<br />    left: 12px;<br />    width: 100%;<br />    height: 100%;<br />    top: 10px;<br />}<br />.ca-mainf{<br />    font-size: 20px;<br />    color: #fff;<br />    -webkit-transition: all 300ms linear;<br />    -moz-transition: all 300ms linear;<br />    -o-transition: all 300ms linear;<br />    -ms-transition: all 300ms linear;<br />    transition: all 300ms linear;<br />}<br />.ca-subf{<br />    font-size: 14px;<br />    color: #fff;<br />    -webkit-transition: all 300ms linear;<br />    -moz-transition: all 300ms linear;<br />    -o-transition: all 300ms linear;<br />    -ms-transition: all 300ms linear;<br />    transition: all 300ms linear; <br />}<br />.ca-menuf li:hover{<br />    background:  #1f69b3;<br />    color: #fff;<br />}<br />.ca-menuf li:hover .ca-iconf{<br />    text-shadow: 0px 0px 1px ;<br />    font-size: 50px;<br />    color: #fff;<br />}<br />.ca-menuf li:hover .ca-mainf{<br />    font-size: 14px;<br />    color: #fff;<br />}<br />.ca-menuf li:hover .ca-subf{<br />    color: #fff;<br />    font-size: 30px;<br />}<br /><br />/*****************tw*****************/<br />.ca-menut{<br />    padding: 0;<br />    width:100%;<br />    color: #fff;<br />    margin: 1px auto;<br />}<br />.ca-menut li{<br />    width: 100%;<br />    height: 75px;<br />    overflow: hidden;<br />    display: block;<br />    background: #00BFFF ;<br />    color: #fff;<br />    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    -webkit-transition: all 300ms ease-in-out;<br />    -moz-transition: all 300ms ease-in-out;<br />    -o-transition: all 300ms ease-in-out;<br />    -ms-transition: all 300ms ease-in-out;<br />    transition: all 300ms ease-in-out;<br />}<br />.ca-menut li:last-child{<br />    margin-bottom: 2px;<br />    color: #fff;<br />}<br />.ca-menut li a{<br />    text-align: left;<br />    text-decoration:none;<br />    display: block;<br />    width: 100%;<br />    height: 100%;<br />    color: #fff;<br />    position:relative;<br />}<br />.ca-contentt{<br />    color: #fff;<br />    position: absolute;<br />    left: 12px;<br />    width: 100%;<br />    height: 100%;<br />    top: 10px;<br />}<br />.ca-maint{<br />    font-size: 20px;<br />    color: #fff;<br />    -webkit-transition: all 300ms linear;<br />    -moz-transition: all 300ms linear;<br />    -o-transition: all 300ms linear;<br />    -ms-transition: all 300ms linear;<br />    transition: all 300ms linear;<br />}<br />.ca-subt{<br />    font-size: 14px;<br />    color: #fff;<br />    -webkit-transition: all 300ms linear;<br />    -moz-transition: all 300ms linear;<br />    -o-transition: all 300ms linear;<br />    -ms-transition: all 300ms linear;<br />    transition: all 300ms linear; <br />}<br />.ca-menut li:hover{<br />    background:#0CA8F0; <br />    color: #fff;<br />}<br />.ca-menut li:hover .ca-icont{<br />    text-shadow: 0px 0px 1px ;<br />    font-size: 50px;<br />    color: #fff;<br />}<br />.ca-menut li:hover .ca-maint{<br />    font-size: 14px;<br />    color: #fff;<br />}<br />.ca-menut li:hover .ca-subt{<br />    color: #fff;<br />    font-size: 30px;<br />}<br />/*****************g+*****************/<br />.ca-menug{<br />    padding: 0;<br />    width:100%;<br />    color: #fff;<br />    margin: 1px auto;<br />}<br />.ca-menug li{<br />    width: 100%;<br />    height: 75px;<br />    overflow: hidden;<br />    display: block;<br />    background: #da4a38;<br />    color: #fff;<br />    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    margin-bottom: 4px;<br />    -webkit-transition: all 300ms ease-in-out;<br />    -moz-transition: all 300ms ease-in-out;<br />    -o-transition: all 300ms ease-in-out;<br />    -ms-transition: all 300ms ease-in-out;<br />    transition: all 300ms ease-in-out;<br />}<br />.ca-menug li:last-child{<br />    margin-bottom:2px;<br />    color: #fff;<br />}<br />.ca-menug li a{<br />    text-align: left;<br />    text-decoration:none;<br />    display: block;<br />    width: 100%;<br />    height: 100%;<br />    color: #fff;<br />    position:relative;<br />}<br />.ca-contentg{<br />    position: absolute;<br />    left:12px;<br />    width: 300px;<br />    height: 60px;<br />    top: 10px;<br />    color: #fff;<br />}<br />.ca-maing{<br />    font-size: 20px;<br />    color: #fff;<br />    -webkit-transition: all 300ms linear;<br />    -moz-transition: all 300ms linear;<br />    -o-transition: all 300ms linear;<br />    -ms-transition: all 300ms linear;<br />    transition: all 300ms linear;<br />}<br />.ca-subg{<br />    font-size: 14px;<br />    color: #fff;<br />    -webkit-transition: all 300ms linear;<br />    -moz-transition: all 300ms linear;<br />    -o-transition: all 300ms linear;<br />    -ms-transition: all 300ms linear;<br />    transition: all 300ms linear; <br />}<br />.ca-menug li:hover{<br />    background: #DC321E;<br />    color: #fff;<br />}<br />.ca-menug li:hover .ca-icong{<br />    text-shadow: 0px 0px 1px ;<br />    font-size: 50px;<br />    color: #fff;<br />}<br />.ca-menug li:hover .ca-maing{<br />    font-size: 14px;<br />    color: #fff;<br />}<br />.ca-menug li:hover .ca-subg{<br />    color: #fff;<br />    font-size: 30px;<br />}<br />/*****************rss*****************/<br />.ca-menur{<br />    padding: 0;<br />    width:100%;<br />    color: #fff;<br />    margin: 1px auto;<br />}<br />.ca-menur li{<br />    width: 100%;<br />    height: 75px;<br />    overflow: hidden;<br />    display: block;<br />    background: #FFA500 ;<br />    color: #fff;<br />    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br />    margin-bottom: 4px;<br />    -webkit-transition: all 300ms ease-in-out;<br />    -moz-transition: all 300ms ease-in-out;<br />    -o-transition: all 300ms ease-in-out;<br />    -ms-transition: all 300ms ease-in-out;<br />    transition: all 300ms ease-in-out;<br />}<br />.ca-menur li:last-child{<br />    margin-bottom: 2px;<br />    color: #fff;<br />}<br />.ca-menur li a{<br />    text-align: left;<br />    text-decoration:none;<br />    display: block;<br />    width: 100%;<br />    height: 100%;<br />    color: #fff;<br />    position:relative;<br />}<br />.ca-contentr{<br />    position: absolute;<br />    left: 12px;<br />    width: 300px;<br />    height: 60px;<br />    top: 10px;<br />    color: #fff;<br />}<br />.ca-mainr{<br />    font-size: 20px;<br />    color: #fff;<br />    -webkit-transition: all 300ms linear;<br />    -moz-transition: all 300ms linear;<br />    -o-transition: all 300ms linear;<br />    -ms-transition: all 300ms linear;<br />    transition: all 300ms linear;<br />}<br />.ca-subr{<br />    font-size: 14px;<br />    color: #fff;<br />    -webkit-transition: all 300ms linear;<br />    -moz-transition: all 300ms linear;<br />    -o-transition: all 300ms linear;<br />    -ms-transition: all 300ms linear;<br />    transition: all 300ms linear; <br />}<br />.ca-menur li:hover{<br />    background: #FF8C00 ;<br />    color: #fff;<br />}<br />.ca-menur li:hover .ca-iconr{<br />    text-shadow: 0px 0px 1px ;<br />    font-size: 50px;<br />    color: #fff;<br />}<br />.ca-menur li:hover .ca-mainr{<br />    font-size: 14px;<br />    color: #fff;<br />}<br />.ca-menur li:hover .ca-subr{<br />    color: #fff;<br />    font-size: 30px;<br />}<br /></style><br /><br /><br /><br /><ul class="ca-menuf"><br /><li><br /><a href="<span style="color: #0b5394;">https://www.facebook.com/warsi.log.5</span>"><br /><div class="ca-contentf"><br /><h2 class="ca-mainf"><br />Facebook</h2><br /><h3 class="ca-subf"><br />Like Us on Facebook</h3><br /></div><br /></a><br /></li><br /></ul><br /><ul class="ca-menut"><br /><li><br /><a href="<span style="color: cyan;">https://twitter.com/yourlink</span>"><div class="ca-contentt"><br /><h2 class="ca-maint"><br />Twitter</h2><br /><h3 class="ca-subt"><br />Follow Us on Twitter</h3><br /></div><br /></a><br /></li><br /></ul><br /><ul class="ca-menug"><br /><li><br /><a href="<span style="color: red;">https://plus.google.com/u/0/123456789</span>"><div class="ca-contentg"><br /><h2 class="ca-maing"><br />Google+</h2><br /><h3 class="ca-subg"><br />Add Us on Google+</h3><br /></div><br /></a><br /></li><br /></ul><br /><ul class="ca-menur"><br /><li><br /><a href="<span style="color: orange;">https://feedburner.google.com/fb/a/mailverify?uri=yourlink</span>"><div class="ca-contentr"><br /><h2 class="ca-mainr"><br />RSS</h2><br /><h3 class="ca-subr"><br />Subscribe  Us on RSS</h3><br /></div><br /></a><br /></li><br /></ul><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script></div></blockquote><br /><br /><br /><div dir="ltr"><br /><br /><br /><li>Now click save..That's it ..all Done!! </li><br /><div class="note"><br /></div><div class="note" style="text-align: left;"><h4><b>  </b>Customization :</h4></div><div class="note"><ul style="text-align: left;"><li>Now Replace Links Text Highlighted in Color<span style="color: #0b5394;"> Facebook</span>,<span style="color: cyan;">Twitter</span>,<span style="color: red;">Google+</span>,<span style="color: orange;">RSS</span> with your Link..</li></ul></div></div></div>

Animated Awesome Simple But Cool CSS3 Social Profile Widget with Zooming and Shrinking Effect

Animated Awesome Simple But Cool CSS3 Social Profile Widget with Zooming and Shrinking Effect You Will Love It After placing on your blog sp...

Animated Twitter Follow Us Flying Bird For Blogger - HTML Code

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span style="color: #cc0000;"><span style="font-size: large;"><span style="font-family: Times,"Times New Roman",serif;">Animated Twitter Follow Us Flying Bird For Blogger - HTML Code - (Not Flash Code)</span></span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucwvh_tL7gliVFmGpMFYwqgjjrWat6PUef0R6Tk4jT6wlXfJiXPrtgG4__nFknbsLtLcBzhhE6lVit1MyosGhBgBN8MRgPnbn3kqXC4V9Cy6fizt3UBXBimwp2NcE4C-T7PALYzL3hXil/s1600/animated-twitter-flying-for-blogger-blogs.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucwvh_tL7gliVFmGpMFYwqgjjrWat6PUef0R6Tk4jT6wlXfJiXPrtgG4__nFknbsLtLcBzhhE6lVit1MyosGhBgBN8MRgPnbn3kqXC4V9Cy6fizt3UBXBimwp2NcE4C-T7PALYzL3hXil/s1600/animated-twitter-flying-for-blogger-blogs.gif" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhlIJtIKlmqt4dFKkmXStV4B4_EnM6mIZk8DY5TjtrrMaNVTG0shNQKRTv8IYDRc6aOuOX4t9Q-04ZLsT4ZB8g_kCiYv4nNtJhp-6FiF0dOd1PlN3dl8nlwtOwevpC0sKunu4Ge9m0A09/s1600/animated-twitter-flying-bird-for-blogger-2014.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhlIJtIKlmqt4dFKkmXStV4B4_EnM6mIZk8DY5TjtrrMaNVTG0shNQKRTv8IYDRc6aOuOX4t9Q-04ZLsT4ZB8g_kCiYv4nNtJhp-6FiF0dOd1PlN3dl8nlwtOwevpC0sKunu4Ge9m0A09/s1600/animated-twitter-flying-bird-for-blogger-2014.png" /></a></div><div style="text-align: left;"><br /></div><div style="text-align: left;"><br /><span style="color: #6aa84f;"><b><span class="st"><i>Twitter</i> is very useful site for promoting your <i>blog</i>. It has millions of users and tweets daily.You can easily promote your <i>blog</i> on <i>twitter</i></span></b></span></div><div style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;"><br /></span></div><div style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;">You Might  have seen animated flying Twitter bird on many Blogs and Page. Well this  is a Popular Widget.and Also it is Very easy to install.Wherever You  Scroll on the Page the Twitter Bird Follows you on the Page.So Add this  Simple Widget and Add Some Uniqueness to your Blog.</span></div><div style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;"></span></div><h4 style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;">How to add Animated Flying Twitter Bird:.</span></h4><div style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;"></span></div><div style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;"></span></div><div style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;">1. Go to Blogger Dashboard > Design > Edit Html.</span></div><div style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;">2. Now Search for <span style="color: #990000;"></body></span> tag and Paste the Below Code Above it.</span></div><div style="text-align: left;"><span style="font-family: Times,"Times New Roman",serif;">3. Save Your Template.</span></div><b><i><span style="font-family: 'Trebuchet MS', sans-serif;"></span></i></b><br /><b><i><span style="font-family: 'Trebuchet MS', sans-serif;"><b><i><span style="font-family: 'Trebuchet MS', sans-serif;"></span></i></b></span></i></b><br /><pre style="background-color: #fff8e8; border: 2px solid rgb(255, 231, 175); clear: both; font-family: 'Courier New', monospace; font: inherit; line-height: 18px; margin: 25px 5px; overflow: auto; padding: 0px; text-align: -webkit-auto; vertical-align: baseline;"><code class="xml" data-result="[object Object]" data-second_best="[object Object]" style="background-attachment: scroll !important; background-color: rgb(255, 243, 214) !important; background-image: none !important; background-position: 0px 0px !important; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; display: block; font-family: 'Courier New', monospace; font: inherit; line-height: 1.6; margin: 0px; overflow: auto; padding: 10px !important; vertical-align: baseline; word-wrap: break-word;"><span class="comment" style="border: 0px; color: #93a1a1; font-style: italic; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span><span style="color: #333333;"><br /></span><span class="tag" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-size: 12px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span> <span class="attribute" style="border: 0px; color: #b58900; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="value" style="border: 0px; color: #2aa198; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"text/javascript"</span> <span class="attribute" style="border: 0px; color: #b58900; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="value" style="border: 0px; color: #2aa198; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"http://technouniversityworldjavascript-testing.googlecode.com/files/tuwtwitterbird.js"</span>></span><span class="javascript" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span><span class="tag" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-size: 12px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span>></span><span style="color: #333333;"><br /></span><span class="tag" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-size: 12px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span> <span class="attribute" style="border: 0px; color: #b58900; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="value" style="border: 0px; color: #2aa198; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"text/javascript"</span>></span><span class="javascript" style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #333333;"><br /></span><span class="keyword" style="border: 0px; color: #859900; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span style="color: #333333;"> twitterAccount = </span><span class="string" style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #2aa198;">"</span><span id="tbirdacc" style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #990000;"><b>username</b></span></span><span style="color: #2aa198;">"</span></span><span style="color: #333333;">;</span><span class="keyword" style="border: 0px; color: #859900; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span style="color: #333333;"> tweetThisText = </span><span class="string" style="border: 0px; color: #2aa198; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">" <data:blog.pageTitle/> : <data:blog.url/> "</span><span style="color: #333333;">;<br />tripleflapInit();</span></span><span class="tag" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-size: 12px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span>></span><span style="color: #333333;"><br /></span><span class="tag" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-size: 12px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">span</span> <span class="attribute" style="border: 0px; color: #b58900; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">style</span>=<span class="value" style="border: 0px; color: #2aa198; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"font-size:11px;position:absolute;"</span>></span><span class="tag" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-size: 12px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">a</span> <span class="attribute" style="border: 0px; color: #b58900; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span>=<span class="value" style="border: 0px; color: #2aa198; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'Blogger Widget by TUW'</span> <span class="attribute" style="border: 0px; color: #b58900; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">href</span>=<span class="value" style="border: 0px; color: #2aa198; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"http://s2free.blogspot.com"</span> <span class="attribute" style="border: 0px; color: #b58900; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">target</span>=<span class="value" style="border: 0px; color: #2aa198; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'_blank'</span>></span><span style="color: #333333;">Tricks and Tips</span><span class="tag" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-size: 12px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">a</span>></span><span class="tag" style="border: 0px; color: #333333; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-size: 12px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">span</span>></span><span style="color: #333333;"><br /></span><span class="comment" style="border: 0px; color: #93a1a1; font-style: italic; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></code></pre><div style="border: 0px; font: inherit; line-height: 20px; margin-bottom: 15px; padding: 0px; text-align: -webkit-auto; vertical-align: baseline;"><span style="font-family: Times,"Times New Roman",serif;"><span style="background-color: white;">Now Change My Twitter Username With Your Username That's It.Now You're Done.</span></span></div></div>

Animated Twitter Follow Us Flying Bird For Blogger - HTML Code

Animated Twitter Follow Us Flying Bird For Blogger - HTML Code - (Not Flash Code) Twitter is very useful site for promoting your blog . It ...

Mouse Over Css Effect Stretch Buttons Style 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;">Mouse Over Css Effect Stretch Buttons Style For Blogger </span></span></div><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhky7tE_a-Feos5SiEK8OhxaX0uqAg1cGNGr91CbrIF4BE-I0LW7ICBaOfKfraPlVP9M50FYqOtRqtPSR-8XyrJ56312__gA67EnKpE3FQe-m4fbJHnPb571tWcoPdFI75PxpAoNjbyRUry/s1600/Hover-Css-effect-Stretch-buttons-style-for-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhky7tE_a-Feos5SiEK8OhxaX0uqAg1cGNGr91CbrIF4BE-I0LW7ICBaOfKfraPlVP9M50FYqOtRqtPSR-8XyrJ56312__gA67EnKpE3FQe-m4fbJHnPb571tWcoPdFI75PxpAoNjbyRUry/s1600/Hover-Css-effect-Stretch-buttons-style-for-blogger.gif" /></a></div><br /><br /><br />Hi Bloggiyan Today I am going to teach you how to make good hover effect buttons for your page,blog or website.As you all know it all starts with Css & HTML.So you should have little knowledge of Css & HTML.Its not very tough to make this god looking hover effect buttons.<br /><br /><b>If you also want to put this good looking buttons in your blog then follow some quick steps</b><br /><br /> As I told you that we need the help of Css in making this type of  buttons.Below are some Css codes copy that code in your website.<br /><br /><b><span style="color: red;">Where To Paste This Code????</span></b><br /><br />If you don't know where to paste this code i will teach you follow the steps. <br /><br /><br />1. Go To Blogger >> Template >> Customise  <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuXbZjZXXsu7AgeiU6vFLegUhLaDMsro1gHdDj0bS54rOjRfmx1rY0-g0aYCDMvnJtXAQunbWjbN6FIh2h1y2-M0H4bJa3K7FjSvPgINHyNPzOLf_nUNIb2t_MM74C_ByjTLcZ1kOINwXh/s1600/Animated-Mouse-over-ccs-button-style-for-blogger-template-advance.png" style="margin-left: 1em; margin-right: 1em;"><br /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEharesH3h711pwg8TGtGyqvqcTlBQ9WvCGPfIxUpnBdBqOa5zhd9iFPtEbfbwvmWfAT0lKa8w-8QWo9_dd8dlptfgoNoGz6dU2FFodLajoswdTZHyelWEJFcufO2FoYbU0RQdOPszGBlFKU/s1600/Animated-Mouse-over-ccs-button-style-for-blogger-template-customise.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEharesH3h711pwg8TGtGyqvqcTlBQ9WvCGPfIxUpnBdBqOa5zhd9iFPtEbfbwvmWfAT0lKa8w-8QWo9_dd8dlptfgoNoGz6dU2FFodLajoswdTZHyelWEJFcufO2FoYbU0RQdOPszGBlFKU/s1600/Animated-Mouse-over-ccs-button-style-for-blogger-template-customise.png" /></a></div><br /><b>2. After Opening  Template Customise Go To Advanced >> Add Css.</b><br /><b>3. And there paste the code. </b><br /><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuXbZjZXXsu7AgeiU6vFLegUhLaDMsro1gHdDj0bS54rOjRfmx1rY0-g0aYCDMvnJtXAQunbWjbN6FIh2h1y2-M0H4bJa3K7FjSvPgINHyNPzOLf_nUNIb2t_MM74C_ByjTLcZ1kOINwXh/s1600/Animated-Mouse-over-ccs-button-style-for-blogger-template-advance.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuXbZjZXXsu7AgeiU6vFLegUhLaDMsro1gHdDj0bS54rOjRfmx1rY0-g0aYCDMvnJtXAQunbWjbN6FIh2h1y2-M0H4bJa3K7FjSvPgINHyNPzOLf_nUNIb2t_MM74C_ByjTLcZ1kOINwXh/s1600/Animated-Mouse-over-ccs-button-style-for-blogger-template-advance.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhky7tE_a-Feos5SiEK8OhxaX0uqAg1cGNGr91CbrIF4BE-I0LW7ICBaOfKfraPlVP9M50FYqOtRqtPSR-8XyrJ56312__gA67EnKpE3FQe-m4fbJHnPb571tWcoPdFI75PxpAoNjbyRUry/s1600/Hover-Css-effect-Stretch-buttons-style-for-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><br /></a></div> <b>Paste Following Code In Add Custom CSS Field </b><br /><br /><div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;"><blockquote class="tr_bq">a.hupt:link {<br />color: #6E6E6E;<br />font: bold 12px Helvetica, Arial, sans-serif;<br />text-decoration: none;<br />padding: 7px 12px;<br />position: relative;<br />display: inline-block;<br />text-shadow: 0 1px 0 white;<br />-webkit-transition: border-color .218s;<br />-moz-transition: border .218s;<br />-o-transition: border-color .218s;<br />transition: border-color .218s;<br />background: #F3F3F3;<br />background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));<br />background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));<br />border: solid 1px gainsboro;<br />border-radius: 2px;<br />-webkit-border-radius: 2px;<br />-moz-border-radius: 2px;<br />margin-right: 10px;<br />text-align: center;<br />width: 70px;<br />transition: width 1s;<br />-moz-transition: width 1s;<br />-webkit-transition: width 1s;<br />-o-transition: width 1s;<br />}<br /><br />a.hupt:hover {<br />color: #333;<br />border-color: #999;<br />-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);<br />box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);<br />width: 160px;<br />}</blockquote></div><br /><div><span style="color: blue;"><b>Template Code Work Done.. </b></span></div><div></div><div><span style="color: blue;"><b>Now where You Want to show this button here is Html code paste the code the button will start appearing.</b></span><br /><span style="color: blue;"><b></b></span></div><div><div></div></div><div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;"><br /><blockquote class="tr_bq"><div class="testbutton"><br /><a class="hupt" href="YOUR-URL">FB<br /></a></div></blockquote></div><br />If You Need Any Help to put this A </div>

Mouse Over Css Effect Stretch Buttons Style For Blogger

Mouse Over Css Effect Stretch Buttons Style For Blogger Hi Bloggiyan Today I am going to teach you how to make good hover effect buttons for...

Some Branded Google Animated Gif Images

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span style="color: #cc0000;"><span style="font-size: large;">Some Branded Google Animated Gif Images</span></span></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe2fYX_rk4jnVJCtFYnRnN85tr3VrfGAfPQmJJ367ar9Uh8L3zuStvJOmy1Kbb-c807zV-6Jjsd5lwGpbJ1NJxQWa7zJUfQMSOOrJnvE3dro2bXheFFZsHrVLEkAYj5niI80X8tUMhbBdd/s1600/Google-Animated-pic.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe2fYX_rk4jnVJCtFYnRnN85tr3VrfGAfPQmJJ367ar9Uh8L3zuStvJOmy1Kbb-c807zV-6Jjsd5lwGpbJ1NJxQWa7zJUfQMSOOrJnvE3dro2bXheFFZsHrVLEkAYj5niI80X8tUMhbBdd/s320/Google-Animated-pic.gif" width="320" /></a></div><br /><br />I found this Images On <a href="https://plus.google.com/" target="_blank">Google Plus</a>.Its Really Attractive.We can add this images to our blog by which our blog look great.I want to share Some Fact This Is not related to this post but it will increase your G.K.<br /><br /><br /><blockquote class="tr_bq"><b>We can upload animated.gif images on Google plus, Blogger or any webiste but we can't upload this images on Facebook.</b></blockquote><br /><span style="color: #38761d; font-size: medium;"><i><b>Some Beautiful Animated gif Images</b></i></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZNjGCHPRMAU3gVk0qzEfo827W8qN6_5kZ2Fwdr5O8bMaLQetuHIvQZNUpLHFu5dCVusb53h7iRsaig73ZSgwPb_FyC5MkOI1jDfrzuA4qpRnGkMryn7FKw0Ai4qIj-ySekFEmj_PJdvl/s1600/App_Engine.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZNjGCHPRMAU3gVk0qzEfo827W8qN6_5kZ2Fwdr5O8bMaLQetuHIvQZNUpLHFu5dCVusb53h7iRsaig73ZSgwPb_FyC5MkOI1jDfrzuA4qpRnGkMryn7FKw0Ai4qIj-ySekFEmj_PJdvl/s1600/App_Engine.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxnTkdaMIi_njM8v9RyLZ4HSNb4W3QIR3k76YhlBlLayKTY5RY_P1oQ1GqmJWCA4-1VaIbWweN8JbDFYX-7YiWx91CzWnSyd_gCG0tf2RROlzT1CH4WSDGAAiTHsiiEgW8u2Y5yqClOZo/s1600/Chrome.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxnTkdaMIi_njM8v9RyLZ4HSNb4W3QIR3k76YhlBlLayKTY5RY_P1oQ1GqmJWCA4-1VaIbWweN8JbDFYX-7YiWx91CzWnSyd_gCG0tf2RROlzT1CH4WSDGAAiTHsiiEgW8u2Y5yqClOZo/s1600/Chrome.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowmRHBt3a_JdWaLp-KhcdEMm5iw3P4SlP9aZsBVsAD5h1aRizkXHKhMsKi6rYxsO_JZQSfmotWntH7PmZtfD-ey7sNmeEcx2EA4RSlgzlshMvf8CEZuSQxTIGemwQ3NaeX6XRnGPNU5Ho/s1600/GPlus.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowmRHBt3a_JdWaLp-KhcdEMm5iw3P4SlP9aZsBVsAD5h1aRizkXHKhMsKi6rYxsO_JZQSfmotWntH7PmZtfD-ey7sNmeEcx2EA4RSlgzlshMvf8CEZuSQxTIGemwQ3NaeX6XRnGPNU5Ho/s1600/GPlus.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCYE_h9m0hozkuLm3jypZPQBDbKhz4_8RpxU1cB6lyKwodSMsBwSlbSxJ7DrlPuGvjYU-MzQgWSQHCRSkFh9c9EMSXtB_heelYGu8wsXlVy0Zsp3NGG96kbaOZqaftdT8RBT8XeRmh_1kn/s1600/Maps.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCYE_h9m0hozkuLm3jypZPQBDbKhz4_8RpxU1cB6lyKwodSMsBwSlbSxJ7DrlPuGvjYU-MzQgWSQHCRSkFh9c9EMSXtB_heelYGu8wsXlVy0Zsp3NGG96kbaOZqaftdT8RBT8XeRmh_1kn/s1600/Maps.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikUbW-JNd4xNHPdeAPO_Sa-ouv-Mj-yrTZaldGBwsGxo6gM64iAiy-6JNljnT-SIAIRY9qqI6UOppj1g2TPY5P0_B6MQCvYKBiW342LEcbKN80RPWVL5XM6l9XdttFRdDWRCWJxV3IFWPq/s1600/Wallet.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikUbW-JNd4xNHPdeAPO_Sa-ouv-Mj-yrTZaldGBwsGxo6gM64iAiy-6JNljnT-SIAIRY9qqI6UOppj1g2TPY5P0_B6MQCvYKBiW342LEcbKN80RPWVL5XM6l9XdttFRdDWRCWJxV3IFWPq/s1600/Wallet.gif" /></a></div><br /><div style="text-align: center;"><span style="color: #6aa84f;"><span style="font-size: large;">If you have any cool animated pic share with bloggiyan </span></span></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lR3ENCHFS1hXk_O-KlSqGmP9fgigrvhXr0scHxOOhzFeboencf8il2V-6uqT4uwJTrdrUW4Py_tJnoMiZZfQEhrM6ORIgzd8UkdP8znTgq-TmUPYjE8MggtYsA-K5dJPSO7Kb2Nx-Fs0/s1600/google-animated-logos-all-google-animation-pic.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lR3ENCHFS1hXk_O-KlSqGmP9fgigrvhXr0scHxOOhzFeboencf8il2V-6uqT4uwJTrdrUW4Py_tJnoMiZZfQEhrM6ORIgzd8UkdP8znTgq-TmUPYjE8MggtYsA-K5dJPSO7Kb2Nx-Fs0/s1600/google-animated-logos-all-google-animation-pic.gif" /></a></div><br /><br /></div>

Some Branded Google Animated Gif Images

Some Branded Google Animated Gif Images I found this Images On Google Plus .Its Really Attractive.We can add this images to our blog by whic...

Attractive Stylish Animated 125 x 125 Banner Ads For Your Blog / Website

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: center;"><span style="font-family: Times,"Times New Roman",serif;"><span style="color: #cc0000;"><span style="font-size: large;">Attractive Stylish Animated 125 x 125 Banner Ads For Your Blog / Website   </span></span></span></div><span style="font-family: Times,"Times New Roman",serif;"><br /></span><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Times,"Times New Roman",serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhggaCC-BZ8JPNLTLrd_GIq0z0kqORfjzMaOT9_S4G_BCjlui5k7_52qqsiH5IrXH61yGVepEIhgO8lLQbJR6iMMuH8W6oT0DKb4OXOVjGl3mUsSkJ3A2h7p00x9U79kk8J_f8VZCvfl_Kd/s1600/Reading+Style.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhggaCC-BZ8JPNLTLrd_GIq0z0kqORfjzMaOT9_S4G_BCjlui5k7_52qqsiH5IrXH61yGVepEIhgO8lLQbJR6iMMuH8W6oT0DKb4OXOVjGl3mUsSkJ3A2h7p00x9U79kk8J_f8VZCvfl_Kd/s1600/Reading+Style.gif" /></a></span></div><span style="font-family: Times,"Times New Roman",serif;"></span><br /><span style="font-family: Times,"Times New Roman",serif;"><span style="font-size: medium;">The most beautiful collection of  advertising banners for Blogger, Wordpress, Typepad and all other blogs.   The unique thing about these banners is that they are Animated Ad  banners and not just ordinary 125 by 125 Ad blocks. An advertiser will  offer you an Ad only when something at your sidebar catches his  attention significantly and that is usually a vacant Ad Spot. In fact  the more attractive your Ad block may seem the better chances you get of  earning online, day and night :).</span></span><br /><span style="font-family: Times,"Times New Roman",serif;"><span style="font-size: medium;"></span></span><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qqZKbHKJGV1t8KmBo0QyjOATHavNIaBQjIdW29WoEPJnlt1soX46-g-mdawLwb31pXYBbNeNcAW44TCJwEGnSvwtT6AEQdTzCu_OxfuOHgc0McueBZq4N_wNhFC0nL77oW5iSiYDn8j7/s1600/Big+Banner.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qqZKbHKJGV1t8KmBo0QyjOATHavNIaBQjIdW29WoEPJnlt1soX46-g-mdawLwb31pXYBbNeNcAW44TCJwEGnSvwtT6AEQdTzCu_OxfuOHgc0McueBZq4N_wNhFC0nL77oW5iSiYDn8j7/s1600/Big+Banner.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN6R5gozs6Vk8ZUQJeEeV-f2sRvpw1FrRekNNl25dj1vAvCOcA2qlfrMa8ZG_aibdbFmlyieKQbX06eWiQ4R56GYItibbgHPYUdVvmy_bpE3kuFte0EXahP_trrMccQRz21O2q7oj9iNS7/s1600/Bill-board.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN6R5gozs6Vk8ZUQJeEeV-f2sRvpw1FrRekNNl25dj1vAvCOcA2qlfrMa8ZG_aibdbFmlyieKQbX06eWiQ4R56GYItibbgHPYUdVvmy_bpE3kuFte0EXahP_trrMccQRz21O2q7oj9iNS7/s1600/Bill-board.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbzHYVuIIog_YCCnTE5pySeYrY_kORtW3ussZDBQjPaDTOxXO8R-4kchOSQGqiAwZBVWJi2YHg4jw3JvrWR95dlADDU_YOb_1nJTvM1ZW3Jy8_HBvIBWfcvGtBBAlSrInsgDdemC4YEQG/s1600/Framed.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbzHYVuIIog_YCCnTE5pySeYrY_kORtW3ussZDBQjPaDTOxXO8R-4kchOSQGqiAwZBVWJi2YHg4jw3JvrWR95dlADDU_YOb_1nJTvM1ZW3Jy8_HBvIBWfcvGtBBAlSrInsgDdemC4YEQG/s1600/Framed.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHkEgasEjgXnxpKNRl8XdCB7SmuU6cTO0EP72MwybLBSpcaNhyY3dQe9iNTKGVJ3RApQblKS7M0fEczGTd3a0-oktfozXh37I_sO2CtWJ5vbutl790J6NNhpYG1lgkhOVbp9A1aJ3rhSOy/s1600/GREEN.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHkEgasEjgXnxpKNRl8XdCB7SmuU6cTO0EP72MwybLBSpcaNhyY3dQe9iNTKGVJ3RApQblKS7M0fEczGTd3a0-oktfozXh37I_sO2CtWJ5vbutl790J6NNhpYG1lgkhOVbp9A1aJ3rhSOy/s1600/GREEN.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNauRi9EMIHoAeckvQrlybEbworxUqX9vO3OfajAyTLuvSL4FsnTC-5lk9_GH6K873wdYVyG3nX5QCdZCxOh4BAvMOdPlfUp8up4gWsMssWZfvzXvG62LoUqAZV8H3nu0DyFGAEmVM4JXA/s1600/Hand+Drawing.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNauRi9EMIHoAeckvQrlybEbworxUqX9vO3OfajAyTLuvSL4FsnTC-5lk9_GH6K873wdYVyG3nX5QCdZCxOh4BAvMOdPlfUp8up4gWsMssWZfvzXvG62LoUqAZV8H3nu0DyFGAEmVM4JXA/s1600/Hand+Drawing.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhggaCC-BZ8JPNLTLrd_GIq0z0kqORfjzMaOT9_S4G_BCjlui5k7_52qqsiH5IrXH61yGVepEIhgO8lLQbJR6iMMuH8W6oT0DKb4OXOVjGl3mUsSkJ3A2h7p00x9U79kk8J_f8VZCvfl_Kd/s1600/Reading+Style.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhggaCC-BZ8JPNLTLrd_GIq0z0kqORfjzMaOT9_S4G_BCjlui5k7_52qqsiH5IrXH61yGVepEIhgO8lLQbJR6iMMuH8W6oT0DKb4OXOVjGl3mUsSkJ3A2h7p00x9U79kk8J_f8VZCvfl_Kd/s1600/Reading+Style.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQwhEFR87Mbn8P9p3YVxgaak8GDqhL4j2wTI6lv71ZYoGbqC-A-KHLogxmdpHG4lgVBoA4KJ34LG5-jqJ9-q_ibQxlnSDs3g5G1xe45s9Pc2H5wdpkJ4-YB6DN2pJHwrO4TkHJTrN8kjSo/s1600/Spinner.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQwhEFR87Mbn8P9p3YVxgaak8GDqhL4j2wTI6lv71ZYoGbqC-A-KHLogxmdpHG4lgVBoA4KJ34LG5-jqJ9-q_ibQxlnSDs3g5G1xe45s9Pc2H5wdpkJ4-YB6DN2pJHwrO4TkHJTrN8kjSo/s1600/Spinner.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTnCw8cJ4-6OWwTaPXawAD0Ib8DuU2VIghhhJJRP9PCSj8Z1-vRMYiGg1_ENmBIE9bJex9MW2-BTZzhg4DoOiTXcMWXwmj7wS0mhaw4JWXgETT0yr3MZO3T0URO6wG2Bc31SlgmPSdvTJ8/s1600/bill+black.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTnCw8cJ4-6OWwTaPXawAD0Ib8DuU2VIghhhJJRP9PCSj8Z1-vRMYiGg1_ENmBIE9bJex9MW2-BTZzhg4DoOiTXcMWXwmj7wS0mhaw4JWXgETT0yr3MZO3T0URO6wG2Bc31SlgmPSdvTJ8/s1600/bill+black.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJXVa0rCA9dwEQPA8IxlLPxSqDyB-YydkOQZMCp-kEDYBLbst8b7A_dmskOPyg1WbwledZ2u3I9V4i8EW0HSUl6Y1WQgbMwO7fcK7CKNK4aGaqHx7nEgMSLrJBhQSFZ_94HsKsU9gUlvv/s1600/billboard.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJXVa0rCA9dwEQPA8IxlLPxSqDyB-YydkOQZMCp-kEDYBLbst8b7A_dmskOPyg1WbwledZ2u3I9V4i8EW0HSUl6Y1WQgbMwO7fcK7CKNK4aGaqHx7nEgMSLrJBhQSFZ_94HsKsU9gUlvv/s1600/billboard.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizG-iG9emABqzIcLvmvZ7LFdvmkaHjEtMzxKuGe3hUVzyvGhfwvund75hnjurJqc0mZOE9c4xVOzdDSvsLw2UHEBRUqqQ-_mOMsj0vD1owPLoNq3Knd46epspMiSGcZDUA49BVaWDzdEH2/s1600/blue.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizG-iG9emABqzIcLvmvZ7LFdvmkaHjEtMzxKuGe3hUVzyvGhfwvund75hnjurJqc0mZOE9c4xVOzdDSvsLw2UHEBRUqqQ-_mOMsj0vD1owPLoNq3Knd46epspMiSGcZDUA49BVaWDzdEH2/s1600/blue.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PQTUI2VswomtxfmKAOIoU9JJmiPgOx1DWmMBMrZMEItGz04YTylAewWNvEGQKFvRrEduI-irJLEUcAshVLkFpt1Qw_ATlN6Qpa6u1LhSSMpFEUfrW5aLfCjdQCBgQnnYwoTJl5TJJIMU/s1600/frame.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PQTUI2VswomtxfmKAOIoU9JJmiPgOx1DWmMBMrZMEItGz04YTylAewWNvEGQKFvRrEduI-irJLEUcAshVLkFpt1Qw_ATlN6Qpa6u1LhSSMpFEUfrW5aLfCjdQCBgQnnYwoTJl5TJJIMU/s1600/frame.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbHj5CWgs-jpRXvTSzo4Jq5sVhhfSWf8iJO2DeeD6IxxGOecN0pJL88UdZPKTMVqHeeeRyFGrb6lHIZzP2VkaqfmUwxlHnhM9-mSKihxPvRy1H92iLETROSD8H1pxRdW3rfvIjhOH1nrp_/s1600/simple.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbHj5CWgs-jpRXvTSzo4Jq5sVhhfSWf8iJO2DeeD6IxxGOecN0pJL88UdZPKTMVqHeeeRyFGrb6lHIZzP2VkaqfmUwxlHnhM9-mSKihxPvRy1H92iLETROSD8H1pxRdW3rfvIjhOH1nrp_/s1600/simple.gif" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOwRxhEQmsfNa0JAfZB1wrefmVWXXgeCaXoYwbpeLvYoDi1OHz1mnodxsd6aD-0B1sc4wNqGybE2YlyVnYHEUgSJFLfYNwq0QqgwVeiYJc7jeTNBuDdJmOCxoTCc6-Z0G22X891Gedy4X/s1600/wooden.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOwRxhEQmsfNa0JAfZB1wrefmVWXXgeCaXoYwbpeLvYoDi1OHz1mnodxsd6aD-0B1sc4wNqGybE2YlyVnYHEUgSJFLfYNwq0QqgwVeiYJc7jeTNBuDdJmOCxoTCc6-Z0G22X891Gedy4X/s1600/wooden.gif" /></a></div><br /><br /><br /><span style="font-family: Times,"Times New Roman",serif;"><span style="font-size: medium;">Hope You Like It.. </span></span><br /><div style="text-align: center;"><b><br /></b></div><div style="text-align: center;"><span style="color: #6aa84f;"><b>You May Also Looking for </b></span></div></div>

Attractive Stylish Animated 125 x 125 Banner Ads For Your Blog / Website

Attractive Stylish Animated 125 x 125 Banner Ads For Your Blog / Website The most beautiful collection of advertising banners for Blogger...

Animated 125x125 Advertise Here Banner Ads For Blogger Side Bar

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span style="color: #cc0000;"><span style="font-size: large;">Animated 125x125 Advertise Here Banner Ads For Blogger Side Bar</span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTb3q9DzVUliLXQVphCoOPpVoU2lye8OSiOp8Le0jokLP-nRuXsS4_FHe-o60fp27iyWTt1PbsfKU-JrpczmqM-SbtZorjSMiHe4OUUzD33B2bfGLYPnh51mlh_popnGbfYee6ctn38DnS/s1600/animated-125x125-Advertise-Here-Banner-ads-2014.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTb3q9DzVUliLXQVphCoOPpVoU2lye8OSiOp8Le0jokLP-nRuXsS4_FHe-o60fp27iyWTt1PbsfKU-JrpczmqM-SbtZorjSMiHe4OUUzD33B2bfGLYPnh51mlh_popnGbfYee6ctn38DnS/s1600/animated-125x125-Advertise-Here-Banner-ads-2014.gif" /></a></div><div style="text-align: center;"><span style="color: #6aa84f;"><b>How to Add 125 by 125 Banner Ads To Your Blogger/Blog spot/Website Right Sidebar</b></span></div><br />AdsBanners are used to display adverts on blogs and website. It goes a long way to attract visitors to your site or affiliate programmer, thereby increasing your site traffic. These ads can be customized into different shapes and styles.<br /><br /><div class="MsoNormal" style="text-align: justify;"></div><div class="MsoNormal" style="text-align: justify;"><span style="height: 6px; left: -144px; margin-left: 151px; margin-top: 50px; position: absolute; top: 91px; width: 1px; z-index: 251662336;"></span>Today, in this tutorial, I am going to show you how to add a 125x125 Ads Banner to the sidebar column of your blog or website. Below is a sample of a 125 by 125 Ads Banner display. </div><div class="MsoNormal" style="text-align: justify;"></div><div class="testbutton" style="text-align: center;"></div><div class="MsoNormal" style="text-align: justify;"></div><h4>How To Add Animated 125x125 Advertise Here Banner Ads In Blog</h4><br />Log in to your blog admin section. <br /><div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">2.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Go to Layout Menu.</div><div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">3.<span style="font: 7.0pt "Times New Roman";">       </span></span></span><span style="mso-spacerun: yes;"> </span>On the Sidebar Column, Click on Add Gadget. (A Pop-up window appears).</div><div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">4.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Scroll down and click on HTML/Java Script.</div><div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">5.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Copy the Code Below and Paste it there.</div><br /><div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;"><div align="center"><br /><table border="0"  cellpadding="2" cellspacing="6" width="265"bgcolor="#ffffff"><br /><tbody><tr><br /><td><center><a href="http://s2free.blogspot.com" rel="nofollow"><img border="0" alt="DESCRIPTION-OF-AD" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNauRi9EMIHoAeckvQrlybEbworxUqX9vO3OfajAyTLuvSL4FsnTC-5lk9_GH6K873wdYVyG3nX5QCdZCxOh4BAvMOdPlfUp8up4gWsMssWZfvzXvG62LoUqAZV8H3nu0DyFGAEmVM4JXA/s1600/Hand+Drawing.gif" height="125"/></a></center></td><br /><td><center><a href="http://s2free.blogspot.com" rel="nofollow"><img border="0" alt=" DESCRIPTION-OF-AD " width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhggaCC-BZ8JPNLTLrd_GIq0z0kqORfjzMaOT9_S4G_BCjlui5k7_52qqsiH5IrXH61yGVepEIhgO8lLQbJR6iMMuH8W6oT0DKb4OXOVjGl3mUsSkJ3A2h7p00x9U79kk8J_f8VZCvfl_Kd/s1600/Reading+Style.gif" height="125"/></a></center></td><br /></tr><br /><tr><br /><td><center><a href="http://s2free.blogspot.com" rel="nofollow"><img border="0" alt=" DESCRIPTION-OF-AD " width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQwhEFR87Mbn8P9p3YVxgaak8GDqhL4j2wTI6lv71ZYoGbqC-A-KHLogxmdpHG4lgVBoA4KJ34LG5-jqJ9-q_ibQxlnSDs3g5G1xe45s9Pc2H5wdpkJ4-YB6DN2pJHwrO4TkHJTrN8kjSo/s1600/Spinner.gif" height="125"/></a></center></td><br /><td><center><a href="http://s2free.blogspot.com" rel="nofollow"><img border="0" alt=" DESCRIPTION-OF-AD " width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbHj5CWgs-jpRXvTSzo4Jq5sVhhfSWf8iJO2DeeD6IxxGOecN0pJL88UdZPKTMVqHeeeRyFGrb6lHIZzP2VkaqfmUwxlHnhM9-mSKihxPvRy1H92iLETROSD8H1pxRdW3rfvIjhOH1nrp_/s1600/simple.gif" height="125"/></a></center></td><br /></tr><br /></tbody></table><br /></div></div><br /><b>Save Done...</b><br /><h3 align="justify" style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(40, 109, 164); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(40, 109, 164); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(40, 109, 164); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-style: solid; border-top-width: 1px; clear: both; color: #444444; font-weight: normal; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 7px; padding-right: 7px; padding-top: 3px;"><b><span style="color: blue;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Customization:</span></span></b></h3><div style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><span style="background-color: white; text-align: left;"></span></span></div><div style="background-color: white; text-align: justify;"><ul><span style="background-color: white; text-align: left;"><li><span style="font-family: Times,"Times New Roman",serif;"><span style="background-color: white;">Replace </span><span style="background-color: white;"> </span><b style="background-color: #f2f1f1; color: #0080ff; line-height: 14px; text-align: -webkit-auto;">ADVERTISER-URL-HERE</b><span style="background-color: white;"> </span><span style="background-color: white; text-align: center;"> with the website like of your advertiser.</span></span></li></span></ul><ul><span style="font-family: Times,"Times New Roman",serif;"><span style="background-color: white; text-align: left;"><li><span style="background-color: white; line-height: 14px; text-align: -webkit-auto;">Replace </span><span style="background-color: #f2f1f1; text-align: -webkit-auto;"><span style="line-height: 14px;"><b>DESCRIPTION-OF-AD </b></span></span><span style="background-color: white; line-height: 14px; text-align: -webkit-auto;">with  the advertiser's description it should consist of 5 to 6 words it will  appear when some will hover his mouse cursor over the advertisement  banner</span></li></span></span></ul><span style="font-family: Times,"Times New Roman",serif;"> </span><br /><ul><span style="font-family: Times,"Times New Roman",serif;"><span style="background-color: white; text-align: left;"><li><span style="background-color: white; text-align: -webkit-auto;"><span style="line-height: 14px;">If you want to increase the distance between ad slots,want to maintain width of ad slots then just adjust </span></span><span style="background-color: white; line-height: 14px; text-align: -webkit-auto;"><b><span style="color: blue;">width="265</span></b>" by default it is 265 you can reduce it according to your need </span></li></span></span></ul></div></div>

Animated 125x125 Advertise Here Banner Ads For Blogger Side Bar

Animated 125x125 Advertise Here Banner Ads For Blogger Side Bar How to Add 125 by 125 Banner Ads To Your Blogger/Blog spot/Website Right Sid...

Animated Falling Sun Flowers For Blogger And WordPress

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span style="color: #cc0000;"><span style="font-size: large;">Animated Falling Sun Flowers For Blogger And WordPress</span></span></div><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcxVoxFyCUvDMXbhvJl4OY2PJmRLQj9IFxqMF5pNUMZpYAbt6F9WU9vfZbPHh58iXZOayda3faATlBj3tv0jAtbx1dYvhNtQQXeDQ4igEodFZ5K3892zWDfuvQklVHNQJfwbaN54dOZPpm/s1600/animated-sunflower-widget-for-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcxVoxFyCUvDMXbhvJl4OY2PJmRLQj9IFxqMF5pNUMZpYAbt6F9WU9vfZbPHh58iXZOayda3faATlBj3tv0jAtbx1dYvhNtQQXeDQ4igEodFZ5K3892zWDfuvQklVHNQJfwbaN54dOZPpm/s200/animated-sunflower-widget-for-blogger.gif" width="143" /></a></div><div style="text-align: center;"><span style="color: #6aa84f;"><b><span style="font-family: Times,"Times New Roman",serif; font-size: small;">Add Animated Falling Flowers Effect on Blogger & WordPress Page</span></b></span></div><span style="font-size: small;"><br /></span><div style="text-align: justify;"><span style="font-family: Times,"Times New Roman",serif; font-size: small;">Spring is almost arrived and flowers will soon cover the planet earth. Why don't you also cover your entire blog with beautiful blossom? Sounds good? I know you will surely like it. I have brought a unique and beautiful widget for your blog which will greet your visitors by spreading hundreds of flowers over your blog. This isn't a widget and indeed a tiny script which you can add to your Blogger or WordPress blog within a minute. Flowers endlessly fall, thus your visitors will get surprised by this beautiful scene.</span><span style="font-size: small;"> I'm gifting this widget to all bloggers on the beautiful occasion of  spring. This widget isn't restricted to Blogger users only and you can  add this to any webpage.</span><br /><br /><div class="testbutton" style="text-align: center;"></div><br /><div style="text-align: left;"><h4><span style="font-family: Times,"Times New Roman",serif;"><span style="font-size: small;"> </span><span style="font-size: medium;"><span style="font-size: small;">How To Add Falling Spring Flowers to Blogger</span> </span></span></h4></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span style="font-family: Times,"Times New Roman",serif;">To add falling spring flowers to Blogger blog, perform the below simple steps:</span></div></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span style="font-family: Times,"Times New Roman",serif;">1. Sign to <a href="http://blogger.com/" target="_blank">Blogger dashboard</a> and select the blog to which you want to add <b>Falling Spring Flowers </b>widget</span></div><div style="text-align: justify;"><span style="font-family: Times,"Times New Roman",serif;">2. Go to <b>Template </b>section of your blog and edit its HTML </span></div><div style="text-align: justify;"><span style="font-family: Times,"Times New Roman",serif;">3. Find <b></head></b> in <span class="IL_AD" id="IL_AD5">HTML source</span>.</span><br /><span style="font-family: Times,"Times New Roman",serif;">4. <b>Ctrl+F</b> and paste following code just above </head></span></div><br /><div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;"><script src='http://supportivehandsjs.googlecode.com/files/springflower.js' type='text/<span class="IL_AD" id="IL_AD6">javascript</span>'><br /></script></div><br /><div style="text-align: justify;">5. Save your template. You are all done!</div><br /><h4 style="text-align: left;"><span style="font-size: small;">How To Add Falling Spring Flowers Widget to WordPress</span></h4><div id="ErrorYellow" style="text-align: justify;"><span style="font-size: x-small;">W<span style="font-size: x-small;">ordPress u<span style="font-size: x-small;">sers a<span style="font-size: x-small;">re naturall<span style="font-size: x-small;">y la<span style="font-size: x-small;">zy as they find and <span style="font-size: x-small;"><span style="font-size: x-small;">add different <span class="IL_AD" id="IL_AD1">plugins</span> to their blog with a <span class="IL_AD" id="IL_AD12">single</span> click only.</span></span></span></span></span></span></span></span> So they may face a little bit difficulty in adding these beautiful  falling flowers to their blogs. If you are an extreme basic user, then  please don't take risk by editing your template. A small mistake may  result in complete damage of your template. So before adding these  flowers to your WordPress blog, make it sure that you have understood the procedure completely.</div><div style="text-align: justify;"><br />To add <b>Falling Spring Flowers </b>to your WordPress blog, follow below steps:</div><div style="text-align: justify;"><br />1. <span class="IL_AD" id="IL_AD3">Log in</span> to your WordPress blog's dashboard (<span style="color: #0000ee;"><u>your blog</u></span>.com/WP-admin/)</div><div style="text-align: justify;">2. Now hover your mouse pointer on <b>Appearance </b>or click it and then click <b>Editor </b>below <b>Appearance</b></div><div style="text-align: justify;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq70gc3S3uCtFqNj1bW5n8o98RMuFlft7bdMRq8-egdxp9XNRUjiEFAZoGpLVPiiOfue_1Dabnm5SDKH0aPBmkcm3nZe-y9nDl__ji6lYGS4hl90E7VHMUReNQuihtcizNSsXLwIYVbmQh/s1600/falling-spring-widget1-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq70gc3S3uCtFqNj1bW5n8o98RMuFlft7bdMRq8-egdxp9XNRUjiEFAZoGpLVPiiOfue_1Dabnm5SDKH0aPBmkcm3nZe-y9nDl__ji6lYGS4hl90E7VHMUReNQuihtcizNSsXLwIYVbmQh/s1600/falling-spring-widget1-blogger.jpg" /></a></div><div style="text-align: justify;"></div><div style="text-align: justify;"></div><div style="text-align: justify;"><div style="text-align: justify;"><br />3. You will see the template editor. Look for header.php (<b>Header</b>) on right sidebar or find it by pressing <b>Ctrl+F</b></div><div style="text-align: justify;">4. After finding header.php (<b>Header</b>), click Header. header.php will open and you can now add <span class="IL_AD" id="IL_AD10">the script</span> to your template</div><div style="text-align: justify;">5. To add the script, find <b></head></b> by pressing <b> </b></div><div style="text-align: justify;">6.<b> Ctrl+F </b>again and paste below code just above </head></div><div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;"><script src='http://supportivehandsjs.googlecode.com/files/springflower.js' type='text/javascript'><br /></script></div><div style="text-align: justify;">7. After pasting above script code, update your file by scrolling down and clicking the <b>Update File </b>button and close the editor<br /><br /><h4><b>Do you have a general website?</b></h4><div style="text-align: justify;">Don't worry if you have a general website instead of any CMS. Indeed it  is much easier to add this effect to general websites as compared to any  CMS. Simply edit the page to which you want to add these flowers and  paste earlier provided script just after <head> and save your  page. You are all done!<b> </b> </div><br />You have successfully added the falling spring flowers to your <span class="IL_AD" id="IL_AD7">WordPress blog</span>. Enjoy!</div></div></div>

Animated Falling Sun Flowers For Blogger And WordPress

Animated Falling Sun Flowers For Blogger And WordPress Add Animated Falling Flowers Effect on Blogger & WordPress Page Spring is almost ...