Cool Social Buttons with Rotate Spin Hover Effect

Hello Friends Today I am intruducing an amazing Subscription Widget. This is a social sharing widget as well as a subscribe now widget. I think after viewing this widget everyone like to use this on their blog.And the main feature of this widget is that its like a cup shape and hover 360 degree when you move cursor over each icon and when you remove the cursor it rotate 360 again.

This Widget also change the colour of itself when mouse placed. So why are you waiting Get this now.

How to install it?

Go to Blogger Dashboard > Add A Gadget > Edit HTML/Javascript.

Now paste the below code in this and save your template.

<div class="widget-content"><style> ul.social { list-style: none; overflow: hidden;}.social li { float: left;overflow: hidden; background: none !important; padding: 0 !important; margin: 0 6px;}.social li a { display: block; width: 46px; height: 58px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHsBXSbEk2Wm2ZpgE1aNn6GOGrAXRIsiNp_rlG0RewV_cCH8Q-HqywC7wqvLgrjIZKzc5e5k7_W3XPqlFwJVU67WMmL-dBoicYDMc8CquaJKrgxEsrN9FEL9TFHPnt1mHLwvsVXzptEO4/s1600/TNT.png") no-repeat transparent; text-indent: -99999em !important;-webkit-transition:ease-out 700ms;-moz-transition:ease-out 700ms;-o-transition:ease-out 700ms;-ms-transition:ease-out 700ms;transition:ease-out 700ms;}.social li a:hover { padding: 0 !important;transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transition-duration:700ms;-webkit-transition-duration:700ms;-o-transition-duration:700ms}.social li.twicon a { background-position: 0 -1px;border-right: 1px solid #e6e6e6;}.social li.pinicon a { background-position: -47px -1px;border-right: 1px solid #e6e6e6;}.social li.rssicon a { background-position: -100px -1px;}.social li.fbicon a { background-position: -150px -1px;border-right: 1px solid #e6e6e6}.social li.twicon a:hover { background-position: 0 -60px;border-right: 1px solid #e6e6e6;}.social li.gicon a { background-position: -200px -1px;border-right: 1px solid #e6e6e6;}.social li.gicon a:hover { background-position: -200px -60px;border-right: 1px solid #e6e6e6;}
.social li.pinicon a:hover { background-position: -48px -60px;border-right: 1px solid #e6e6e6;}.social li.rssicon a:hover { background-position: -100px -60px;}.social li.fbicon a:hover { background-position: -150px -60px;border-right: 1px solid #e6e6e6}.TNT{width: 300px; float: left;}.TNT .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;} .TNT .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;} .TNT .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;} .TNT .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;} .TNT .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8kl0QGnktcgRMJz8rAGHy7_7Ftm6WaiLz0suxmQ4obqA1Eb-uoTNyh5bAd8KuWNjaX-WVsxYZ_3BOMaEuyf6L7uB5o_EDjU5FrOZcOzaiRAa1mLGjw8sp_f3AgxyZa9weF5g0_TwH5c/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px; line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }.emailbutton{background:#f7f8f9;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);color:#888;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;}.emailbutton:hover{background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important;}.email{clear:both;width:100%;margin:10px 0;}.emailform{position:relative;width:300px;margin:0 auto;}.emailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-family:georgia;font-style:italic;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;font-size:14px;color:#666;}.emailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:0;display:block;line-height:16px;}.emailbutton{padding:8px !important;}.emailform, .emailinput{width:98% !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:auto;}</style><div class="TNT"><div class="subicons"><ul class="social"><li class="fbicon"><a href="http://facebook.com/mybloggernews" rel="nofollow" target="_blank">FaceBook</a></li><li class="twicon"><a href="http://twitter.com/mybloggernews" rel="nofollow" target="_blank">Twitter</a></li><li class="pinicon"><a href="https://pinterest.com/hammadansari" rel="nofollow" target="_blank">Google +</a></li><li class="gicon"><a href="https://plus.google.com/104795091950896998888" rel="nofollow" target="_blank">Google +</a></li><li class="rssicon"><a href="http://feeds.feedburner.com/mybloggernews" rel="nofollow" target="_blank">Rss</a></li></ul></div> <div class="emailsub"> <div class="emailicon"><p style=" width:240px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Receive Updates In Your Inbox by submitting your Email ID below.</p></div> <div class="email"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggernews', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform"> <input type="hidden" value="mybloggernews" name="uri"> <input type="hidden" name="loc" value="en_US"> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailinput"> <input type="submit" class="emailbutton" value="SignUp" title=""></form></div></div></div></div>

Now save you template and see your blog.

Customization:

Search facebook.com/mybloggernews and replace with your facebook link.

Search twitter.com/mybloggernews and replace with your twitter link.

Search pintrest.com/hammadansari and replace with your pintrest link.

Search this https://plus.google.com/104795091950896998888 and replace with your google plus link.

Search feeds.feedburner.com/mybloggernews and replace with your Feed burner username.

Search this http://feedburner.google.com/fb/a/mailverify?uri=mybloggernews and replace with your email subscription usename.

Acknowledgement:

I hope you will like this new Widget. I am waiting for your valuable comment. If you face any problem drop it in the comment box.

Peace and Happy Blogging.