Star Burst Social Bookmarking Gadget for Blogger

Star Burst Social Bookmarking Gadget for Blogger

Comments: 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. 

Speak Your Mind

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 Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *