• Translate

1/02/2016

How to Make Responsive Social Sharing Button Widget For Blogger

Tutorial Blogspot |

Advertisement

Responsive Social Sharing Buttons For Blogger |  I finally found a social sharing buttons are responsive and in accordance with the template of my blog, I found the Responsive Social Sharing Button Widget from www.smartpik.in. want to know how to make it? please follow these easy steps below:

Responsive Social Sharing Buttons For Blogger
  • Login Into your Blogspot dashboard
  • Go to the menu Template → Edit HTML
Responsive Social Sharing Buttons For Blogger
  • Click anywhere in the code and press Ctrl+F and search for </head>
Responsive Social Sharing Buttons For Blogger


  •  Copy the code given below and place it above/before </head>
     <b:if cond='data:blog.pageType == &quot;item&quot;'><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 == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='sharebar'>
    <div class='Share_buttons'>
      <ul><li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   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='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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.
    If you experience difficulty in applying the code above, please comment below so I can give an explanation. Thank you

    Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
    How to style text in Disqus comments:
    • To write a bold letter please use <strong></strong> or <b></b>.
    • To write a italic letter please use <em></em> or <i></i>.
    • To write a underline letter please use <u></u>.
    • To write a strikethrought letter please use <strike></strike>.
    • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
    Show Parser Box