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 very impressive role to make your blog stylish and looking cool. Every beginner and professional blogger user wants to have something better and something different 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 beautiful widget can makes your site attractive without effecting your blog or website loading time. Previously we wrote tutorial on social media sharing widget 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.
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/AVvXsEjNtZ4PBj9D4BwG1BOEGiK7Liv6-xDsG-1uebLxVpOmX38nvtgP5Rd3RZzYiygBuG579bX_dZ84ohv-YFoymz3EZHvlp9XlkVKG3NVvbUG_KZULtw2sBTzCARiby1jkkcIOLJa9lklgc3HZ/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.
0 Comments