Indiabloggerbuzz

Facebook follower

Floating Social Bookmarking Slide Out Widget for Blogger





Turorial to add Social Bookmarking slide out widget
Before starting a slide out widget first you should know what is social bookmarking?
Social bookmarking is the practice of saving bookmarks to a Public Web site and “tagging” them with keywords. Bookmarking, on the other hand, is the practice of saving the address of a Web site you wish to visit in the
future on your computer. To create a collection of social bookmarks, you register with a social bookmarking site, which lets you store bookmarks, add tags of your choice, and designate individual bookmarks as public or

private. Some sites periodically verify that bookmarks still work, notifying users when a URL no longer functions. Visitors to social bookmarking sites can search for resources by keyword, person, or popularity and see the public bookmarks, tags, and classification schemes that registered users have created and saved.


The web pages we bookmarked at social bookmarking sites is considered as a quality backlink in the eyes of search engines.
And we all know that the quality backlinks helps us to increase blog traffic and Google Page Rank. That’s why SEO professionals include SB in their search engine optimization practices.I give u way of inserting three unique and beautiful Social Bookmarking slider widget.




Benefits of Social Bookmarking

  • Traffic Generator - any of these popular bookmarking sites that are linking to your site will gain you traffic if the article is interesting enough for readers to click through
  • Inbound Links - Submitting a webpage into the directory will give that page a link and possible PR from the article website, depending on their setup. Some websites allow you to link using keywords which is extra helpful for your off page optimisation
  • Brand awareness - Especially important for start-up's, you will need to ensure that your company name is all over the internet and this is a great way of doing it.
  • Free SEO Technique - With everything changing constantly and SEO projects getting more expensive by the day, anything SEO is a definate plus! It is another box to check and is useful for search marketing so don't think that because it's free it's useless- that's not the case
 

Plus Button Slider Social Bookmarking Widget in Blogger Blog?



I will show you how to add slide out social bookmarking widget to blogger  blogs. and I am glad to announce that today I have another Social Bookmarking Widget for you but this one is special.

Plus Button Slider Social Bookmarking Widget



Social bookmarking gadget is very important for your blog. But remember Social bookmarking gadgets can be only useful when you have some quality content because without quality content your bookmarking gadget is useless. When someone likes your posts or article he/she will bookmark it to his social media through your gadget and all of his friends will see the link of your article so in that kind of way your blog gets heavy traffic.


How to Add Floating Social Bookmarking Slide Out Widget to Blogger

First of all backup your template then follow the following steps.

1. Go to Blogger Dashboard >> Template >> Edit HTML.

2. Search for </head> and paste the following code just above it.

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

4. Now search for </body> and paste the following code just above it.
<!-- for-android-les.blogspot.com slideout widget : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style">
    <a class="addthis_button_more">Share</a>
    <ul>
        <li><a class="addthis_button_preferred_1"></a></li>
        <li><a class="addthis_button_preferred_2"></a></li>
        <li><a class="addthis_button_preferred_3"></a></li>
        <li><a class="addthis_button_preferred_4"></a></li>
    </ul>
</div>
<!-- for-android-les.blogspot.com slideout widget : END -->


5. Save your template.

Add A Slide Out Egg Social Bookmarking Widget In Blogger 

 Slide Out Egg Social Bookmarking Widget

This Widget is floats with the scroll of your page. It’s shapes like an egg and when you click on it, it will appear containing different social media icons, so you can select and bookmark it to the social media of your own appear containing different social media icon.  


How It Works ?


This Widget is floats with the scroll of your page. It’s shapes like an egg and when you click on it, it will appear containing different social media icons, so you can select and bookmark it to the social media of your own appear containing different social media icon. below the following step to add a egg slide out floating  widget.




1. Go to Blogger Dashboard >> Template >> Edit HTML.

2. Search for </head> and paste the following code just above it.
<!-- Slide Out Egg Social Bookmarking Widget Starts -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- Slide Out Egg Social Bookmarking Widget Ends -->



3.Now inside the HTML EDITOR, Press CTRL+F and search for </body> and paste the following code just above it.


<!-- Slide Out Egg Social Bookmarking Widget Starts -->
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;
,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});
</script>
<!-- Slide Out Egg Social Bookmarking Widget Ends -->
4. Save your template.


How to Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect?

Pop out social bookmarking widget with smooth jquery hover effect
1. Go to Blogger Dashboard >> Template >> Edit HTML.

2. Search for </head> and paste the following code just above it.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 

3. Now click Save and go to Layout > Add Gadget > Select HTML/Java Script

Copy paste the following Code.
  
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".btntslidebox").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-70"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.btntslidebox{    background: url("http://4.bp.blogspot.com/-q4SqFaTkiTs/TyO_7WhbQYI/AAAAAAAAAjE/n6UDCpWQ3Wo/s1600/tab_left_vertical.png") no-repeat scroll right top transparent !important;    display: block;    float: left;    height: auto;    padding: 0 40px 0 5px;    width: 65px;    z-index: 99999;    position:fixed;    left:-70px;    top:20%;}
.btntslidebox div{    border:none;    position:relative;    display:block;}
#floatingbuttons{    background: #fff;    border-radius: 5px 5px 5px 5px;    border: 1px solid #CCCCCC;    float:left;    padding:0 0 3px 0;   bottom:15%;    z-index:399;}
#floatingbuttons .floatbutton{    float:left;    clear:both;    margin:5px 4px 0 4px;}
.addbuttons{    clear:both;    text-align:center;    padding-top:5px;}
.addbuttons a span.getfloat, .addbuttons a span.sharebuttons{    color:#000;    background:none;    font-family:arial, sans-serif;    display:block;    font-size:9px;    font-weight:bold;text-decoration:none;    line-height:11px;}
.addbuttons a:hover span{    color:#fff;    background:none;    text-decoration:underline;}
</style>
<div class="btntslidebox" style="">
 <div>
<div id='floatingbuttons' title="Share this post!">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='stumbleupon'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='floatbutton' id='digg'>
<a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class="addbuttons">
<a href="http://techethix.blogspot.com/2013/07/pop-out-share-widget-blogger.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get This</span></a> </div>
</div>
</div>
</div>


  4. Save your template.

 Now This Tutorial is finished and after a week we will bring you more tutorial please give your comment and suggestion of this Article good day friends.

Reactions:

0 comments:

Post a Comment

Chandan Sharma – Mainstream blogger who brings out all the hottest news, tips and strategies about blogging, social media and SEO.Chandan Sharma can help you and specially new comers in Web Development, Make Money, Seo and Online Marketing Money and So on...