Every blogger wants to promote their articles/posts, and the best, effective, popular method for sharing content for free is social media like Facebook, Twitter etc. So today I am here with new widget for 'Blogger' platform.
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>
So according to most of the templates, search for <data:post.body/> in your code and just below it paste the following HTML.
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'>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.
.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>
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"'>Finally Save template and refresh any of your blog post and check it’s working. Thank You!
<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>
0 comments:
Post a Comment