GRAB THIS AWESOME SOCIAL BOOKMARKING WIDGET WITH 3D EFFECT.

 On Minggu, 16 September 2012  

In our previous post,we discussed on “How to Add Animated Follow-us widget to blogger”.

So likewise,in this tutorial we will be dealing with how to add animated social bookmarking widget with 3D effect.

This widget is so cool that when hovered on,spins 360 degrees and spins back when released.
To add the widget on your blog,just follow the instructions below.

Login to Blogger,then go to Design » Page element and select 'Add a gadget'.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.

<style>
#social a:hover{background-color:transparent;opacity:0.7;}
#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);}</style>
<center>
<div id="social">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR FEED URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_zP1rLPAMMbiMbyH5pSmeCK_W5c9DWZhl6qWQ-kwibb8m2U-j26p4J9lGH05CeTkmX_3zBBTCF79wQi5fjGmzQwrSVVBuQa7vK11SCXKfhv5mRCeSwQ_KpgQUlkt9cszFElvz-bPJ8j0/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End RssIcon-->
<!--Start Email Rss Icon-->
<a rel="nofollow" title="Get Free Updates Via Email" href="YOUR EMAIL RSS URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZWM1jRAyyJNrcUiFegtcNXrO64Mkv1omF1cykRS_y1mCFpbLhdV_mozp46RhjdNOILzgzvFeNdpxtq5YeVnzSJZI_9fc02jtXrMhKVvRyz7XBBMoXkgTXt6Gx1tDYobbP2keb7T4jZYN/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Email Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR FACEBOOK PAGE URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpoM94glXq1hyMvTLL6QrW8d8WbH1gO6NxpEluJ9XVXPIC8c4NZOKR4afl3NyFEcrPKgMYQJQuOafMfrXXxM1Y_MRRddSrqG7deoBOIqKUy9NpI9E9Quq7vDFqFE_bnIGexNcOuZx4oGu/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR TWITTER URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJD29fgO20pRtVhUGZ96NZ9yB_E1Fbl3THzZ9bKf3r-MCuaNw6EFWxq2LLrWR_QR2th0kDy5YEko9iZ5jYqD1DM8Xb86pWzBKo1fRyINhO_IgxsJgI32k0UUhjfWOyspGv3Y_1ZpTdY0L/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google Icon--> <a title="Follow Us On Google " rel="nofollow" href="YOUR GOOGLE PLUS URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MUURk-pVu5Tn29-4Ub9LGM2g32JqwVAKail63i7AvgB_YoYQ0fwbsVQGxyPPzwgi2GEy-IIXmMItIZYO5y4erz_KreEK8TBcLY9u-NYP3ug0cIUfY2nzLir7UNVbmvz2w3OGwEJYWbWI/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--End Google Icon-->
<!--Start Pinterest Icon-->
<a title="Follow Our Pins" rel="nofollow" href="YOUR PINTEREST URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVrfIX8neHFfDitreQ5S3eL504gkCy2XeukKPbAzKmHF-jVWnU5EafPi-suNvjeHYncVFoATxrgH42iYF5jTt_5TvhcMnI4WhTGTcq9Cajk_AF4jsM5cvBz0cOuXQYNq_A1hJybQrIsK-/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--EndPinterest Icon--></div>
<!--Start Feed Count Button--> <a href="FEEDBURNER URL HERE" target="_blank"><img alt="Feedburner" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--End Feed Count Button--> </center>

NOTE 
If you don't have any of these urls,you can simply remove it for the time being.
Just delete all codes from where you see 'START' to the 'END' part.

GRAB THIS AWESOME SOCIAL BOOKMARKING WIDGET WITH 3D EFFECT. 4.5 5 Unknown Minggu, 16 September 2012 In our previous post ,we discussed on “How to Add Animated Follow-us widget to blogger”. So likewise,in this tutorial we will be dealing wit...


Related Post:

  • SOCIAL SHARING WIDGET FOR BLOGSPOT.Previously,I wrote on how to add stylishopen heart bookmarking widget on blogger& today,I'll be giving some cool sharing widget to integrate on your blog.This widget contains: facebook,twitter,digg,stumble linkedin and technorati buttons which will a… Read More
  • “BOOKMARK THIS SITE” WIDGET FOR BLOGGER.́Bookmarking widget̀ in my perspective,is one of the ways you can retain your blog's visitors. Some people tend to forget/ignore bookmarking a site even if they like the post. Having the widget installed in your blog can help prevent that.Bookmark sc… Read More
  • CREATE CUSTOM PERMALINKS FOR ALL BLOGGER POSTS.You might have noticed some blogs having shortened urls at the top/bottom of every post with a “Share this post” text. This is a very nice widget which can help increase your blog's traffic as visitors won't have to go through the stress of manually … Read More
  • HOW TO SHOW/HIDE BLOGGER WIDGETS ON PARTICULAR PAGES.When you add a new widget/gadget on your blog,it automatically displays on your blog's homepage,static pagesand post-pages.Whereas,there are some widget which is not needed in particular areas of your blog.E.G,Widgets like Recent comments,Related pos… Read More
  • PAGE-LOAD TIMER SCRIPT FOR BLOGGER BLOGS.Have you seen websites displaying web-page load time? Do you want this feature in your blog? If yes,then Read-on.In this post,I will be explaining how you can easily add this widget to your blog.How to add load timer to blogger blogsTo add this widge… Read More

Tidak ada komentar:

Posting Komentar