NAUKRI TUTS: Social media 5-in-1 Slider bar for blogger

Breaking News

Social media 5-in-1 Slider bar for blogger

1) Login to Blogger account
2) Go to Layout
3) Go to Add gadget
4) Go to HTML/Javascript
5) Copy the below code and paste it inside the content box and save it.

<style> img, a { border: 0; } #on { visibility: visible; } #off { visibility: hidden; } #facebook_div { width: 235px; height: 236px; overflow: hidden; } #twitter_div { width: 246px; height: 240px; overflow: hidden; } #google_plus_div { width: 290px; height: 250px; overflow: hidden; margin-left: 5px; margin-top: 1px; } #tb911feedburner_div { width: 300px; height: 120px; overflow: hidden; margin-top: 5px; margin-left: -4px; } #tb911_div { width: 300px; height: 97px; overflow: hidden; } /* right side style */ #facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; right: -239px; } #facebook_right img { position: absolute; top: -2px; left: -35px; } #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; left: -2px; top: -3px; } #twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 250px; height: 240px; position: fixed; right: -254px; } #twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; right: -294px; } #google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -304px; } #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #tb911_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #tb911_right img { position: absolute; top: -2px; left: -101px; } /* left side style */ #facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; left: -239px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; right: -2px; top: -3px; } #twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 240px; position: fixed; left: -254px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; } #google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: 2px solid #0056a0; width: 290px; height: 120px; position: fixed; left: -294px; } #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -304px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #tb911_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #tb911_left img { position: absolute; top: -2px; right: -101px; } .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0; } .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px; } .submitbutton { background: #FF8000; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } #youtube_right { z-index: 10001; background-color: #fefefe; border:2px solid #ff0000; border-top:2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right:2px solid #5b5b5b; border-left: hidden; width:301px; height: 106px; position: fixed; right: -304px; } #youtube_right_img { position: absolute; top: -2px; left: -33px; border: </style> <a rel="dofollow" title="blogger widgets" href="http://theblogger911.blogspot.com" target="_blank"><img border="0" src="http://bitly.com/24workpng1" style="margin-right:0px;" alt="widgets"/></a>

<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#facebook_right").stop( true, false).animate( { right: -239 }, 500); }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 500); }); jQuery("#google_plus_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop( true, false).animate( { right: -294 }, 500); }); jQuery("#feedburner_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop( true, false).animate( { right: -304 }, 500); }); jQuery("#youtube_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#youtube_right").stop( true, false).animate( { right: -304 }, 500); }); }); </script> </span> </b> <br /> <div id="on"> <div id="facebook_right" style="top: 8%;"> <div id="facebook_div"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jYbyvo5102TiubBuc_uAKDKjR78JFIVQJK-hNq7Sz1S_a7Ube7hXCg8LvtZ2UV1ZHcMBBU3dYCiWRXWudOk1UnXX6QFQOJBw_6y76h28mGdEsz6GQH2ezzJajpUlHSb4sn_OYfj8CkBb/s1600/NBTfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftheblogger911&width=250&height=250&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 24%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpMrK2R8XbMK80zIAldkVPxQ6H_Rc9PPtO24JOn7dAQtSHdyITuJkIUsthHNaRwTLpB1ZhRWqBrf0jukYl1N3-mPsc5yO0IWWPX5AMPB0MK0XM4ctHnhnbvT4SY4IyyMR5zfpqYR4x4Dp/s1600/NBTtwitter_right.png" /> <div style="width:248px;font-size:8px;text-align:right;"> <script type="text/javascript"> document.write(unescape( "%3Cscript src='http://twitterforweb.com/twitterbox.js?username=tipsandtricks8&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E" )); </script> <a href="http://theblogger911.blogspot.com" target="_blank"></a> </div> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 41%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgQ4biWfIcSGxLoqMEAVJ3pWOLz0eM8U8qZ_-JW9VODrHyIXvb1FQ1w5YxvErGa5ntAPhRi9sGAhpRv8z4_U9oVqL4Tuy-ZGPp1zSXewl1j6NLXgixqZS_tCXbgP459m5nLFgMdtmBE1k/s1600/NBTgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"> <a href='http://theblogger911.blogspot.com.com'> <img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPxFJWrDgkepmgHaC5cG5LoaedeozMa_c5OE_8hrswsIiNGHN9QmHh_dbMdCzUBSgs1R5eGblghquF5aJrPGA0VaeLEAtDnspDwm1NzqpRnJ7sZUMKMDemLkA3oD-cPv0Q-qv7JrQfVNUK/s1600/best+blogger+tips.png' /> </a> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/110197477470299124823" data-source="blogger:blog:followers" data-width="270"></div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'en' }; var po = document.createElement( 'script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName( 'script')[0]; s.parentNode.insertBefore( po, s); })(); </script> </div> </div> </div> <div id="on"> <div id="feedburner_right" style="top: 75%;"> <div id="tb911feedburner_div"> <center> <h4 style="color: #f66303;">You can also receive Free Email Updates:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogger911', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..." /> <input name="uri" type="hidden" value="blogger911" /> <input class="submitbutton" type="submit" value="Submit" /> </form> </center> <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnYAEtKrVxyy0pDNVxoAbL8erUcFFEqyWS7ccgzqn797H3o8Pwa9jyO2QaTX9o0OG0Az-USBk57ghp6OxFAypFSgsG_ygwCe5MSBJaqF343GxnqsMBDzhrnwJ3bXG1hxlrAEPayr0hr_L/s1600/NBTfeedburner_right.png" /> <div style="float: right; padding: 20px; margin: 0px;"> <span style="font-size:10px;">Widget by <a href="http://theblogger911.blogspot.com/">theblogger911</a> </span> <span style="font-size:8px;"></span> </div> </div> </div> <div id="on"> <div id="youtube_right" style="top:58%;"> <div id="youtube_div"> <img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBSItR6XFq_ji4JLJ4VgzXabk1v_W12FMnVwJyMt4JLuXuAdArCBaX-9fOw7gIIELIRpQIeW9-06V25fmDim6OKkKQtCHaGOPPuLNsBsEM4QH1YVpPXrAA6vkfy5Pr84XPLMWoMTZYz8/s1600/NBTyoutube_right.png " /> <div style="float:left;margin:1px 0px 0px 2px;"> <iframe src=http://www.youtube.com/subscribe_widget?p=theblogger911 style="height:105px;width:300px;border:0;" scrolling="no" frameBorder="0"></iframe> </div> </div> </div> </div>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Designed By Blogger Templates