Social Icons

Featured Posts

.
IF Any Code Was Not Working Please Tell Us By Contact Us Form And Any Thing You Wont Tell Us We Will Post In A Days

Wednesday, 29 May 2013

Below Post Social Sharing Widget for Blogger

This  is  a  Below   Post  Social    Sharing  Widget. In
this tutorial im gonna   explain,   how to  add it to end
of blogger  post. it  include  nice  title  hover effect too.
By  using  this  widget,   you  can  share  your  social
networks  with  one click.




Below+Post+Social+Sharing+Widget


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code Before ]]></b:skin> tag


ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix 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_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3RRUCOnvj249fw5RXJraJJAC4E353kdDNbe23Jxdv5rFn2CkC_bzFWZpUpwsJWO8JefVQqurzdiebBR5U44ci5mPkJQdc5jEeERYaftK6MBBHlmrjSbJVsmwQla6AHUWeI9etRh9cRS2V/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3D34j9aEuhn-_Sx1OylNTO1g6tLOHDeCeVqpuLgZMEXk2G48i1wuJXtJ2eYmOPgRTXEHY-ZrZEF83ypnuv7NyLzmO9MDvpxRrXLgaAY_fLjFb5GMYq8bmKKnJg3HPr9trM-0r7bHymR_/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jNc2O5Vvq9Fb4pSwm6-x8sztAEqhoS3p71QMQQGKEmraKOd50gP-Kj6sYASaXzDVd2RxQZH9N_qpCbls7hMgzF5HZCCOMp_9Rm-u6bcX2IFEyX-rWIH46ZiNZcKqRW51nlX6fsArP5ZB/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_jRnOmx8S1I7_xEr5B52sNIFFmqG2iBqarW4OF7EXJKYeK9WbxGzEeIkZrzUU1qULTvUaTV_NvbkApSE75V8eqLLJX9jHOvWbzwNna7LkkceQButeROLo7J0WcPLcRZMiKGt8A_09jMRJ/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Za3ZV7klcKhd76bnBXHFvT5uxgRpuBFfFQMkTDWgvC37f5U7pApQEk3kMxY_yk9hljlj5sV30wTpQg8Jvtsm86-aEGoiic9a1pSzeA_F2ZG3ZM39flmnemcGJdcuSNK1QqQPx0KbGazX/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPUOD3Bm8OpSrzgmGCDmchA12F4id2ZPXB7CdkbJ1zJM4bnKbJt1WDY89u95tBhEuJ-VAiBJvik69WUnONWVLm0XLljvyciIQAvFOGJ3EKACb5KD-lpmnWDIk8COzfVTn8_WXcer9mIVIZ/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn94_c1jhTg8Kf7alwC9okuhCpFbZST6Ez6HVh2bWZ_xTTX_W9QvH3oGTG3HF79ovWVuENQI9mRBOT4-u5VWrwDjfG13jPxtAXMlLyLlh4xFXR92fw_qip0_64IPq_d99uPPqVMfjMcO84/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}


6. Find this tag by using Ctrl+F    <data:post.body/>

7. Paste below code Before <data:post.body/> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_btrix' id='animation_btrix'>
    <li class='abfacebook'>
    <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='abtwitter'>
    <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='abgoogleplus'>
<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='abpinterest'>
<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='abstumbleupon'>
    <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='abdig'>
      <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>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <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>
    </ul>
</b:if>

8. Now save your template
    You are done...

Releated Post

  • All About Making Money From Blog
    All About Making Money From Blog
    29/05/2013 - 0 Comments

    Blogging become a   very regular  and effective phenomenon today.  Since, internet  has…

  •  Curved Glossy Navigation Bar for Blogger
    Curved Glossy Navigation Bar for Blogger
    22/05/2013 - 0 Comments

    This is a curved glossy navigation bar. Im gonna explain how  to  add  it  to …

  • How to add Floating Facebook like box to Blogger?
    How to add Floating Facebook like box to Blogger?
    24/05/2013 - 0 Comments

    Everyone know that Facebook is largest social media site and Over 1 Billion people use…

  • SEO vs PPC: Which One is Better for Your Business
    SEO vs PPC: Which One is Better for Your Business
    23/05/2013 - 0 Comments

    Generating organic traffic is  not  so easy  now days. You have to make …

  • Make Money From Blog
    Make Money From Blog
    23/05/2013 - 0 Comments

    Most of people are trying to earn money from blogs.They always ask what is the best way to earn money from…

  • Social Media And Rss Subscribe Widget For Blogger
    Social Media And Rss Subscribe Widget For Blogger
    29/05/2013 - 0 Comments

    In  this  tutorial   im   gonna  explain  how  to   add …

If you Like Post Share it with Your Friends.

Dont Miss And Other Chance Stay With Us

Get Free Updates in your Inbox
Follow us on:
facebook twitter gplus pinterest rss

Follow us on facebook

 

Sample text

Sample Text

Sample Text