Add Cool Mouse Effect Social Media Buttons on Blogger

Guys Agar social buttons main mouse ka effect aa jaaye to aur bhi jyada attractive lagta Hai To aaj main aapko yahi sikhaonga ki aap kaise apni website/blog mein mouse effect social buttons add kar sakte ho veh bhi kafi aasan steps ko follow karke.

How To Add Cool Mouse Effect Social Media Buttons on Blogger

1) Go to Blogger Dashboard → Layout → Add A Gadget.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.

<style>#pctoolstips { width: 260px; margin: 5px 20px; padding:5px; } #pctoolstips li { cursor: pointer; height: 48px; position: relative; list-style-type: none; } #pctoolstips .icon { background: #D91E76 url('http://1.bp.blogspot.com/-T2-Y9IQEx-Y/Ujvot2xpwjI/AAAAAAAAA88/7gydA10QKl4/s1600/pctoolstips.blogspot.com.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42); border-radius: 30px; display: block; color: #141414; float:none; height: 48px; line-height: 48px; margin: 5px 0; position: relative; text-align: left; text-indent: 90px; text-shadow: #333 0 1px 0; white-space: nowrap; width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none; } #pctoolstips span:hover { visibility: hidden; } #pctoolstips span { display: block; top: 15px;position: absolute; left: 90px; } #pctoolstips .icon { color: #fafafa; overflow: hidden; } #pctoolstips .fb { background-color: rgba(45,118,185, .42); background-position: 0 -382px; } #pctoolstips .twit { background-color: rgba(0, 161, 223, .42); background-position: 0 -430px; } #pctoolstips .youtube { background-color: rgba(167, 0, 0, .42); background-position: 0 -670px; } #pctoolstips .rss { background-color: rgba(255,109, 0, .42); background-position: 0 -718px; } #pctoolstips li:hover .icon { width: 250px; } #pctoolstips li:hover .icon { background-color: #d91e76; } #pctoolstips li:hover .fb { background-color: #2d76b9; background-position: 0 2px; } #pctoolstips li:hover .twit { background-color: #00A1DF; background-position: 0 -46px; } #pctoolstips li:hover .youtube { background-color: #A70000; background-position: 0 -286px; } #pctoolstips li:hover .rss { background-color: #EC5601; background-position: 0 -334px; } #pctoolstips .icon:active { bottom: -2px;-webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; } </style><ul id="pctoolstips">
<li ><a href="https://www.facebook.com/USERNAME1" target="_blank" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>
<li ><a href="http://twitter.com/USERNAME2" target="_blank" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span></li>
<li ><a href="https://youtube.com/USERNAME3" target="_blank" class="icon youtube" >Subscribe on YouTube</a><span>Subscribe on YouTube</span></li>
<li ><a href="http://feeds.feedburner.com/USERNAME4" target="_blank" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>

4) Customize your setting.Find any word click F3 or Ctrl+F.

• Replace it USERNAME1 with your Facebook Username.
• Replace it USERNAME2 with your Twitter Username.
• Replace it USERNAME3 with your YouTube Username .
• Replace it USERNAME4 with your Feed burner Username.

5) Save your Widget.