Star Burst Social Bookmarking Gadget for Blogger

Star Burst Social Bookmarking Gadget for Blogger

3
data:blog.title
social sharing widget

Social bookmarking help you to share your post easily. Most of the blog success depends on promotion of content through various social media.  Among various social bookmarking widget I have designed this bookmarking widget with CSS transitions effect which is known as star burst social bookmarking widget. Whenever you just mouse over on an social icon then rest of the icon will fade automatically. I have also included tool tip effect to make it more attractive.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin>  by pressing  Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> 


 /* Star Burst Social Sharing Widget by www.bloggerspice.com */
ul.bssocial {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.bssocial li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.bssocial li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.bssocial li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
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);
padding:3px;
}
ul.bssocial li.bsfacebook {
background-image:url(http://2.bp.blogspot.com/-UuGcz8Y0WtM/UY9PVvJMHUI/AAAAAAAAC3g/ZfKvFI2nPik/s1600/BS+facebook.png);
}
ul.bssocial li.bstwitter {
background-image:url(http://3.bp.blogspot.com/-eHiWazTcFOM/UY9PWy8HS5I/AAAAAAAAC4E/XEaXJbooXPc/s1600/BS+twitter.png);
}
ul.bssocial li.bsgoogleplus {
background-image:url(http://4.bp.blogspot.com/-8tmNwJjCup4/UY9PVvqG9VI/AAAAAAAAC3k/OnC4PmSxDwk/s1600/BS+google-plus.png);
}
ul li.bspinterest {
background-image: url(http://3.bp.blogspot.com/-Mv6VbLzALzA/UY9PWQXOeLI/AAAAAAAAC34/c2FdQI_Jn78/s1600/BS+pinintrest.png);
}
ul.bssocial li.bsstumbleupon {
background-image:url(http://2.bp.blogspot.com/-Q4CQJbyw4BM/UY9PWah4BqI/AAAAAAAAC38/-dstoszbuPo/s1600/BS+stumbleupon.png);
}
ul.bssocial li.bsdig {
background-image:url(http://1.bp.blogspot.com/--AMKVgXOYyo/UY9PVkq4v1I/AAAAAAAAC3c/ZbpEaEdjy50/s1600/BS+digg.png);
}
ul.bssocial li.bslinkedin {
background-image:url(http://4.bp.blogspot.com/-rEjxbUsX1NA/UY9PWBAdepI/AAAAAAAAC30/D5d20B57Jac/s1600/BS+linkedin.png);
}
#bscssanimation:hover li {
opacity:0.2;
}
#bscssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#bscssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#bscssanimation li:hover {
opacity:1;
}
#bscssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Social Sharing Widget by www.bloggerspice.com */


Step 5 Now again Find this code <data:post.body/>  by pressing  Ctrl + F 

Step 6 Paste the below code  below/after  <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Like the Post? Do share with your Friends.</b></div>
    <ul class='bssocial' id='bscssanimation'>
    <li class='bsfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='bstwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='bsgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='bspinterest'>
<a 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)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='bsstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='bsdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='bslinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
    </b:if>

Step 7 Now hit the save button.

If you face any problem kindly leave a comment below. I will reply as soon as possible. 

Star Burst Social Bookmarking Gadget for Blogger
4 Stars stars - "Star Burst Social Bookmarking Gadget for Blogger " Social bookmarking help you to share your post easily. Most of the blog success depends on p...

Post a Comment

thanks bro nice to hear that.

Thx bro nice sharing i cheak out on my blog
best of luck
Regards
H I B

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *