As we all know, there's very less probability that a visitor will directly copy the post link and share that on his/her social profile. So to increase the sharing rate of your blog content I am here with Ridiculously Responsive Social Sharing Buttons. We customized this code for all the newbies and bloggers which don't have better understanding of HTML/CSS and Blogger codes.
As usual open your Blogger dashboard and choose the blog. Navigate to >> Template >> Edit HTML
Click anywhere in the code and press Ctrl+F and search for </head>
Copy the code given below and place it above/before </head>
<b:if cond='data:blog.pageType == "item"'><style type='text/css'>
.sharebar {position: relative; background: none; z-index: 2; width: 100%; padding: 10px; display: inline-block; font-family: sans-serif; margin-top: 25px; border-top: 1px dotted rgba(0, 0, 0, 0.05); border-bottom: 1px dotted rgba(0, 0, 0, 0.05);}
.sharebar .Share_buttons { display: block;}
.sharebar .Share_buttons .wrap { text-align: center; margin: 0 auto; display: inline-block; min-width: 41px;}
.sharebar .Share_buttons .wrap1 { display: inline-block; width: 31px; float: left;}
.sharebar .Share_buttons ul { margin: 0; padding: 0;}
.sharebar .Share_buttons ul li a, .sharebar .Share_buttons ul li a:hover { color: #FFF !important; cursor: pointer; line-height: 25px; height: 100%; display: block; text-decoration: none;}
.sharebar .Share_buttons ul li { list-style: none; list-style-type: none; padding: 0; margin: 1px; float: left; width: 16%; max-width: 100px; display: inline-block; font-size: 13px; overflow: hidden; text-align: left; height: 25px; line-height: 25px; color: #fff; border: 1px solid rgba(0,0,0,0.04); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.sharebar .Share_buttons ul li .fa { color: #fff; font-size: 17px; font-weight: normal; font-family: FontAwesome; display: inline-block; text-align: center; padding: 0; height: 25px; line-height: inherit; width: 30px; background-color: rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.05);}
/*--Facebook---*/
.sharebar .Share_buttons .btn_fb { background: #3a579a;}
.sharebar .Share_buttons .btn_fb:hover { background: #314a83;}
/*--Tweeter---*/
.sharebar .Share_buttons .btn_twtr { background: #00abf0;}
.sharebar .Share_buttons .btn_twtr:hover { background: #0092cc;}
/*--Google Plus---*/
.sharebar .Share_buttons .btn_gplus { background: #df4a32;}
.sharebar .Share_buttons .btn_gplus:hover { background: #be3f2b;}
/*--Pinterest---*/
.sharebar .Share_buttons .btn_pntrst { background: #cd1c1f;}
.sharebar .Share_buttons .btn_pntrst:hover { background: #ae181a;}
/*--linkedin---*/
.sharebar .Share_buttons .btn_linkdin { background: #0077b5;}
.sharebar .Share_buttons .btn_linkdin:hover { background: #005480;}
/*---Total Share----*/
.sharebar .Share_buttons .share.h6 { font-size: 10px; font-weight: bold; text-shadow: none!important; text-decoration: none; text-align: center; color: #000000; border-top: 3px solid #FFF600 !important; border-bottom: 0; padding: 0px !important; padding-top: 5px!important; margin: 0 !important; line-height: 8px; border-radius: 75% 0;}
.sharebar .Share_buttons .share { border: none; margin: 0px 5px 0px 1px; overflow: visible !important; width: 95px !important;}
.sharebar .Share_buttons .share .count.h4 { font-size: 18px; font-weight: bold; text-shadow: none; text-decoration: none; font-family: sans-serif; text-align: center; color: #FF0000; line-height: 15px; margin-top: 0px; margin: -4px 0px 2px 0; min-height: 15px; padding: 0px; border: none;}
.sharebar .Share_buttons .btn_fb .share-btn, .sharebar .Share_buttons .btn_twtr .share-btn, .sharebar .Share_buttons .btn_gplus .share-btn, .sharebar .Share_buttons .btn_pntrst .share-btn, .sharebar .Share_buttons .btn_linkdin .share-btn { position: relative; color: #C3C3C3; display: inline-block; text-align: center; font-weight: bold; font-size: 11px; float: right; min-width: 12px; font-family: sans-serif; padding: 0px 5px; background-color: rgba(0,0,0,0.28); border-radius: 0px 0px 0px 15px;}
@media only screen and (max-width: 979px) {
.sharebar .Share_buttons .btn_linkdin { width: 34px;}
.sharebar .Share_buttons .btn_fb .share-btn, .sharebar .Share_buttons .btn_twtr .share-btn, .sharebar .Share_buttons .btn_linkdin .share-btn, .sharebar .Share_buttons .btn_gplus .share-btn, .sharebar .Share_buttons .btn_pntrst .share-btn
{ display: none !important;}}
@media only screen and (max-width:768px) {
.sharebar .Share_buttons ul li a, .sharebar .Share_buttons ul li a:hover { color: #FFF !important; cursor: pointer; line-height: 25px; font-size: 11px; height: 100%; display: block; text-decoration: none;}
.sharebar .Share_buttons .wrap { min-width: 34px;}
.sharebar .Share_buttons .btn_linkdin, .sharebar .Share_buttons .btn_pntrst { width: 30px;}
.sharebar .Share_buttons ul li { margin: 1px 3px;}
@media only screen and (max-width:479px) { .sharebar .Share_buttons .share { border: none; margin: 0px 5px 0px 1px; overflow: visible!important; width: 80px!important;}
.sharebar .Share_buttons ul li { width: 25px !important; margin: 2px; border-radius: 50px; border: 2px solid rgba(0, 0, 0, 0.14);}
.sharebar .Share_buttons .wrap { display: none !important;}
.sharebar .Share_buttons ul li .fa { width: 25px !important;}}
</style></b:if>
Now you just have to add the required HTML for the buttons but be careful now this is the most important and confusing step of this tutorial i.e., to find the proper place of post footer which usually very for every blog with custom template.
So according to most of the templates, search for <data:post.body/> in your code and just below it paste the following HTML.
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='sharebar'>
<div class='Share_buttons'>
<ul><li class='btn_fb'><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'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div> </a> </li>
<li class='btn_twtr'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + ""' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-twitter'/></div>
<div class='wrap'>Tweet</div>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div> </a></li>
<li class='btn_gplus'><a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'>
<div class='wrap1'><i class='fa fa-google-plus'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='google'>
<div class='count'/></div> </a></li>
<li class='btn_pntrst'><a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-pinterest'/></div>
<div class='wrap'>Pin</div>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div></a></li>
<li class='btn_linkdin'><a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-linkedin'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div>
</a></li></ul></div></div></b:if></b:if>
Finally Save template and refresh any of your blog post and check it’s working. Thank You!
Responsive Social Sharing Buttons For Blogger
Reviewed by Adsız
on
Aralık 12, 2015
Rating:
Reviewed by Adsız
on
Aralık 12, 2015
Rating:
Hiç yorum yok: