Social Sharing Widget in Blogger

Social Sharing Widget Number 1 :

Social Sharing Widget Number 2 :

You can twitter username with yours (highlighted with red).
Click on save template and view any post from your blog you will see the change. This widget will appear only when you click on Post title. not on Home page.

If you will prefer to show this post on Home page also then just Remove the yellow colored text from above.
If you want to remove the shadow completely then remove the style attribute from the second line. It will look like this:
 <div  id=’UT-social-share’>

Code for Widget Number 2 :

no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}

.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}

.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}

.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}

.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>

<div class=’flipper’>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=”Pleaseshare”>
Please Share it! 🙂 </div>

<!–Google Plus–>
<a class=’googleplus’ expr:href=’&quot;http://plus.google.com/share?url=&quot; + data:post.url’ rel=’external nofollow’

target=’_blank’ title=’+1 it :&gt;’/>

<!–Facebook–>
<a class=’facebook’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; +

data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Share this on Facebook :&gt;’/>

<!– Twitter –>
<a class=’twitter’ expr:href=’&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; +

data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Tweet this :&gt;’/>

<!– Pinterest –>
<a class=’pinterest’  href=”http://pinterest.com/” rel=’external nofollow’ target=’_blank’ title=’Pin it :&gt;’/>

<!– Delicious –>
<a class=’delicious’ expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; +

data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Add this to Delicious :&gt;’/>

<!–DIGG–>
<a class=’digg’ expr:href=’&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url’ rel=’external nofollow’

target=’_blank’ title=’Digg this :&gt;’/>
<!–Stumble–>
<a class=’stumbleupon’ expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url +

&quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Stumble this :&gt;’/>

<!– Reddit –>
<a class=’reddit’ expr:href=’&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; +

data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Add this to Reddit :&gt;’/>
<!–RSS –>
<a class=’rss’ expr:href=’data:blog.homepageUrl + &quot;feeds/posts/default&quot;’ title=’Bookmark plz :&gt;’/>
</b:if></div>
<div style=”clear:both”/>