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

  • He known as Keerthish Kodali, is the founder and the brain behind MyBlogStory.com. He provides high quality tutorials about latest web design and technology trends. He loves music and is very friendly natured . He loves to see world with No borders and always wishes to love and be loved by you all ~~~ Read More


    Post a Comment

    Back to Top