Tilting Social Media Follow Me Buttons for Blogger

This are another Social Follow Me Buttons For Blogger. I have named this buttons as "Tilting Follow Me Buttons". They are named so because of there behavior on hover. This buttons look normal and on hover this buttons tilt a bit. This buttons are tilted 60deg. You can change there tilt by changing the 60 value with any other value. This buttons can be place any where in your blog. So have them in your blog.
See the Demo You Will Understand everything.

View Demo

Steps To Add This Follow Me Buttons To Blogger

• Login to your Dashboard. 
• Go to Layout.
• Add a Gadget >>Html/Javascript.
• Paste the below code there.

<style>p#blog-toolz_tilting-buttons img {

}

p#blog-toolz_tilting-buttons img:hover {
    -moz-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

</style>


<center><p id="blog-toolz_tilting-buttons">
    <a href="http://www.facebook.com/BloggingTrickzAndToolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-fb.png" /></a>
    <a href="http://www.twitter.com/BlogToolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/102590191362594199985">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-g.png" /></a>
    <a href="http://www.feeds.feedburner.com/blog-toolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-rss.png" /></a>
 
</p></center>

Note:- Change the above red text as per your requirement.

• Now, click on Save.

To Have This Widget Below Every Post.

• Go to Templates >>Edit Html >>Expand Widget Template.
• Find for <div class='post-footer-line post-footer-line-1'/>.
• Paste the below code just below the above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>p#blog-toolz_tilting-buttons img {
}

p#blog-toolz_tilting-buttons img:hover {
    -moz-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

</style>


<center><p id="blog-toolz_tilting-buttons">
<a href="http://www.facebook.com/BloggingTrickzAndToolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-fb.png" /></a>
    <a href="http://www.twitter.com/BlogToolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/102590191362594199985">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-g.png" /></a>
    <a href="http://www.feeds.feedburner.com/blog-toolz/">
<img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolz-rss.png" /></a>
 
</p></center></b:if>

Note.1 :-This widget will only be seen on the post page. If any one want to have it on your home page also then remove the green text.

Note.2 :-Replace the above red links as per your requirement.

• Now, click on Save the Template.

It's Done.

Categories: Blogger Widgets , Social Media Gadgets