Today i sharng a good social media widget to your blogger. it is a hidden widget. When visitors mouse over on this widget it slide out from side. If we move mouse from this widget, It automatic hide in blogger body. If you want to install in your blogger. Follow this post….
Log in to Blogger account
Are you happy?….. Do you like this blog ….. comment below………………..
Log in to Blogger account
- Select Templates
- Click on Edit HTML
- Tick On Expand Widget Templates.
- Find (Ctrl + F) ]]></b:skin>
- Copy the code shown below and paste Before/Above it.
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:246px;height: 353px;position: fixed;right: -250px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;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: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#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: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
- Again Find (CTRL+F) </head> tag.
- Now Copy below code and paste before It.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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: -200}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 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: -203}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
});
</script>
- Save Templates.
- Then go to Layout
- Now Click On Add Gadget Button.
- Select HTML/Javascript option from given list.
- Copy below code and paste it .
<div id="on"><div id="facebook_right"style="top:8%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirlOCx52t8JHNKcUP01OYYFHngkN_okCJxjrNhb2Rb75rVdu-nf6tcOK9MfKnSzRhp3N0tVnnXPrZQhm0hfFBFZucqC1yXtL2D6geNBzbUymLO67Ku5zPhCAzPLuG60mpJjmTg-AMF9w/s1600/Facebook.png"alt=""/><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYOUR-FACEBOOK-FANPAGE-LINK-HERE&locale=en_GB&width=200&connections=9&stream=&header=false&show_faces=0&height=356"scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right"style="top:25%;"><div id="twitter_div"><img id="twitter_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Lq9cvTTOpZlIBJwrS0Od_EgcbsVbkm9-g22lWWbnFNNB7bXjRPLvVOBDxsRdlbUmiqNH3a0FdiUfTCvZjBJ3mA3prnk7lTgT_JXBMjxqQKoacNHXibjWlU9LV9wrd7eHiNawsps50g/s1600/Twitter.png"/><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version:2,type:'profile',rpp:4,interval:1000,width:246,height:265,theme:{shell:{background:'#63BEFD',color:'#FFF'},tweets:{background:'#FFF',color:'#000',links:'#47a61e'}},features:{loop:false,live:true,scrollbar:false,hashtags:false,timestamp:true,avatars:true,behavior:'all'}}).render().setUser('YOUR-TWITTER-ID-HERE').start();</script></div></div></div><div id="on"><div id="google_plus_right"style="top:42%;"><div id="google_plus_div"><img id="google_plus_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWd6LmN7QGwMyEaS3VBXe7W7Th_QZSrxMrK0p4dKWLKLLcSjke3UeR82SPR3qS8E3Ul8u1eePgZpf-xRYCN0DLgonv28KjSit94uD-iBLXkuxyE1LRh9xifBc-Lv-Jr1Es-yx7hLt1Q/s1600/Google+Plus.png"/><div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0';pid='102256859586166648016';</script><script type="text/javascript"src="http://widgetsplus.com/google_plus_widget.js"></script></div></div></div></div><div id="on"><div id="feedburner_right"style="top:59%;"><div id="knfeedburner_div"><center><br />▼▼▼▼▼▼▼▼▼▼▼▼<h4 style="color:#F66303;">You Can Also Receive Free E-Mail Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID-HERE','popupwindow','scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10"class="enteryouremail"name="email"value="Enter Your E-Mail Here..."onblur="if (this.value == ''){this.value = 'Enter Your E-Mail Here...'}"onfocus="if (this.value == 'Enter Your E-Mail Here...'){this.value = ''}"type="text"/><input value="FEEDNAME-HERE"name="uri"type="hidden"/><input value="Submit"class="submitbutton"type="submit"/></form></center><img id="feedburner_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8KrMgEczQgOr6Yj0MgWwyqR59w1-s0whE7HKNdABU80LLE-gTptIe7yy0cujtGvb11BXFYyfFpY6AB_ayQTrcRjjizVtIRgMiC9iqyifnExZ2BMVFVq7pHEP62J7g2xt2v3ZpvCrHcA/s1600/Subscribe.png"/></div></div></div><div id="on"><div id="youtube_right"style="top:76%;"><div id="youtube_div"><img id="youtube_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3vcd3ps5kc0-w6nQVrNXX2SpIoYfc3BpdpTh0seSvvU7SaFOigUprrkTj_mFxPEdBaYn2xPaXlfrpYRJTn1JJ-4kIHKfndCm-T4wWJuklH1Y2sYma-VDtRjBoIrHygRVw7ZCxlLxJg/s1600/YouTube.png "/><div style="float:left;margin:1px 0px 0px 2px;"><iframe src=http://www.youtube.com/subscribe_widget?p=YOUTUBE-ID-HERE ="height:105px;width:300px;border:0;"scrolling="no"frameBorder="0"></iframe>
</div></div></div>
</div>
- Save it.
Are you happy?….. Do you like this blog ….. comment below………………..
0 comments:
Post a Comment