Add awesome cSS3 Social Sharing Widget into blogger blog

After sharing several blogger template with you today I am going to share social sharing widget using the CSS3. This social sharing widget will attract your reader to share your post in the facebook , twitter etc. Just follow the simple steps to install social sharing widget into your blogger blog.

Installing Social Sharing Widget into blogger blog

1. login into your blogger blog.
2. Go to template
3. Click on EDIT HTML
4. Now Check Expand Widget Templates
5. Now search for </head> and paste the bellow code above it

<style type="text/css">
/* Beautiful Social Bookmarking Widget By SiddhartH @ http://theoriginalbloggertricks.blogspot.com/ */
ul.theoriginalbloggertricks-social { list-style:none; margin:15px auto;display:inline-block; }
ul.theoriginalbloggertricks-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.theoriginalbloggertricks-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.theoriginalbloggertricks-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EN4mDNe4hfxynUIx8EociyaTkTg2QTGwm3k3Y89Gw5uV4mH3tDzODh0OU8C_-wBex6EqXz1z3xenX8NDUJuvuKhP__LAIEKJkFgv8buRLVKNih05L-JpaECUfpNZC-0p5HKeByiEfvNj/s1600/theoriginalbloggertricks-facebook.png"); }
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgem7yUovrRaGr3kfIX0h9O-E66_C1fn-D8vhYIVETAXut9vYJGwV8C00vTfrjyp22NvDN3x1tR8km3dtvzfjRpR3PnRVgRz2JqLS2jy5oe4w9uDglgzaDMyl1FE15sxoOo-38DBXSycLPp/s1600/theoriginalbloggertricks-twitter.png"); }
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-pDiB6gV_4OUul18FLZgl-DFzxGNHhIAWYD_1FPP4PBQK_vAW6_FvQRmMLrt0kVfyiDhocZ-jVwRlSGdl66oSk3wKt8zkiyCszRoH9YV3zvCxHGXWNP7jWOk3m7wcDoNT46vmfnDkQGN/s1600/theoriginalbloggertricks-googlebuzz.png"); }
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9og4Bj5KC8NA7opr4m6O9eKGKJWaJf4ewTL6YMlhMJ_P9wqEjT9LeEU2VpEp4_iqLh90SKxNx84fSFm8Sn7IkI-C41KPIjskPqZR9UB7szcgyziYEBq3xnNCCVqvudlfK3lg6tjAPK5tA/s1600/theoriginalbloggertricks-stumbleupon.png"); }
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDoJYKmf_-mlme8y4rIOOQeryVj1ZnXboCQQb4pTCyiSdbH0733K-jBRwRKVhysHcvlWPQPoaFlrpVnbMNOg4JhUgCV5zRGT3Sbj8LQR-lsBYB5DWMGQ4oVxdsGGo6vqp8CblL7vO9FTEW/s1600/theoriginalbloggertricks-digg.png"); }
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_W-zbmk2ed59cmPmz4oAMN3sENSI5qnXNrauCAhfPa_AwqbxJ9r2hHNsQje41yu40DRI0d_SUiB859p5jhCVS_4s4aqhQLmPa4E5Iwt2zpn2BNJZsScJw4C97dtfd0-mYqQLNIi5PYiOb/s1600/theoriginalbloggertricks-delicious.png"); }
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkJ-z5BgEIURHFcffdJcQTrG8hLhwiHJD9dFQasA-B_qa4H4P0xZDN_rEN_m38dxTqF6woM8nJHxR7yiNdPimG5kN6_-LXjYQAUTjnTC4wZ4GBGO3yXRAbfMnU_992bsk1tL4w4FHKnSkS/s1600/theoriginalbloggertricks-linkedin.png"); }
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvq1ZQnh_qJH9eUkPah34UTpP9xpWYnVIRfdvM3U5ucyFTyJEl4eU8o3IySx-GWsAgZxa2CLVoV3r6mwjJmZ9No65TqIg_b5EYQMQz8QuTbB14qbjh86DCh8fWSWrlaI2PhAt0Tmi9614P/s1600/theoriginalbloggertricks-reddit.png"); }
ul.theoriginalbloggertricks-social li.theoriginalbloggertricks-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiwMFhfUfzyIJoon_d4gd0vgt0Uysmtoqlud2VNLWfpAiXe2lhYE8mzCbiMeqTwU9j8eo0VZDyFV6qFwBHeKEhTdtC1jx06Qr68jJQa-cUT-mlXSWCCd4J2JobzD9kOEX4xelU_EDlwed/s1600/theoriginalbloggertricks-technorati.png"); }
#theoriginalbloggertricks-cssanime:hover li { opacity:0.2; }
#theoriginalbloggertricks-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#theoriginalbloggertricks-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#theoriginalbloggertricks-cssanime li:hover { opacity:1; }
#theoriginalbloggertricks-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Beautiful Social Bookmarking Widget By SiddhartH @ http://theoriginalbloggertricks.blogspot.com/ */
</style>

6. Now search for <data:post.body/> and paste the bellow code after it. (if you are using magazine type blogger template then you might found more then 1 post.body so find the working one.)

<b:if cond='data:blog.pageType == "item"'>
<ul class='theoriginalbloggertricks-social' id='theoriginalbloggertricks-cssanime'>
<li class='theoriginalbloggertricks-facebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'>Facebook</a>
</li>
<li class='theoriginalbloggertricks-twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'>Twitter</a>
</li>
<li class='theoriginalbloggertricks-googlebuzz'>
<a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'>Google Buzz</a>
</li>
<li class='theoriginalbloggertricks-stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>StumbleUpon</a>
</li>
<li class='theoriginalbloggertricks-digg'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'>Digg</a>
</li>
<li class='theoriginalbloggertricks-delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'>Delicious</a>
</li>
<li class='theoriginalbloggertricks-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'>LinkedIn</a>
</li>
<li class='theoriginalbloggertricks-reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'>Reddit</a>
</li>
<li class='theoriginalbloggertricks-technorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'>Technorati</a>
</li>
</ul>
</b:if>