Subscribe:

Monday, 7 April 2014

Add SpiceUpYourBlog Style Social Widget In Blogger

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.this is very cool widget.Its main feature is it covers all major social links facebook, twitter, feedburner feeds, google+, Pinterest.It changes your blog look attractive.



 
 
How To Add SpiceUpYourBlog Style Social Widget In Blogger?

  • First for All Go To Blogger.com > Page Elements > Add a Gadget
  • Choose HTML/JavaScript from the list of the gadgets
  • Copy and paste the code below in the content box. 
 <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/pctrickstou"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJomSuhAq2Fd9QzGOd9w2adRNfAfv6iuflyyaR_OqKT_wFJg7Uv8LO1dx1EWg-TEu0nMBjyBKaaCN531PMO2e4fI1XlCtRCxZLj9mbsywPmMx0PbfEEZu8rLkkVaqm4Y3rYYLeRDVYh_u6/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=pctrickstou&amp;loc=en_US"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyQAr0GogN4yxjxo-HP2YxzGMkAFXykhhLQ8iZ8nRdwEV1FLSR_pkVU5VDDzynTGPIG2GB3hyJXpXOx8o59d7G6WdK-i0ATnylbc82JqI6a-OUd0wnLiJRwGh9ORdVpS5Oq9LugzSPp3l/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="http://facebook.com/pctrickstou"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaVvHfHHzjfcQdIcRzxGgOCPjoa6nzenKeW-8Oa3dDaSET3eKVteVD9cJJCtonUsIAiZ_xB2XOsD9gw8Cwf-vFAbV-GD6vQtD1IT_zLMrSwMoYQ8ZBMe7mJbpRoWf3nmdTSVsfpKLwGtR/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/poornachandra"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOCKnXVw7ufH0NvyhGc3LqjZiv0KN31b0ycXQuqv10EKPVKuxPgDm1LsTLJpkuo6RGQ4Oixu_lcLselChsP6kTPq-C2daK0hS2XavYg8yIxTSq77J0QkvbXds5sLRf0lGhLnZnnFeL4r2/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/104283015279880391921" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3_L81T3z5pDJAYCAWwYxJU1ibXKoq0OBTVkrAFsKyq7o_iWp3r2Rs9TVoIXEVTgtiJUYbrhLhK7ppMFriP5Yz4aVLAYAqkmwKRQwbLhxqOKAib-VTDDDFZ9L-hnjF9jKFY71pe4-9mg9/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/YourUserName" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhMadJ6JX7gGeF0KDjp9uiHMtlXz2Z1EZzcYZ23OuwovVGQ7QKrN-8n1ylCxuTxXCBSUecE4w2968gpaxrqOUBw7iUjZzu4JLY2OqZIyNmv2-0rlQraLa_lDRgz8o-XRdmDbQxBjhzWOz/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div></center> 
Change all Bold Red words with your URL's

  • Replace pctrickstou with your feedburner Feed ID
  • Replace pctrickstou with your facebook Page ID
  • Replace poornachandra with your twitter ID
  • Replace https://plus.google.com/104283015279880391921 with your Google+ ID 
  • Replace http://pinterest.com/YourUserName with your Linkedin URL
Well Done!

0 comments:

Post a Comment

Pc tricks
Powered by Conduit Mobile