Hello Guys,We are in 1 trial again dorsum amongst some other Responsive social media widget for blogger template.Later on nosotros volition portion some other social portion for blogger template.In previous post nosotros convey talked most the Flat Social Media Slide Out Share Buttons In Blogger Footer. Social Media Share is real of import for each as well as every websites or thus the world.With the aid of social portion buttons nosotros are able to portion content on social media profiles as well as because of sharing your content volition spread all over the social media sites.And amongst the aid of social media sites y'all tin sack grow or y'all tin sack country double your website traffic.
However blogger platform supply default buttons for sharing but that is besides sometime as well as i'm certain directly days at that topographic point are lot of responsive templates inward the marketplace set as well as those default buttons never suits your website niche as well as no custom template convey those buttons,those are available amongst the blogger default templates.In this social media portion buttons nosotros convey given hover final result as well as its convey 5 social media sharing sites Facebook,Twitter,Google plus,LinkedIn,Pinterest. So to take in this gadget follow the steps mentioned below.
How To Install Social Media Share Buttons inward the End of Post Blogger template
installation steps:
Step 1. Log inward to your Blogger trouble organization human relationship as well as Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code as well as glue it only earlier the ]]></b:skin> or </style> tag.
Step 6.Copy the below Font Awesome Icons stylesheet as well as glue it only below the <head> tag.
Step 7. Now Search for <div class='post-footer-line-1'> or <data:post.body/> and glue the below html code only inward a higher house it.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code as well as glue it only earlier the ]]></b:skin> or </style> tag.
/* Share Buttons By Www.Bloggersstand.com */Step 5. Now Search for <head> by Pressing Ctrl+F keys.
.bsdsharepost li{width:19%;padding:0;list-style:none;}
.bsdsharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.bsdsharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.bsdsharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.bsdsharepost li .twitter{background-color:#55acee;}
.bsdsharepost li .facebook{background-color:#3b5998;}
.bsdsharepost li .gplus{background-color:#dd4b39;}
.bsdsharepost li .pinterest{background-color:#cc2127;}
.bsdsharepost li .linkedin{background-color:#0976b4;}
.bsdsharepost li .twitter:hover,.bsdsharepost li .facebook:hover,.bsdsharepost li .gplus:hover,
.bsdsharepost li .pinterest:hover,.bsdsharepost li .linkedin:hover{background-color:#444;color:#fff;}
.bsdsharepost li{float:left;margin-right:1.2%}
.bsdsharepost li:last-child{margin-right:0}
.bsdsharepost li .fa:before{margin-right:5px}
Step 6.Copy the below Font Awesome Icons stylesheet as well as glue it only below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Note:If your template already convey font awesome stylesheet as well as thus y'all tin sack skip stride 5 as well as 6.
Step 7. Now Search for <div class='post-footer-line-1'> or <data:post.body/> and glue the below html code only inward a higher house it.
<b:if cond='data:blog.pageType == "item"'>Step 8. Now Save your Template..Done !!
<meta expr:content='data:post.id' itemprop='postId'/>
<div class='clear'/><div class='bsdsharepost'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank' title='LinkedIn Share'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank' title='Pin It'><i class='fa fa-pinterest'/>Share</a></li>
</ul></div>
</b:if>
No comments:
Post a Comment