Add It to blogger
- Go To Blogger Dashboard > Template > Edit HTML. Before Editing Your Template Please Make a Backup.
- Backup your template.
- Search for ]]></b:skin> and just before it give a space and add this code.
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;}
4. Save Changes and jump to the next step of this tutorial.
Note:- To change the Widget box size, change this value width: 600px;
5. Now Search for <data:post.body/> And Put Below Code immediately after it!
<div id='bt-social-share'>
<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>
<ul>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='pinterest' href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'/>li>
<li><a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='a2a_dd addtoany' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title ' title='Share this post on others'/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
6. Hit save and you are done again!
Troubleshooting
While finding the
<data:post.body/>
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 class='post-footer-line post-footer-line-1'>
<div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
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.
thanks for share!!! $-)
ReplyDeletethanks boss!
Deletenice!!!
ReplyDelete