Vertical Social Share Bookmarking Widget For blogger . ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

Vertical Social Share Bookmarking Widget For blogger .

Follow simple and Easy step to adding this widget to your blog ---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and Edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
   <script type='text/javascript'>
   $(document).ready(function() {
    $('#social_nav_vertical li a').hover(function() { 
    $(this).stop().animate({ marginLeft: '20px' },300); // on Mouseover move to left
    }, function() { //on Mouseout move back to original positon
    $(this).stop().animate({ marginLeft: '0px' }, 300);
   });
   
   });
   </script>

<style type='text/css'>


a {
 text-decoration: none;
 color: #999;
}
a:hover {
 text-decoration: underline;
}
#wrapper {
 margin: 0 auto;
 width: 900px;
 margin-top: 60px;
}
h2 {
 background: #B2F9F1;
 font-family: Futura, Verdana, Sans-Serif;
 color: #FFF;
 text-align: center;
 margin-bottom: 20px;
.delicious {
 background: url(http://santabanta.mywapblog.com/files/delicious121.png)no-repeat;
 background-position: 0 -1px;
}
.facebook {
 background: url(http://santabanta.mywapblog.com/files/facebook121.png)no-repeat;
 background-position: 0 -1px;
}
.stumbleupon {
 background: url(http://santabanta.mywapblog.com/files/stumbleupon121.png)no-repeat;
 background-position: 0 -1px;
}
.twitter {
 background: url(http://santabanta.mywapblog.com/files/twitter121.png)no-repeat;
 background-position: 0 -1px;

#social_nav_vertical {
 margin-left: 100px;
 margin-top: 30px;
 font-family: Futura, Verdana, Sans-Serif;
 font-size: 18px;
 color: #8e9090;
 height: 160px;
 background: #E2E2E2;
 padding: 10px;
 width: 550px;
 border: 2px dashed #DFDFDF;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
}
#social_nav_vertical h3 {
 display: inline;
 padding: 0 10px;
 border-bottom: dashed 1px #ccc;
}
#social_nav_vertical  ul {
 margin: 0;
 padding: 0;
 margin-top: 20px;
}
#social_nav_vertical ul li {
 padding: 5px 0 0 5px;
 margin-left: 5px;
 list-style-type: none;
}
#social_nav_vertical  ul li a {
 padding: 4px 0 0 28px;
 height: 32px;
 color: #999;
 text-decoration: none;
 line-height: 1.45em;
}
#social_nav_vertical ul li a:hover {
 color: #6DCAFF;
 text-decoration: underline;
}
.vertical_title {
 position: relative;
 top: -120px;
 left: 170px;
 font-size: 35px;
}
</style>

* Now find this code <data:post.body/> by CTRL+F key

* And copy below code and post After <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id="social_nav_vertical">
    <ul>
     <li> <a class="delicious" href="http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title" rel='nofollow' title='Share this on del.icio.us'>Delicious</a>
     </li><li><a class="facebook" href="http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title" rel='nofollow' title='Share this on Facebook'>Facebook</a></li>
     <li><a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title" rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'> Stumble</a></li>
     <li><a class="twitter" href="http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;" rel='nofollow' title='Tweet This!'>Twitter</a></li>
    </ul>
    <p class="vertical_title"> Enjoyed This Post? <br />
      Share or Bookmark it .</p>
   </div>
</b:if>