This is a Below Post Social Sharing Widget. In
this tutorial im gonna explain, how to add it to end
of blogger post. it include nice title hover effect too.
By using this widget, you can share your social
networks with one click.It means, you can get some
visitors to your blog if someone do sharing. Im using
Css3 and HTML,
1. Log in to blogger account and Click drop down.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin> tag
ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix 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.social_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGhuwkHKpe88OmSevEpHngUmQ9JpTPnNr5IJvr4gvNwBCZALg5TkmNVrW5fZFPjefhw5CkWYQfX32jQOmTwoHpFKncVR0dSoHbzTP-D_Pyd6gBfL4jE16NPUhKLftjANpbBW3uQfs9JB1L/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTJjk0NAw_dD6J497P3Vi5zZ3UpmDmm5rXYMu039NUWtOt2J1pjUonf00517cXioKMNP9CAWP0Fvi7t04DIvdZwClYHaNU0HQ2fLhA8VAM4QyyCp60dNxU8fYpclE6b_V9KDPLYyUc3UG/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1T8NiL8lamQTuEwWI9dRh3A_qKQVaG3WqDwz7tLPsxqekTVtEic3efGqWFwnME3gjXuEuztfYo2J4wWg1VOZTBefyh7yDsLGzKyUWWn8OpGgO2XUPMnNq_s6Y9e8TZf2vltyIm5TRwtwp/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZ7AfytY3d067xp4D0EAal817Lqb58HGakTZWZMmA8WfcwRMnXsCdxIVgqZINLH1fOtcYVtcrDMLc3fQyjTtDmAfvPQ_qLUinkD1l1Gh_EN4n2FOqlLBSHEWI6CoWoXldVLAX9vPLNV8_/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNCbyTtDD_wYah_-__OOtC8e3zrma-mq9OutuVazFpQcM88U7FjLtTplH1LDp3koKfBrpHTI0CExYJAP1pc-cXGOOD_026DLR_SQ4oilB2qJC5ncJOC0PjvOIikOUiUToOrx9A3wtBsgS/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJsr39B9pOp4zn2u6TEHcfG8CocM1WPrCcg4L2_25qK9A9BtHHBmKPwh9yXrnhyNBBJ_JsdycTyeWbKkyBQEfHzYtOhrxrGqv-YfbB5uETDwwww8TZdG4_K67U3vO7dIdV59Oj7PiAL-mT/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJB7rj9u5Yp36kQvIiO04TQairUxV_bVFt6xBoHs62fq7ckyAOgB1MLOtaajUJdIM2bvvTcMevbSj2VcSAXKEAKg9WrvMjm_8FRLmt98PffKlYZJBmwPAGrmmKXE6wR-3A-0VqRmrHZQwe/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}
6. Find this tag by using Ctrl+F <data:post.body/>
7. Paste below code Before <data:post.body/> tag
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_btrix' id='animation_btrix'>
<li class='abfacebook'>
<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='abtwitter'>
<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='abgoogleplus'>
<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='abpinterest'>
<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='abstumbleupon'>
<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='abdig'>
<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='ablinkedin'>
<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>
8. Now save your template
You are done...
0 comment:
Post a Comment