Social Bookmarking Buttons With Spinning Effect for Blogger

Till now many social bookmarking widgets has been released for Blogger. Simply, social bookmarking buttons and icons helps you to make your blog socialize and get more traffic. Adding social bookmarking buttons is cool way to get more readers and targeted audience.


Before using social bookmarking option, you must be aware of icons design how much clickable is it. Your readers are likely to click social bookmarking button containing in your blog if they find the buttons really cool. If you haven't such buttons, so here is something special for you.

Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.

Check the demo yourself!

Here is how to add these cool buttons to your Blogger blog:

Login to Blogger > Design > Edit HTML > Expand widget templates. Find the following code in your template:

<data:post.body/>

Just below that add the following group of codes:

<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/hacktutors' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>


Replace hacktutors with your feedburner username. Again, find the following code:

]]></b:skin>

Just above that code, past the following:


.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqF_-d-SPLtBu5cpAV_F2N_9dS-3lb5ueNr-ZUsbCW57RWullu_BGJY01pybOaozZLlhmUNLdgd_BUG8reccUoigIweJ-_JybPhruL5LkHhzYpjiOY8bR4Kxfn6x8Bhf5GLfHeHenr_N8/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1iuLR7FDwjo24qPovuFqMENsid_N046_f79cR-npIepLJp7yNCEHM37Rl_p0VEiV9RlyDsG3FsyiWJeyl7ufBsvil1NgkprDrQlRCMkb8xYvmHID1Ag9_CM8tfEb2mcyrzc0trEw4ecI/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UUQlUMacy0ZIwo0znlzOvKGsgAfSLctbuZAKNZgrzqhAV2PhtaRtztzFgqPwTbyNHtT8O_pqxLgvZWMJg4xr_V3fnmuZ3DvKSwC5FDfOIRKWejufhqkfVbSpNzvupG7B9pi2r_AB3Kk/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghNAnr6KFFy7zlA_0BLsW1iQng5G9Cj2gnRIyD_3_X1y5tqkz6X39TocRFuGmVjO6ng9IgH9Lvg0D7vh4w1riUSYkSA3CFI-eS0RfMwUojr0MvkarBuT56Rg7WJ_57UQ4ESPKR1vAPZw0/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPkezQRwqgbSy4YrAAODiQ8heyoBMP_5Gj8fotZCR3YwDYI4Wrq4txQ5l2sWxsw-rq5JJn_px12uj7D9gDxzQ9vX7U71u8yekJR5b-7IIvZ1rooGJNy4ZQo1J7TXJXNMaKe9iQE7JgEQ/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQOqgFWOIgGTvMUcYl5aewu4_0lREETurkXH98a86SaJROJeZMVnvF77J7am1e2MwoqV3lqziSvgl26ERzsYf9tS6NuJ1MD4XCKv-Wp-1HtYjOmMMXzuc53L4ANZxkvF0S2fgKo3K5rzU/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Now save the template and your are done! Have a look at your cool new bookmarking button that appears at the bottom of your post.

Thanks to Paulund for this cool CSS3 bookmarking button spinning effect.

COMMENTS

BLOGGER: 26
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: Social Bookmarking Buttons With Spinning Effect for Blogger
Social Bookmarking Buttons With Spinning Effect for Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB6ZR1l7a6N-ouWX0J-QfSzRI2OHBrcIUgT8Ba6tBGFVLM8AkUwRn9I-Ai_TveFfP6Uly_rwTSX_lgjzcezkMI-ZQ8zpd2r3gnuJv6IHybZDryy2juPOo3_Pse2fMSnAwr6Ap0eHvDypI/s400/social.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB6ZR1l7a6N-ouWX0J-QfSzRI2OHBrcIUgT8Ba6tBGFVLM8AkUwRn9I-Ai_TveFfP6Uly_rwTSX_lgjzcezkMI-ZQ8zpd2r3gnuJv6IHybZDryy2juPOo3_Pse2fMSnAwr6Ap0eHvDypI/s72-c/social.png
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
https://www.hacktutors.info/2012/01/social-bookmarking-buttons-with.html
https://www.hacktutors.info/
https://www.hacktutors.info/
https://www.hacktutors.info/2012/01/social-bookmarking-buttons-with.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy