Add super hover effect social share button in blogger post footer 6

| | , , , , , , , ,

Hi friends now add new style social share button in blogger post footer easily by this method.






Follow simple and easy step to adding this special button in post footer--->>>>

* First go to your blogger Dashboard.

* Click in design tab and edit HTML.

* Click in small box to expand your blogger template.

* Now find this code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

.social {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7yaY5mZ0nQyFmOFz65X_1VC3HiNj0wTEoIKDDFFEa6VAhyphenhyphenl0BmgMHYUsKP3svk_hYut81jpvruhnjp86l4fmSgzU2Cj0GUybGTqnStgpJYG62vT8lp_e89v60tkmqxogTw8kxibm0zT-/s1600/social_bg.png) no-repeat top;
padding: 5px 5px 5px 5px;
margin: 5px;
text-align:center;
font-family:Trebuchet MS;
font-size:12px;
height: 78px;
}
.social img {
margin:10px 2px 0px 2px;
padding: 3px 2px 2px 2px;
text-align:center;
border:1px solid #cfdde9;
}
.social img:hover {
border:1px solid #abcce9;
}
a.opacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}
a.opacity:hover img {
filter:alpha(opacity=75);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7; }

* Now again find this code 
<div class='post-footer-line post-footer-line-1'>

If you don't find above line you can find this code <data:post.body/>

* And copy below code and paste after
<div class='post-footer-line post-footer-line-1'>  
or
<data:post.body/>

<div class='social'>
<strong>If you like this post then consider sharing it with others.</strong>

<br/>
<a class='opacity' href='http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpiJE-k9ZMCevk6ehcoPx_cMHSgMkWdtuYDcRxMjAcP7xljrpGV7MgUDsshEcBenmT0QtDfFuFLtCpzcI68UENUMlo9zmYxvokfx93o-hocwmPZUACqBu_egZDvm9DLSyTLlYkm5rQg6F7/s1600/stumbleupon_icn.png'/></a>
<a class='opacity' href='http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnWVsavitMlYHqCQqs380NEddFOW6IkWuF-M0qnNG3pn4Vezpui4_UQujrIiB4GYKk2GBBHQnep-Y2Z6ZiUsQ6lJ1Z_T-Z_zimR_9nc4mVE-t_5yhBUcthkj369QE3P7le_e7xjXhJvvI/s1600/digg_icn.png'/></a>
<a class='opacity' href='http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh93olzi5K1InMwxYrLXyoWpt_W95u7kRAKoVQye4K_PfG_W2yQFIdYTHgbmw7BfivBAWOQZJDWlld8WVUmy5JcrnN7-MXCvS-G5vY9e3mezXjBbwsEK-7XkAAoO8FBHPgL5PRU78JuvwaC/s1600/twitter_icn.png'/></a>
<a class='opacity' href='http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeBSvu7EUF-Cd7hpeQ2bYNG9xdYinoGjboadvIixG5uTiBRaH8iExwkcdFUmkEyi300LERTYv5Cy-Uup5ytpqSftn1_FyjiXBb2bw4NjwZNN8qz1Etnv38BQTZZvciorcHs3tifoBJJqu/s1600/delicious_icn.png'/></a>
<a class='opacity' href='http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65UEVOCrbiDH1EY5GB27TMeVrrl9XhDOwQo0TpKXZsJNOExa5twyw1-aE7fYsGCGbVJYt5pIR_uxe7wF8aeokNu5EAhCb4LUFeeOHnB-1fT2wq1aahiM3gk36i40cThR1cgVHb7s9R4Q7/s1600/reddit_icn.png'/></a>
<a class='opacity' href='http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3CVc_F1BsP0BRVxoM-Eyq7VVigQFiACfRCiTPe7rcIMtGdTftDYj1RZvt0gxnVy5EHxfZCQNX0k1Hhrvu-6NrySPHhAAJKjVlbQ-Zyprp1prYJohyphenhyphenwXkdl9Yozl_ufEAYkXB_3MP5zWi/s1600/technorati_icn.png'/></a>
<a class='opacity' href='http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Q_mg121zbOSpJpJ5MkSW2QgMXRoJ2HML4OQY_fl6KZEf1kM5kUpFSqeq7-A2QeYOOzEEcuZc4fWx7F95Mzzh-zZOrbFfOe5_kNT4_VzMXnjx6iPJWG0OVDvlXTTZ6S1GW8NZjTuZ2dcb/s1600/facebook_icn.png'/></a>
<a class='opacity' href='http://www.mixx.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Mixx' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbeXAqtN2W4KJ4TcVBydhAtVu-VKveskdLOyiWaTiqyh5ReAbEKGC8CnvtsZWPND_7_xevqQKQrpqiEuaLl_K_Bu6pymHxftShyNIfTm142OLvhHwfQC2PbdhhZlYgBfMbJ2Cc4vb0lD4X/s1600/mixx_icn.png'/></a>
<a class='opacity' href='http://www.linkedin.com/shareArticle?mini=true&url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_MPHpyXYyHXfF4rLGteaed3eg_ZGGGfTGi4mC4zkJBkHHfEP3jY0jd-X2yRLwP4BqaFL3ZPx42i3loZrYgnS1DvruD9d3XTdplS5nDi46gpee7BGcaFSQ-Lar5oZk6vGUCP-Uwf4gEQ4/s1600/linkedin_icn.png'/></a>
<a class='opacity' href='/feeds/posts/default' target='_blank' title='Subscribe via RSS'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJ_WOiYV_nfNUd46dmdPRqueS7ws-XbZt4HyGmuu8sNF2L2STqUYK4uFUzLoV61G2c_NvEvtkJ9C_L4Gu6w4413kp8zmSRY2dJ-cx7DNqdvwcqLaB3zLw0KCgxLGDZAeki7T1Cj7SZYbm/s1600/rss_icn.png'/></a>
</div>
</div>

* Now click to save your blogger Template and now you are done.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Add super hover effect social share button in blogger post footer ~ Twitter FaceBook

6 Responses So Far:

TechDoz said...

This blog is looking awesome great work

Mij Rai said...

This didnt work ??? need some help

Anil Kumar Singh said...

This work what problem with you. Tell

Mij Rai said...

This error comes:The template is invalid. Please make sure that it is well formed and complies with the Blogger Template Language Specifications.

Anil Kumar Singh said...

Remove last div tag then apply . it is working

Anonymous said...

nice post it is working .... .
nice thanks

visit my blog bestbloggerarea.blogspot.com

Categories

Select Your Categories