Monday, February 11, 2013

SpiceUpYourBlog Style Social Widget wth Spinning Effect for Blogger

spice up your blog style social widget blogger spiceupyourblog

SpiceUpYourBlog is a Popular blog which covers topics like Blogging Tips, SEO etc. You must have visited this blog before and if you did, you must have noticed its awesome social widget. The Social widget has a nice spinning effect on mouse hovering. The widget looks really awesome and attractive. Today I'll show you How to add SpiceUpYourBlog Style Social Widget on your Blogger Blog.

Live Demo

Features

All Major Social Buttons; Facebook, Twitter, RSS, Feedburner, Pinterest, Google+
Spinning effect on Mouse Hover
Attractive

How to Add this Widget to Blogger

The Installation process is really simple, All you have to do is follow the steps given below.

Log in to Blogger > Go to Layout
Click on 'Add a Gadget'
Choose HTML/Javascript
Copy Paste the following code inside it

<style>
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}

--></style>

<center><div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/The-Area51" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ao-vexRiEthLvnGMhw2Iet2gpbwaipBFR30PjErkw4UgzIYonS3gw_bLxZlLTvSVl-euvYEOizrXAUV_Jr6LiSJKgw0UunXO9FDriueyQUaBQusPaH9Hn6krm3cleDcimZgryMMeaqJ5/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=The-Area51&loc=en_US" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUORDIvtFJ84kJ8D6-c1oVn5eN1Nfu7sB75RpIZC4fAoP_-IDnjfZYVn5gGxCMRwJQb4q4m8bbNJM7iUaSOHglSMZnW_phS_Ky4QVFNhMe254W0LEHr5AdkPSe4zYzS8pCUkFrXo8Gg1l/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="http://facebook.com/thearea51blog" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVkOGAs33RIwm8ysxwvh1FGrn_X_LTalMNMm0nnaTxoeAhDDj8JQUfIHvB7d6qaeExsSl6EvZtv5vCYPj0OQRLBTDp7o-rfuXlOHbFP7KUrQ7kNobK3WHg3ygM8awum-GDCOolCSANUtFM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/jimmieluthra" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeaMOaCQVZBv7y1x0MEpwP5acTUyJ_lMqWXQGKvmDpHDjXWoXVd5dDB2_PIvba5HOKakkyZxDz837affhpP5FwFoioxivDSXgG8JD0hSAu4OJ6PAQLXhuiwzYoaXZ3lVXtBJF6UpQxVhM/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/117521503834739609237" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNt6UfSyNQHUk6iGwQwx6UzhvgaPcd43HLt5Yg9lsDUEefyE902Qk_cmqtWxNL_m5qb3sD9dH2IsPAv3e7iTYdG0DN7h_axQ9Fo4bZhwrEDCZ5Ym6sYhM0SAdgeNguJox8r3x88xc8TaJJ/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/jimluthra/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdjZkCXcK6QUfU4bx3fMqlHdkB-V-3Pv09x1IPY5NitGH0zhIFKX60iEQjictsHRep4sVbi23iLkTyz6hnbAp9tyQjBLHq6_CkWWJVSTTEnAbKjOZFHRK_VUzC99c3LostuOGQAJ9oSn7Y/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div></center>