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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAAsXuT8k8sNojXINpSDbykQCRvwq7aL73N8oOEGrb0LN-LpU40eeQwW8kepu7ffpiwQ0YFMziv6Nl-TjFn9Xh24xELY5-tiBg2RdSc7gcW_ePpvHctg2a939Dsfgms0cXhBFySZwTztUu/s1600/BS+facebook.png);
}
ul.bssocial li.bstwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZYVtpnj4drK9wz2NA3Cl_8y5rhhmmVfBDUUnfjGEbw86NyglLbjh_9yoW0wdpceER0_4zaBQHMfpjKZsRDK6eAy2H5RcucjiG-BkiyIRlvWt1USrr72noPuvkidFxuxc1sqbEp0zvOje/s1600/BS+twitter.png);
}
ul.bssocial li.bsgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ym8p7WaOTo8L9xYxawPJZIY9e2Y0XpoRAb0-K_MiLIul5UnorHMTmTDlEyyH6ySLrgBszQj4dY8V4IdgX1nSP7o6H3fC8DbDyMr1qctMlKFzoWCf5qLSH11KytvYcoD1P1LGPJYczd8s/s1600/BS+google-plus.png);
}
ul li.bspinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtZGyIZS0evLCNIQULj_Y-YyLmPgsdbUmTWut2QYSEx_HJtfRd1q06GUDnlnNddvH2WlUkFTvM_SjwgaKNs2HiWJEVg3JEoXp67EosiUeL7nl4J-QAOrNE0AZ9K3-yQTc_J9fXmNxJX0rR/s1600/BS+pinintrest.png);
}
ul.bssocial li.bsstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0kTM2Cetr3nhIkBsgqhgiZ0xLoLywV4uDWxaJX_K3kYLBSwyPsR6z_YbU8WAQATHbdhOY_EPHYoEkfqQdEU64Bh0VTlwyIhjafg0eUJqQxOt78mtXjbvGcyXDS-aSn8QoeRBztdP2nd6S/s1600/BS+stumbleupon.png);
}
ul.bssocial li.bsdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFdi9uvP49NXw7IxJ3tAlaN0a6KZiekRqAbSx9clm-4HzYZ3x-wlPwEy3Ein2tbcSzrOPlWoaUyPQyVks9uxZrGWvzZ4DT4lP9WZ3SQ_YZMGV8ITcJNuyHMKSv3bXfYQSBuuzyXGAoc82w/s1600/BS+digg.png);
}
ul.bssocial li.bslinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhulhO54u4nqPQnMCgXULktCSSqGUGhIMqOJcVf1u0a6DaQFw0yi23lSpcGePA3amZ53MrAmB9WpvO2wbWa5Vf1o7ntZyx1VPOz7oRrp2IleX4HeO2T0Hbq9p71cYrh1DN5SJkijmTbl7Xl/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 == "item"'>
<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='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='bstwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='bsgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='bspinterest'>
<a 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)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='bsstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='bsdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='bslinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' 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.
0 comments:
Post a Comment