After a little break, i think i should come back with something unique, so i will will be sharing with how you can add a five different social media widget to your blog/site. This widget comprises of facebook like box, twitter follower box, Google plus, Youtube and RSS feed subscribe box, and this widget will slide out smoothly when you place your cursor on any of the widget, due to the jQuery effect that is included.
Follow the simple procedure below on how you can use this five stylish widgets to spice up your blog/site.
How To Add The Widget To Your Blog
STEP 1
- Login to your blogger dashboard
- Click on "Design" > "Edit HTML" > back up your template
- Use ctrl F to find </head> and paste the following code above/before </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<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: -249}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 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: -323}, 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); });
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); });
});
</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: -249}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 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: -323}, 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); });
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); });
});
</script>
- Click "SAVE TEMPLATE"
Update: 16/09/2012
Please, those of you having problem with google plus, i have got the problem fixed, kindly recopy the code in STEP 2, and sorry for any inconvenience this may have caused you. Thanks!
Please, those of you having problem with google plus, i have got the problem fixed, kindly recopy the code in STEP 2, and sorry for any inconvenience this may have caused you. Thanks!
STEP 2
- Go to "Design" > "Page Elements" > "Add a Gadget"
- Choose "HTML/JavaScript" from the list of the gadget that appear in the pop-up window
- Copy and paste the code below in the content box leaving the title box blank.
<style>
img, a { border: 0; }
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:245px;height: 260px;overflow: hidden;}
#twitter_div {width:260px;height: 238px;overflow: hidden;}
#google_plus_div {width:320px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#youtube_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}
#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:260px;height: 238px;position: fixed;right: -264px;}
#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:320px;height: 143px;position: fixed;right: -323px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10002;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: 100px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10001;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;}
</style>
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_rCJjakTK2oa-hZZDqN9o8iiYbu8z-lJmWCIoHskYtV0zzL0OxgbA0W6UORUcIbuRkv39da1Wp4QG4BLu2sUCY6rxktx76gJrpuPW40e9E1NSUTlHKN4r4uXSGUrr52XlilFRLmYlA/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FRealcomBiz&locale=en_GB&width=245&connections=9&stream=&header=false&show_faces=0&height=260" scrolling="no"></iframe>
</div>
</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/AVvXsEjNgxPWE_3cpuwGl0gQbNhubqycd9-4312GycsniLtl5GYM22MFbvl9j_ILHSe78Bw72FPy9K6zMe5wKfOgcZ06p1rjHgTM3psIvaNcjsNv_50iYGWtoicx26T-ADZsafgXEDGomSeIrg/s1600/Twitter.png" />
<script type="text/javascript" src="http://script-ot.googlecode.com/svn/twitterbox.js"></script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("RealcomBiz");</script>
</div>
</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/AVvXsEgYZjMAgtLjg12vkQmkHUgDENmle5rMW1AMGiFCo-cDpRFvvpvtgzk51vZevXOeBPeyDEqZRfn4AO6-y17Y8nazKXo2Mi6c7jqojJzrRWfKxaD3g7XEnF0I_fz7dIFudCjefbMAfeR13w/s1600/Google+Plus.png"/>
<div style="float:left;margin:1px 0px 0px 2px;">
<g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
</div>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihWpyE43Op273kfasDnJ_bz2R-3CIRRbQLrMyxtY9BHx8a2KIsRVOOT2UWTrude9fYJIfO-JsGFrXHESCUQKY33wypoMZxB1vI9qyZ9ZmWpuwHDnpao10hlC03aQCu76KK0DvtrDqjcg/s1600/YouTube.png" />
<div style="float:left;margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=RealcomBiz style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 76%;">
<div id="knfeedburner_div">
<center><br/>
<h4 style="color:#F66303;">Subscribe And Get 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=realcombiz', '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="RealcomBiz" 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/AVvXsEipnXEAAMZQ3zmts3HD_negSBctc7JUXvt6kG3DnwxAYMTOzzs95x4rRe2isIcchzRdiLgJX6T1hKiEYit5Zyaoa9IdDK2yu1r00NUbUMsccWCbDQH45w6krXqMCDOLiTu3zx7hwqTypQ/s1600/Subscribe.png" />
</div>
</div>
</div>
img, a { border: 0; }
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:245px;height: 260px;overflow: hidden;}
#twitter_div {width:260px;height: 238px;overflow: hidden;}
#google_plus_div {width:320px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#youtube_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}
#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:260px;height: 238px;position: fixed;right: -264px;}
#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:320px;height: 143px;position: fixed;right: -323px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10002;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: 100px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10001;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;}
</style>
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_rCJjakTK2oa-hZZDqN9o8iiYbu8z-lJmWCIoHskYtV0zzL0OxgbA0W6UORUcIbuRkv39da1Wp4QG4BLu2sUCY6rxktx76gJrpuPW40e9E1NSUTlHKN4r4uXSGUrr52XlilFRLmYlA/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FRealcomBiz&locale=en_GB&width=245&connections=9&stream=&header=false&show_faces=0&height=260" scrolling="no"></iframe>
</div>
</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/AVvXsEjNgxPWE_3cpuwGl0gQbNhubqycd9-4312GycsniLtl5GYM22MFbvl9j_ILHSe78Bw72FPy9K6zMe5wKfOgcZ06p1rjHgTM3psIvaNcjsNv_50iYGWtoicx26T-ADZsafgXEDGomSeIrg/s1600/Twitter.png" />
<script type="text/javascript" src="http://script-ot.googlecode.com/svn/twitterbox.js"></script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("RealcomBiz");</script>
</div>
</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/AVvXsEgYZjMAgtLjg12vkQmkHUgDENmle5rMW1AMGiFCo-cDpRFvvpvtgzk51vZevXOeBPeyDEqZRfn4AO6-y17Y8nazKXo2Mi6c7jqojJzrRWfKxaD3g7XEnF0I_fz7dIFudCjefbMAfeR13w/s1600/Google+Plus.png"/>
<div style="float:left;margin:1px 0px 0px 2px;">
<g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
</div>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihWpyE43Op273kfasDnJ_bz2R-3CIRRbQLrMyxtY9BHx8a2KIsRVOOT2UWTrude9fYJIfO-JsGFrXHESCUQKY33wypoMZxB1vI9qyZ9ZmWpuwHDnpao10hlC03aQCu76KK0DvtrDqjcg/s1600/YouTube.png" />
<div style="float:left;margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=RealcomBiz style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 76%;">
<div id="knfeedburner_div">
<center><br/>
<h4 style="color:#F66303;">Subscribe And Get 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=realcombiz', '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="RealcomBiz" 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/AVvXsEipnXEAAMZQ3zmts3HD_negSBctc7JUXvt6kG3DnwxAYMTOzzs95x4rRe2isIcchzRdiLgJX6T1hKiEYit5Zyaoa9IdDK2yu1r00NUbUMsccWCbDQH45w6krXqMCDOLiTu3zx7hwqTypQ/s1600/Subscribe.png" />
</div>
</div>
</div>
- Replace RealcomBiz with your facebook fan page username
- Replace RealcomBiz with your twitter username
- Replace RealcomBiz with your youtube username
- Replace http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz with your feedburner url
- Replace Realcombiz with your feedburner username
- Click "Save" when you are through with your editing
That's all on how to add a 5 stylish social slide out widget to your blog/site and if you enjoy this article, take few seconds to share it and subscribe to this blog now for you to stay updated with our latest articles via email.
Subscribe For Free Updates!
*Please confirm the email sent to your inbox after clicking "Sign Up!".
Subscribe RSS
Follow us on Facebook
Follow us on Twitter
Circle us on Google+
Connect on LinkedIn
Follow us on Pinterest
Connect on StumbleUpon
TEngo problemas en la parte del facebook y el G+. He remplazado la seccion indicada con la url de mi perfil en facebook, sin la url y solamente con el username y nada que funciona. Igual pasa con el ID de G+. Tengo bastante tiempo con la cuenta de googleplus pero nada de nada. cualquier sugerencia te lo agradeceria.
ReplyDeleteReplace only ''Realcombiz'' with your facebook fanpage username and for the google plus, it works with there old profile, but am still working on a fix for it, i will keep you updated when am done.
DeleteI want to add this gadget to left side plz help me what to do ?
ReplyDeletebro, itz not working nd olso nt removing plz give me ans how 2 remove it
ReplyDeletemy blog - http://pctrickery.blogspot.com/
It means you have made a mistake somewhere, is it not showing at all? Try and restore your backup and try again.
DeleteThis comment has been removed by the author.
ReplyDeletenice working
ReplyDeleteHi Ridwan,
ReplyDeleteI think i will use into my site
thank before for share and I like its
what if i dont want youtube? i want only the rest 4, alos can u plz tell me insted if google +1 if i want google followers there then what to do?
ReplyDeletehttp://ultimatesqs.blogspot.in/
Hi,
ReplyDeleteNice one. I would like to add it to my website. Can you please tell me which files to edit. Its an opencart site
i want it to left help
ReplyDeleteSuper fantastic! I appreciate it. Social media marketing is always evolving, and Pinterest was just an idea a year and a half ago. Just focus on getting the key pillars down and you should have a good framework for understanding and utilizing social media for your business. Cheers!
ReplyDelete*************************
visit me...
The twitter slider is still blue, the content cannot be seen...
ReplyDeleteCheck the issues in my site-
http://androidappsandgameshacking.blogspot.com/
this one works for my blog, others don't i think manual copy and pasting codes does it, you are good on it, just one question, why does the twitter only shows a blue box ?
ReplyDeleteanyways thanks a lot
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteHighly descriptive article. Everything is very open with a really clear explanation of
ReplyDeletethe challenges. It was really informative. Your website
is very useful. Thank you for sharing!
website design
twitter slider still shows blank blue .its not working even though I changed it into my own user name.
ReplyDeleteconfirm that; twitter slider still shows blank blue.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis is an awesome widget. But I wanted to use this widget to pop up on my blogger. Can you help how to pop up this widget, if possible with timer.
ReplyDeleteBlogger Tips and Tricks
Wow amazing widget. I will add it on my blog. Now my blog look great. Thanks buddy for that great tutorials
ReplyDeleteTechshoutme
Just saying thanks wouldn’t just be enough, for the fantastic fluency in your writing.Six Forty One
ReplyDeleteI suppose this info is completely unique. search engine optimization company new york city
ReplyDeleteThis widget comprises of facebook like box, twitter follower box, Google plus, Youtube and RSS feed subscribe box, onpage analysis
ReplyDeletethjis is awsome post , twitter and google plus are not working
ReplyDeleteplz guide
thanks ranjit
Website Design Patna
Website Design Company in Patna
Wow, Excellent post. This article is really very interesting and effective. I think its must be helpful for us. Thanks for sharing your informative. If you update your facebook account, please visit Buy Google plus Followers
ReplyDeleteI am satisfied that you shared this helpful information with us. Please stay us up to date like this. Thanks for sharing. Buy Google Plus Share
ReplyDeleteGreetings dear,many many thanks for sharing such wonderful information with us.I am eagerly waiting for your next post.Kindly please visit buy real likes
ReplyDeletesite for social information.
I must admit I have popped in a read a good number of your blogs but I have no idea how to post a response over there, so I'll tell you now how good you are at describing the stuff your at - I must admit I find it insightful to read your blogging. Keep up the good work. If you want to know more about a sites, please visit our websitebuy twitter followers.
ReplyDeleteI'll give you a pat on the back just for the sheer effort in screencapping all those blogs.Giving a blog talk to beginner bloggers in the not-too-distant future, I'll be pointing people in the direction of your efforts. Nicely put together dude.Here is our small effort about buy instagram followers
ReplyDeleteFantastic, I'm enjoyed read this post, Every time search this type of post. Really I enjoyed. This article is really very interesting and effective. I think its must be helpful for us. Thanks for sharing your informative. Buy Twitter Followers
ReplyDeleteHi,
ReplyDeleteI am trying to implement this on squarespace. I have the widgets in place however they are not animating. Any ideas? Any help would be greatly appreciated. Thanks!
Hi,
ReplyDeleteI am trying to implement this on squarespace. I have the widgets in place however they are not animating. Any ideas? Any help would be greatly appreciated. Thanks!
Maybe you should try to buy Youtube views with credit card and quickly solve your fb marketing.
DeleteI constantly emailed this site post page to all my friends, because if prefer to read it then my all friends will too.
ReplyDeletebuy likes
Remarkable blog! I have no words to praise, it has really allured me. how much is my life insurance policy worth
ReplyDeleteThis is a very instructional blog post and definitely a bookmark. Also wanted to ask you all to visit our site about buy Instagram followers with credit card
Delete
ReplyDeleteSnap up cheap and buy genuine followers on Instagram ..
f you’re seeing any success with visual marketing on how to get more likes on instagram the other platforms you use, imagine the capabilities you have on a site dedicated solely to visual marketing.
ReplyDelete
ReplyDeleteThe share your really gives us excitement. Thanks for your sharing. If you feel tired at work or study try to participate in our games to bring the most exciting feeling. Thank you!
hotmail login | red ball