After creating the Circular Style and Trigonal Style Social Bookmarking Icons, I decided why not create some animated social media icons set, which may look professional, eye-catching and yet unique! I am excited to have successfully published our third Icon set which is different in every aspect. See it for yourselves. Hover your mouse cursor over the icons below to see the flapping effect.







<!-- DELICIOUS CODE STARTS --> <img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGDqvOi6_I/AAAAAAAABwU/V1wp5He0Va8/s400/DELICIOUS1.png'" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SqGDq_yQIKI/AAAAAAAABwc/oFKdjffGT7Q/s400/DELICIOUS2.png" onmouseout="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGDq_yQIKI/AAAAAAAABwc/oFKdjffGT7Q/s400/DELICIOUS2.png'"/> <!-- DELICIOUS CODE ENDS --> <!-- RSS CODE STARTS --> <img width="" height="" onmouseover="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGvLkLbZI/AAAAAAAAByU/UAY0e3H8skU/s400/RSS1.png'" src="http://1.bp.blogspot.com/_7wsQzULWIwo/SqGG68DCUFI/AAAAAAAAByk/eqXDid_DUZY/s400/RSS2.png" onmouseout="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGG68DCUFI/AAAAAAAAByk/eqXDid_DUZY/s400/RSS2.png'"/> <!-- RSS CODE ENDS --> <!-- YOUTUBE CODE STARTS --> <img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGuULHk1I/AAAAAAAAByE/FbPpFQBC6nA/s400/YOUTUBE1.png'" src="http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGu3pt6nI/AAAAAAAAByM/QyIAvpL6N9Q/s400/YOUTUBE2.png" onmouseout="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGu3pt6nI/AAAAAAAAByM/QyIAvpL6N9Q/s400/YOUTUBE2.png'"/> <!-- YOUTUBE CODE ENDS --> <!-- YAHOO CODE STARTS --> <img width="" height="" onmouseover="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGttGnNZI/AAAAAAAABx0/q5eZRUfgfNc/s400/YAHOO1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGtycf68I/AAAAAAAABx8/TOF9DuD7n10/s400/YAHOO2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGtycf68I/AAAAAAAABx8/TOF9DuD7n10/s400/YAHOO2.png'"/> <!-- YAHOO CODE ENDS --> <!-- TWITTER CODE STARTS --> <img width="" height="" onmouseover="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGZCTqMOI/AAAAAAAABxk/eAIBpRqgJiE/s400/TWITTER1.png'" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGZlcpt1I/AAAAAAAABxs/KUZHX71eimo/s400/TWITTER2.png" onmouseout="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGZlcpt1I/AAAAAAAABxs/KUZHX71eimo/s400/TWITTER2.png'"/> <!-- TWITTER CODE ENDS --> <!-- TECHNORATI CODE STARTS --> <img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGYWGbF8I/AAAAAAAABxU/o5IHL_Ciwss/s400/TECHNORATI1.png'" src="http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGYzi6R6I/AAAAAAAABxc/4Ib3ueGU4Oc/s400/TECHNORATI2.png" onmouseout="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGYzi6R6I/AAAAAAAABxc/4Ib3ueGU4Oc/s400/TECHNORATI2.png'"/> <!-- TECHNORATI CODE ENDS --> <!-- REDDIT CODE STARTS --> <img width="" height="" onmouseover="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGJWOkYZI/AAAAAAAABxE/_cOecHZDRsY/s400/REDDIT1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGYGTSWrI/AAAAAAAABxM/49lKyrQBSoA/s400/REDDIT2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGYGTSWrI/AAAAAAAABxM/49lKyrQBSoA/s400/REDDIT2.png'"/> <!-- REDDIT CODE ENDS --> <!-- FACEBOOK CODE STARTS --> <img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGIS5ncrI/AAAAAAAABw0/LaZwhbVchUQ/s400/FACEBOOK1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGI-67dFI/AAAAAAAABw8/60pD0Cixu3Q/s400/FACEBOOK2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGI-67dFI/AAAAAAAABw8/60pD0Cixu3Q/s400/FACEBOOK2.png'"/> <!-- FACEBOOK CODE ENDS --> <!-- DIGG CODE STARTS --> <img width="" height="" onmouseover="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGHk_dvrI/AAAAAAAABwk/kmAe1jCxrGA/s400/DIGG1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGII4WnFI/AAAAAAAABws/F_7d2L5yFfA/s400/DIGG2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGII4WnFI/AAAAAAAABws/F_7d2L5yFfA/s400/DIGG2.png'"/> <!-- DIGG CODE ENDS -->
|
Respected Readers:
|











17 comments:
Nice icons my friend. Are you the one who made this? Nice job...
I hope you teach us how to apply it in our blogs. Thanks a lot
@Felix
Fortunately yes :) It took me three hours.
I will surely share the code for adding them to your blogs.
Regards,
MOHD_
Great job MOHD. I am going to try one on my blog to see if it will work on mine. Those are terrific.
mohd GREAT JOB. THEY ARE FANTASTIC! KINDLY SHARE THE CODE SOON
@marg & @Jacob
I am flattered to know that you liked the Animated Idea!
Question...can you do skype?
I have some posted on my blog:
www.2wildwilly.blogspot.com
I got them from here:
http://www.bookmarkcraze.com/
Great Icons! How to I put them on my blog? That is to say, How Do I Connect them to RSS, Yahoo, Redit etc.?
@kaki
Dear kakai, Use the code below to show them any where in your blog,
<!--Delicious-->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'>Place The Image Code Here</a>
<!--Technorati-->
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'>Place The Image Code Here</a>
<!--Twitter-->
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'>Place The Image Code Here</a>
<!--DIGG-->
<a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'>Place The Image Code Here</a>
<!--Stumble-->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'>Place The Image Code Here</a>
<!--Facebook-->
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'>Place The Image Code Here</a>
Currently These Icons show animated effect on sidebars only but I will prepare a code soon to make them work under blog posts too.
I hope that could help you to some extent
@kaki
forgot onething. Replace the text "Place The Image Code Here" with the code for animated Icon
Hi MOHD_!
Why doesn't it work when I place it through "Edit HTML" in blogger!
@Googy
yes you are right they wont work inside blogger templates. The code is auto deleted due to some reasons. I am looking for someone to create a Javascript code for these icons to work in blogger. But they would work just fine on other web platforms like simple HTML webpages.
@Googy
I have written a post on how to add these icons below blogger posts or in your websites,
Read this post Social Bookmarking Widget For Blogger"
Nice set of icons - however , you should consider adding Stumbleupon & Flickr buttons as well - then this set will be complete :)
Great Icons .
Mia.
love u yar i caant seen editor ever like u....<3
Thanks the Generic Viagra Blog I could find this post, it is really interesting because I love the information in a free from , social-bookmarking is one of the best method today.....
Wow.. This is amazing.. After reading your post I decided to make my own animated social bookmarking icon set for my users. My blog is on blog tips and tricks. I'll use different image set to make a new animated sharing icon set for all the bloggers.
Good luck.
Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Try the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon my review.
Regards,
Mohammad