Get 25% Discount For HostGator- $110 OFF! | Series: Become a Pro Blogger!, Create and Sale Ebooks , PDF Editing Ways


Saturday, September 5, 2009

Presenting The Animated Social Bookmarking Icons Set – The Flapper



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.
The download file below contains The Flapper Icons Set. All these icons are available in png format and in sizes 32px, 48px, 64px and 128px.
Downloads:
To add these icons to your blogs, websites, forums etc use the respective codes below,
<!-- 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 -->
You can add these Flapper icons anywhere you like by copy-pasting the code for a specific Icon into your blogs and websites. The size of these images can be altered by giving width="" height="" some value. For example if you want to show icons of size 48px by 48px, then change the width and height as follow -> width="48px" height="48px" . The default icon size in the code above is 128px by 128px. Try to use any size less than 128px but not greater than that, else the icon will look blurry. I will soon write a post on how to add these icons just below your blogspot posts. Further I am going to release a new Icon set soon, so make sure you subscribe and don't miss the next surprise!. Any feedback is appreciated. Your comments is what I need as a token of favour :>


Respected Readers:
We educate thousands of bloggers a week with our tutorials. To help us go ahead with the same spirit, a small contribution from your side will highly be appreciated.


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter
Create your own blog!

17 comments:

Comment Page :
Felix Albutra - SighNetDollars on 7:41 AM, September 05, 2009 said... #

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

Mohammad Mustafa Ahmedzai on 7:31 PM, September 05, 2009 said... #

@Felix

Fortunately yes :) It took me three hours.

I will surely share the code for adding them to your blogs.

Regards,
MOHD_

Marg on 8:09 PM, September 05, 2009 said... #

Great job MOHD. I am going to try one on my blog to see if it will work on mine. Those are terrific.

JACOB said... #

mohd GREAT JOB. THEY ARE FANTASTIC! KINDLY SHARE THE CODE SOON

Mohammad Mustafa Ahmedzai on 6:46 PM, September 06, 2009 said... #

@marg & @Jacob


I am flattered to know that you liked the Animated Idea!

Anonymous said... #

Question...can you do skype?

Willie7 on 3:12 PM, October 18, 2009 said... #

I have some posted on my blog:

www.2wildwilly.blogspot.com

I got them from here:

http://www.bookmarkcraze.com/

~Kalki~ on 9:21 PM, October 19, 2009 said... #

Great Icons! How to I put them on my blog? That is to say, How Do I Connect them to RSS, Yahoo, Redit etc.?

Mohammad Mustafa Ahmedzai on 12:09 AM, October 20, 2009 said... #

@kaki

Dear kakai, Use the code below to show them any where in your blog,




<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>Place The Image Code Here</a>

<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'>Place The Image Code Here</a>

<!--Twitter-->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'>Place The Image Code Here</a>

<!--DIGG-->
<a class='Fadein' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank'>Place The Image Code Here</a>

<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>Place The Image Code Here</a>

<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + 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

Mohammad Mustafa Ahmedzai on 12:10 AM, October 20, 2009 said... #

@kaki

forgot onething. Replace the text "Place The Image Code Here" with the code for animated Icon

Googy on 6:39 PM, November 20, 2009 said... #

Hi MOHD_!

Why doesn't it work when I place it through "Edit HTML" in blogger!

Mohammad Mustafa Ahmedzai on 8:45 PM, November 20, 2009 said... #

@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.

Mohammad Mustafa Ahmedzai on 12:47 AM, December 03, 2009 said... #

@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"

Mia on 1:04 PM, March 25, 2010 said... #

Nice set of icons - however , you should consider adding Stumbleupon & Flickr buttons as well - then this set will be complete :)

Great Icons .

Mia.

SANAM on 7:49 PM, September 13, 2010 said... #

love u yar i caant seen editor ever like u....<3

pepe cadena on 12:57 AM, June 21, 2011 said... #

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.....

Techmaker on 9:12 AM, October 17, 2011 said... #

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.

Confused? Feel free to ask

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

 

Recent Posts

Join Me On Facebook

4907+ Followers

Join The Team!

Licensed Under CC

Recent Comments

Follow Me On Twitter

1954+ Followers

| My Blogger Tricks (MBT) © 2012. All Rights Reserved | Contact | About |