Wednesday, January 22, 2014

Latest Beautiful Social Sharing Blogger Widget.

Posted by Unknown at 2:35 AM Labels:
Advertisements
As you realize that social imparting is the most vital thing for our online journals. Social Sharing  help us into drive more movement from Social Network Websites, permitting bookworms for impart your post and get significantly more activity from Social Network Websites. 


There are numerous destinations of interpersonal interaction however most utilizing locales is Facebook,google Plus and Twitter that is the reason in this widget there are just three Social Sharing binds, generally bookworms are utilizing this three Social Network.
Numerous bloggers as of recently posted this widget however that holds numerous slip that is the reason i am offering this widget, it will works without any blunder like a cham. So I included another emphasize in this widget,  Comments Counter which will let you know what amount of remarks are on your post, this widget will just show on Post Page. Mostly, these widget are constructed with HTML, CSS, Javascript and XML. In this Horizontal Social Sharing Widget we have altered it great and catches made by designers of their sites. This widget won't diminish the stacking pace of your online journal.



Adding Horizontal Social Sharing Buttons in Blogger

  • Goto Blogger > Template > Editor
  • Click inside Editor and Find ]]></b:skin>
  • Paste the following code above ]]></b:skin>

/*  SIMBH.COM */ 
.sb-buttons{
color:#F85B48;
background:#333333;
display:inline-block;
font-size: 20px;
font-weight: bold;
line-height:12px;
text-decoration:none;
text-transform:none;
padding:10px 17px;
border:1px dashed #dedede;
box-shadow: 0 0 0 4px #333333, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.sb-buttons:hover {
color:#fff;
background:#E74F3D ;
text-decoration:none;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#sb-buttons:active {
position:relative;
top:1px;
}
.hb-buttons{
margin:5px;
background: -moz-linear-gradient(#ee8a6e, #EA6D4A);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#EA6D4A),color-stop(1, #ee8a6e));
background: -webkit-linear-gradient(#ee8a6e, #EA6D4A);
background: -o-linear-gradient(#ee8a6e, #EA6D4A);
background: -ms-linear-gradient(#ee8a6e, #EA6D4A);
background: linear-gradient(#ee8a6e, #EA6D4A);
font-family: 'Merienda' ;
font-size:18px;
font-color:#333333;
text-decoration:none;
position:relative;
padding:10px 20px;

background-image: linear-gradient(bottom, rgb(143,95,62) 0%, rgb(143,95,62) 100%);
}
.hb-buttons:active {
top:3px;
color:#000;
background-image: linear-gradient(bottom, rgb(143,95,62) 100%, rgb(143,95,62) 0%);
}

ul.social_sb {
list-style:none;
display:inline-block;
margin:15px 0 0 -20px;
}
ul.social_sb li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_sb li a {
display:block;
width:35px;
height:50px;
padding-right:0px;
position:relative;
text-decoration:none;
}
ul.social_sb li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_sb li.sbfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3mPFgojyujpiTcOg8qb7stBAvGghXClua_dhWfsiXxw2Gmdo1N_ksp5Z9L9R2hOcCCK0Ss6iLayyo8GPS93Rk25E0ZQ08CMlMcvxhR1KnQ488f7k0oyFeS4Wus1jlfYwyTpERxqkRce5/s1600/Facebook.png);
}
ul.social_sb li.sbtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitorSvSGs0NgOaehML2tST1-KMV-UtWwz_371Y-3dbY4z6bsLf3CMxRxe4jR9HUAC3InB0_RA7ZgqP2Lo9CiQOwsQoQL14KefC0U0mptQ2kN5Ib6zEFKmk9PDv02nDjNGrkjHq86tHgBlR/s1600/Twitter.png);
}
ul.social_sb li.sbgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS4UB1_Xs1CvpJLmKNBSsxflZe_EiY2XeXas18LHxCs0WZx-LjwZTkjIL1EHwGE9oYXrLNrun_HxwDXKeXkqFH72NOvwzrulQjuzLa6ft15YKVxEDKv1-7VghZ4kQlEufIDVQoru4gRiMN/s1600/Google+.png);
}
ul.social_sb li.sbpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrETuDg_0fW9SDCcoSsp6kKfuB0aPdR_RpWqLy-sWC6JE90qSziltGe75nbqfOoQYV886KUoYAKTL67UjIp_iQdwBoi7WcGLu2VkiLympSrisFXX4q5BA_t1nOXLUCwoOufJdXhYEGjsxN/s1600/Pinterest.png);
}
ul.social_sb li.sbstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZEMZoe0ltroBwC2HN9S6y-El8wQA02y0hpCSpCtjOowRESs6ffsdIdH-KekXfTUMJ8LvmGd8C7tGPEEub_Dvp4sGu9_vb4RneYNevYcTGXU6FVenpRqqLEjQnW1xdWYMLRxKsW074_AnV/s1600/Stumbleupon.png);
}
ul.social_sb li.sbdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw8cL8JNo-KFo-sLQocVMAbIMwRJCKCBzI61hFWghaEubUDQBar1wchbFfhqC1PHpUDWPD2bD0wkJCZwnOqNw7OLXlzN6QKHx94gBfviSplvJkHu7PaL2tdktoSuSMVi49gEZil_Af4T1k/s1600/Digg.png);
}
ul.social_sb li.sblinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ06aTY7clWIfqnmK2H1xms0J_kAO4XSmAHG1Zh5z4AxRbTeAL9VqVLi3ghDuBFo4bESoAq7-DQikMEFzvW6jp7uYsLKiby3IbGOht74qUjdhB3BI7SDdxBBTDQwKrqHfj9ycpTqR8KIv7/s1600/Linkedin.png);
}
ul.social_sb li.sbrdit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDdflsdqcknqktN-FE-b0sOOZFssYZcG2QPDhLjydQbUmbZ244sb5cBFGT1yz00crsNCQxMgQ-tKSkWqS4rpmQvF0yCgo7IbhPcj9rjoXbTTJvb9fYJUO8YfIud9AKAEeVfTXio5b2_sqZ/s1600/Reddit.png"); }

ul.social_sb li.sbdelis { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfyBkX78RAnro-MqqLb9EfqTMlD068yMAo5KY3Zb024KuKpvqLYsFqw4daxhglolAQ8txkxo9dA6uvmqTSyRBujRdcFRalcMBrDXUkGi_763oEv6GV1Wz5plfApWv-ebdLZDqbENG7IfpQ/s1600/Delicious.png"); }

ul.social_sb li.sbtechno { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFc5_pqlBCIoOF95zhwc_HuynV_JWSMtTGN7z_hil-06pPIIvdlHkZi_XjqMFQKDNpFdtNNnBRMc6GVPFAOKh6BRbKSJb4SCOlrAoFVZdhefGjlZb9CFoR51O25dfeAnCcINgAKi1vVEGe/s1600/Technorati.png"); }

#animation_sb:hover li {
opacity:0.2;
}
#animation_sb li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_sb li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_sb li:hover {
opacity:1;
}
#animation_sb li:hover a strong {
opacity:1;
top:-10px;
}




.sb-button {
    margin: 50px auto;
    width: 200px;
}


.sb-button a {
    background: -moz-linear-gradient(center top , #EA6D4A 0%, #ee8a6e 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px 'Merienda';
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

  /*TYPE*/
  color: white;
  font: 17px/50px 'Merienda';
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  /*GRADIENT*/
  background: #ee8a6e; /* Old browsers */
  background: -moz-linear-gradient(top, #EA6D4A 0%, #ee8a6e 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EA6D4A), color-stop(100%,#ee8a6e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #EA6D4A 0%,#ee8a6e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #EA6D4A 0%,#ee8a6e 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #EA6D4A 0%,#ee8a6e 100%); /* IE10+ */
  background: linear-gradient(top, #EA6D4A 0%,#ee8a6e 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#EA6D4A&#39;, endColorstr=&#39;#ee8a6e&#39;,GradientType=0 ); /* IE6-9 */
}

.sb-button a, .sb-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.sb-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;

}
.sb-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.sb-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.sb-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

}
.sb-button:active .up {
    margin: -20px 0 0 10px !important;
}
.sb-button:active .down {
    margin: -70px 0 0 10px !important;
}



  • Now Search for Mentioned below Code.
<data:post.body/>
  • Now Paste the Mentioned Below Code below the following Code.
<center>
  <div style='border-bottom: 1px solid #ddd;  border-top: 1px dotted #ddd;  color: #000000;  font-size: 24px; margin: 45px 0px 10px;  padding: 15px 30px'><b>Like the Post? Share with your Friends:-</b></div>

    <ul class='social_sb' id='animation_sb'>
    <li class='sbfacebook'>
    <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,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='sbtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='sbgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
<li class='sbpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='sbstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>

    <li class='sbdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Digg</strong></a>
    </li>
    <li class='sblinkedin'>
    <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;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
<li class='sbrdit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Reddit</strong></a>
</li>
<li class='sbdelis'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='sbtechno'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
</li>
    </ul>
  </center>
  
  • Now Press Save Template

Conclusion

We will include Horizontal Social Sharing Button with Comments Counter beneath Post Title in  Blogger. We have specified a few steps underneath accompany them precisely.
So Guys! I Hope you will like this widget, If you have any inquiry don't hesitate to ask me.
Like the Post? Share with your Friends:-

0 comments:

We're excited to see your comments. Be that as it may, Please Keep at the top of the priority list that all Comments are directed physically by our human commentators as per our Comment Policies,and all the connections are no follow. Note:1. Please do not spam Utilizing Keywords within the name field territory is prohibited. We should appreciate a particular and reminiscent discussion
comments powered by Disqus

Subscribe to: Post Comments (Atom)