First , you have to get the code from a website . This website shares many types of social sharing buttons . They are very popular among very top brands so no need for any fear about wrong codings . Addthis.com has a lot of features which makes it a lot more better than other widget creator websites .
Now , go to addthis.com . Select any type of Social sharing widget from Their list of buttons . Select the one according to your needs . Also , try to select it according to your template .Now , Customize the buttons . You can add many buttons . They have a big list of many beautiful social sharing buttons . Now , after customizing you will get the code . Copy the code . The Code that You got may be similar to the one given below if you created a widget exactly like the picture above .
- Go To Blogger - Template - Edit HTML
- Now Search For <data:post.body/>
- There might two or three <data:post.body/> 's .
- Just above it paste The code that you got after customization .
- Copy and paste this code that you got after customization above all the<data:post.body/> one by one and check which one is the correct one .
HTML/CSS
<style>
.share-bk-social span{font-weight:normal;margin:0;font-family:'Yanone Kaffeesatz','Helvetica Neue',Helvetica,Arial,sans-serif}
ul#social-share-bk,ul#social-share-bk li{list-style:none;padding:0;margin:0}
ul#social-share-bk li{float:left;position:relative}
#social-share-bk a{width:19px;height:20px;display:block;margin:0 3px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh4BGpsYd_m4a4b3ZxRwWssbLG4lgHjmCLHPyFXMeBGkvTq10tsl_DKVnq9N3Mq_DlkSILLopUGW9PcGtvdC-I_woB0ilRXBm2n9aw4IzOfJRndtuuwZITFQ7hI8b2Qqp8OMjcNzBrvyk/h20/sprite+images.png);background-position:0 0;background-repeat:no-repeat}
ul#social-share-bk li.facebook a{background-position:-19px 0}
ul#social-share-bk li.twitter a{background-position:-116px 0}
ul#social-share-bk li.google a{background-position:-39px 0}
ul#social-share-bk li.stumbleupon a{background-position:-97px 0}
ul#social-share-bk li.digg a{background-position:0 0}
ul#social-share-bk li.delicious a{background-position:-136px 0}
ul#social-share-bk li.linkedin a{background-position:-58px 0}
ul#social-share-bk li.reddit a{background-position:-78px 0}
ul#social-share-bk li.technorati a{background-position:-155px 0}
#social-share-bk strong{display:block;width:auto;padding:4px 7px;position:absolute;background-color:#1C94B9;color:white;left:200%;bottom:40px;-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden}
#social-share-bk li:hover strong{left:20%;-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
.share-bk-social{height:25px;margin-bottom:15px}
.share-bk-social span{float:left;font-size:150%;padding:0}
ul#social-share-bk{float:left}
@media only screen and (max-width:479px){
.share-bk-social span{font-size:140%;padding-top:1px}
#social-share-bk a{margin:0 1px}
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='share-sbm-social'><span>Share This To :</span>
<ul class='social-share-sbm' id='social-share-sbm'>
<li class='facebook'>
<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=4
36"); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='google'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width
=600");return false;' rel='nofollow' title='Share this on Google+'><strong>Google+</strong></a>
</li>
<li class='stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='digg'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='technorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</div>
</b:if>
y3h64f2f12 n7z63c9m86 b8t34f4i85 g4v07y0h72 b4x19e4r46 a3j30u2x00
ReplyDeletei7p05j7b79 n4j24a2p30 g2a76j4k97 s2r45s9w60 u5j39a7d25 k4v52c9b33
ReplyDelete