3 in 1 Animated Social Bookmarking widgets for websites and Blogs | My Blog Story My Blog Story

Wednesday, 27 August 2014

3 in 1 Animated Social Bookmarking widgets for websites and Blogs

Leave a Comment

3 in 1 Animated Social Bookmarking widget

widgets for websites

Hi Friends , today I gonna tell you how to add 3 in 1 social bookmarking widget for your website or blog.This widget shows 3 social networks Facebook , Google pulse and twitter with a colorful stylish look .
And also animation included , this widget pops out when ever visitor scrolls down your page and goes off automatically if scrolled top of page .

You can have the demo preview in the same page you are watching now . Social followers will increase the traffic as well as the trust among the visitors landed on your page . It also increases the page popularity and helpful for better SEO  .

After all adding this widget in my page , my Facebook page fans getting increased day by day and I observed it . What looking for , just check out the steps in adding it to your blog .

Add 3 in 1 Animated Social Bookmarking widgets for websites

Let get into the steps adding social followers widget

  • Go to blogger >> layout >> and click on add widget button 
  • Click on Add HTML / Java Script 
  • Copy the below code and past it in the body of the ' Add HTML / Java Script ' widget . 

<!-- Social bookmarking widget by www.Myblogstory.com -->
#socialslide{background: rgb(41, 40, 40) url(http://3.bp.blogspot.com/-FZRJ9cS-Mkk/UXpZC0CGyrI/AAAAAAAAAgg/tnE5hftHXuM/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
<!-- Social bookmarking widget by www.myblogstory.com -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmyblogstory&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
<div style="float:left; margin:15px;"><a href="https://twitter.com/myblogstorys" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @myblogstorys</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div><div class='clear'></div>
<!-- Social bookmarking widget by www.Myblogstory.com -->

  • Don't Edit any thing other than the highlighted yellow colored content which can be replaced with your Facebook fan page name and other one is twitter username. 
  • Now save it and you are done 
Enjoy the animated colorful social bookmark widget :)

Thankq one and all for visiting our blog . Keep visiting :)

Get Free Blogging updates in your Email

About Author

  • KEERTHISH KODALI (Sunny) is the founder of www.MyBlogStory.com . He is very friendly guy ,who wants whole world to be united without any border. He is passionate about blogging. He is a DevOps engineer, Systems Engineer, Data Center Analyst , Professional Blogger and an addicted Web Designer. Ofcourse a Stock Traders too ~~~ Read More


    Post a comment