Mash Tricks : Sharing widget

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="float: right; padding: 0px; text-align: left;">
<br /></div>
<div class="akash" style="text-align: left;">
<img align="left" alt="social-sharing" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagDYdvd4IUjX0D8ycJ7tSfUVzIsHmPJn2aiQruGrwUSnz1S_7ZEOJMW0KmRsnfOrGRvgp4_kmspGAHPb5Zpa6DU4SmVrbrRyZCaIYDLnjVexWKyeAors_2TsJLEqmgvAM1Ik_-qOqPn8A/?imgmax=800" style="background-image: none; border: 0px; display: inline; float: left; margin: 0px 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Social Sharing Vector" />Now,  Bloggers are aware of the role of social media in making their blog  popular. Almost all bloggers are using the social sharing widgets and  social media following widgets to increase the social media presence of  their blog. Social media plays an important role in according to SEO and  SERP roles. Adding elegant stylish social media bookmarking widget  plays <a href="http://www.myblogger-tricks.com/2013/06/10-tips-to-design-impressive-and.html" target="_blank">very impressive</a>  role to make your blog stylish and looking cool. Every beginner and  professional blogger user wants to have something better and <a href="http://www.myblogger-tricks.com/2013/07/another-stay-connected-metro-style.html" target="_blank">something different</a>  than others. Today I decided to tell you about an simple and effective  social Media Bookmarking Widget that is used by all Professional  Bloggers. This <a href="http://www.myblogger-tricks.com/2013/06/how-to-add-subscription-widget-below.html" target="_blank">beautiful widget</a> can makes your site attractive without effecting your blog or website loading time. Previously we wrote tutorial on <a href="http://www.myblogger-tricks.com/2013/09/add-simple-social-sharing-below-your.html" target="_blank">social media sharing widget</a>  but today we have another social media sharing widget. The Amazing  things for this widget is that, Loading time is  Extremely Fast. You can  check it loading time on live preview by clicking on live preview  button.  Now let’s proceed with the tutorial to add this social media  widget to your blog. Follow the Simple Steps Below.</div>
<div align="justify">
<br /></div>
<div align="center">
<a class="way2button" href="http://drop-down-menu-test.blogspot.com/2013/01/test-post.html#bt-social-share" rel="nofollow" target="_blank">Live Preview</a></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Add It to blogger</h3>
<ol style="text-align: left;">
<li>Go To Blogger Dashboard > Template > Edit HTML.  Before Editing Your Template Please Make a Backup. </li>
<li>Backup your template. </li>
<li>Search for <span style="background-color: #cccccc;">]]></b:skin></span><b> </b>and just before it give a space and add this code.</li>
</ol>
<blockquote class="tr_bq">
<span style="font-family: inherit;">div#bt-social-share { background:#f3f3f3; width:600px; height: 80px; border: 1px solid transparent; border-radius: 5px; -moz-border-radius: 5px;-webkit-border-radius: 5px; }#bt-social-share ul { list-style: none; clear: none; padding: 0px 0px ; margin: 25px 10px 0 0; float:right; } #bt-social-share ul li { display: inline; background:none; vertical-align:middle; margin:0; padding:0; } #bt-social-share ul li a { display: block; float: left; width: 32px; height:32px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZEpKhH0SHbDH8c-c0WuMbfuBiIsWRhNdzge717HZTEmxYOsEFFPEvXtJ1B5-snpL_zLzUex_Y3Jul1T8RmPm_uIivZCbP3nj9nLizTXPdh9kbr7rHKuXztrcwye8r370SCW-KwQ5Z1so/s1600/Social_sprites.png); margin-left:3px; background-repeat: no-repeat; margin-right: 2px; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; }#bt-social-share ul li a.facebook {background-position: -0px -0px; } #bt-social-share ul li a.facebook:hover {background-position: -0px -33px; }#bt-social-share ul li a.twitter {background-position: -32px -0px; }#bt-social-share ul li a.twitter:hover {background-position: -32px -33px; }#bt-social-share ul li a.google {background-position: -64px -0px; }#bt-social-share ul li a.google:hover{background-position: -64px -33px; }#bt-social-share ul li a.pinterest {background-position: -96px -0px; } #bt-social-share ul li a.pinterest:hover {background-position: -96px -33px; }#bt-social-share ul li a.delicious {background-position: -128px -0px; }#bt-social-share ul li a.delicious:hover {background-position: -128px -33px;}#bt-social-share ul li a.digg {background-position: -160px -0px; }#bt-social-share ul li a.digg:hover {background-position: -160px -33px;}#bt-social-share ul li a.addtoany {background-position: -192px -0px; }#bt-social-share ul li a.addtoany:hover {background-position: -192px -33px;}</span></blockquote>
<br /><div>
4.  Save Changes and jump to the next step of this tutorial.<br /><div style="text-align: left;">
Note:- To change the Widget box size, change this value <b>width: 600px;</b></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
5. Now Search for <data:post.body/> And Put Below Code immediately after it!</div>
<blockquote class="tr_bq" style="text-align: left;">
<div id='bt-social-share'><br />
<br />
<span style="font-family: 'Source Sans Pro', sans-serif;float:left; margin-left: 10px; font-size:14px; line-height: 80px; text-shadow: 0px 0px 1px #333;">Share This Story, Choose Your Platform! </span><br />
<br />
<ul><br />
<br />
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li><br />
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li><br />
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li><br />
<li><a class='pinterest' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'/>li><br />
<li><a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li><br />
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li><br />
<li><a class='a2a_dd addtoany' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Share this post on others'/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li><br />
<br />
</ul><br />
<br />
</div></blockquote>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
6. Hit save and you are done again!</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Troubleshooting</h3>
<div style="text-align: left;">
While finding the <code><data:post.body/></code>  code is coming three time. This Problem comes when we install Auto Read  Hack in our Blogs. For this Problem Search for any one line from below  and Put Above HTML Section of Widget Code after it!</div>
<div style="text-align: left;">
<br /></div>
<blockquote style="text-align: left;">
<div class='post-footer-line post-footer-line-1'></blockquote>
<div style="text-align: left;">
<br /></div>
<blockquote style="text-align: left;">
<div class='post-footer'></blockquote>
<div style="text-align: left;">
<br /></div>
<blockquote style="text-align: left;">
<b:if cond='data:blog.pageType == &quot;item&quot;'>      <br />
<data:post.body/></blockquote>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
If  you faced any problem then feel free to let me know. I will write more  tutorials on this topic this week so that you may get all the latest  updates. I hope this Widget proves useful to most of you and it may  bless your blogs with even more traffic.</div>
</div>
</div>

Add awesome social sharing widget To Blogger Blog

Now, Bloggers are aware of the role of social media in making their blog popular. Almost all bloggers are using the social sharing wid...