Multi Column Footer Widget For Blogger –The Hot!

Multi-Column-Footer Widget For Blogger


<div style='clear: both;'/>
</div> </div>

      6.   Save your template and you are done!

Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,

image

3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.

After you have added the fifth column then remember to change width: 23%; with width: 17%; 

You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.

 

Wishing you all a Happy New Year 2011 full of love, joy and just Happiness. Peace and blessings :)

Source: http://www.mybloggertricks.com/2010/12/multi-column-footer-widget-for-blogger.html

How to link text and Image in Blogger posts?

How To Link Images Within Blogger Posts?

Click this text –> [a href="#image"]Take me to the Image at Top[/a]

Such a link will link texts to images. So lets do it.

1.    First enclose the image with this code,

<a name="Image-Name"><img src="Image Link Goes Here"/></a>

Replace Image Link Goes Here with URL of image where it is saved.

2.    Now we need to create a text that will link the image. Use this code,

<a href="#Image-Name">Jumping Text</a>

Simply replace Jumping Text  with a text that will take you to the image.

In my case I have replaced Jumping Text with Take me to the Image at Top

How to link One Image To Another Image in Blogger Posts?

Here you just need to use an image instead of a Jumping text. For example click the jumping image below and it will take you to the image at top left,

[a href="#image"]images[/a]

Liked it? Now follow these easy steps,

1.   First enclose the landing image with this code,

<a name="Image-Name"><img src="Image Link Goes Here"/></a>

Replace Image Link Goes Here with the URL of your landing image.

2.  Now create a Jumping image using this code,

<a href="#Image-Name"><img src="Jumping Image Link Goes Here"/></a>

Just replace Jumping Image Link Goes Here with the Image URL of the jumping image.

 

 

 

Hope you will find it unique and useful. Let your readers jump within your posts. :) [a href="#"]Take me Up![/a]

Source: http://www.mybloggertricks.com/2011/01/how-to-link-text-and-image-in-blogger.html

How to Customize Layout of Facebook Profile Page?

new-facebook-layout[a href="http://www.facebook.com" target="_blank"]Facebook[/a] is the next giant after Google in every aspect. As the site’s popularity keeps on increasing so do new ways of making perfect use of this Mega Giant social media network. Facebook’s new layout/look has annoyed many users and some users including me still prefers the old layout. The Facebook team recently announced that the new Profile page Layout can not be changed and this is how every user profile will look like. That’s surely a sad news but no worries any longer because there is one thing really exciting about this new layout and that is the horizontal photo Tag stream. Using this photo stream combined with your Profile Picture you can create your own personalized layouts, all different, attractive and simply Cool!

 

 

This is how a normal Facebook Layout looks like,

facebook-profile page

 

and this is how I changed mine,

[a href="http://www.facebook.com/mybloggertricks" target="_blank" rel="Customize Facebook Profile Page"]new-facebook-layout[/a]

 

There are many online tools that lets you create images of required sizes that may fit into your profile page but I tested all and none could give a quality output so I rather used Photoshop and created them myself. Though it requires one to have some basic knowledge of Photoshop. I will write a detailed post on how to create your own personalized Facebook Layouts using Photoshop but first I want to know how much curious you are to know it? Tell me if you would love a detailed post on how to customize the Facebook profile page using Photoshop? Bloggers using Facebook should surely give a personal touch to their fan pages and profile pages because readers love it! :)

Source: http://www.mybloggertricks.com/2011/01/how-to-customize-layout-of-facebook.html

Create a Cute Subscription Form

Do let me know if you needed any help in customizing the widget.

Source: http://www.mybloggertricks.com/2011/01/create-cute-subscription-form.html

How To Use Google Fonts In Blogger? Part-1


Read Part-2 here -> [a href="http://www.mybloggertricks.com/2011/05/style-post-and-sidebar-titles-with.html" target="_blank"]Style Post Titles and Sidebar titles With Google fonts in Blogger[/a]

Google Font-Previewer-Tricks It is no wonder that web technology has developed tremendously over the recent years. Fonts that were once stored in user’s computers are now embedded in templates. Few years back you could use only those fonts in your templates which were available on major operating systems and in order to view those stylish fonts on your websites, the user should already had fonts installed on their PCs. Today you can use any font you like for your designing purposes and the reader doesn’t need having those fonts installed on his PC. Thanks to [a href="http://code.google.com/apis/webfonts/" target="_blank"]Google Fonts API[/a] you can now embed any font you like in your templates out of the popular fonts available at Google Font Directory.

Google Font Previewer Tricks

For making things as simple as possible I would first discuss in detail some important things about this excellent Font Previewer tool provided by Google itself. We will use this tool to produce our desired embeddable code and CSS code. For this reason I have divided this article in two parts. Part- 1 will let you know how to properly use [a href="http://code.google.com/webfonts/preview#font-family=Lobster" target="_blank"]Google Font Previewer[/a] and Part- 2 will involve the use of these fonts in different parts of your Blogger template so keep track of both parts.

This is how Google Font Previewer looks like,

[a href="http://code.google.com/webfonts/preview#font-family=Allan" rel="Google font previewer" target="_blank"]google-font-previewer[/a] 

As you can see that there is a Tools menu at your left and the display at right. You set the options to create your custom font. You can change everything through this tool except the color. Once you have set your preferred text you just need to copy the embedding code which appears below the display like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 


rel="stylesheet" type="text/css" >



This embedding code can be edited in many ways to make the text appear bold, regular or italic  but when you have CSS then why bother disturbing the HTML? :)



and just below this code appears the CSS code which looks like this,




<style>
body {
font-family: 'Lobster', serif;
font-size: 36px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;

}
</style>


 




The blue part is what that will be used in Part- 2 of this tutorial. This CSS code is the most important part and even if you don’t use the Google Font Previewer you can easily customize the Custom Font using this CSS. Now how would you use these custom fonts in blogger? So create your custom Font with your preferred look and feel and keep the embeddable code and blue part for Part- 2.



How To Embed Google custom Fonts in Blogger?



The method is simple. Do this,




  1. Go To Blogger > Design > Edit HTML


  2. Backup your Blogger Templates


  3. Search for </head>


  4. Just above it paste the embeddable code that you copied from Font Previewer with one adjustment. By default the embeddable code ending tag is not closed and it looks like this,




<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 


rel="stylesheet" type="text/css" >


 




You must add a back slash at the end like this,




<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 


rel="stylesheet" type="text/css" />



 



You can add as many embeddable fonts as you wont. You just need to end each code with a closing tag.



Now how would you use this font in Blogger posts, titles, block quotes, sidebars, headers, footers and how would you further customize the font, all this will be shared in Part –2 so keep in touch. I have shared below the embeddable codes of some of the best fonts available which will be required in Part –2. The list below will help you use the best fonts for yourself and would save your time too. So here we go,



1.  Fontdiner Swanky    



image




<link  href="//fonts.googleapis.com/css?family=Fontdiner+Swanky:regular" 


rel="stylesheet" type="text/css" />



2.  Geo    



image




<link  href="//fonts.googleapis.com/css?family=Geo:regular" 


rel="stylesheet" type="text/css" />



 



3.  Homemade Apple



image




<link  href="//fonts.googleapis.com/css?family=Homemade+Apple:regular" 


rel="stylesheet" type="text/css" />



 



4.  UnifrakturCook



image




<link  href="//fonts.googleapis.com/css?family=UnifrakturCook:regular" 


rel="stylesheet" type="text/css" />



5.  Irish Growler



image




<link  href="//fonts.googleapis.com/css?family=Irish+Growler:regular" 


rel="stylesheet" type="text/css" />



 



6.  Orbitron



image




<link  href="//fonts.googleapis.com/css?family=Orbitron:regular" 


rel="stylesheet" type="text/css" />



 



7.  Permanent Marker



image




<link  href="//fonts.googleapis.com/css?family=Permanent+Marker:regular" 


rel="stylesheet" type="text/css" />



 



8.  Rock Salt



image




<link  href="//fonts.googleapis.com/css?family=Rock+Salt:regular" 


rel="stylesheet" type="text/css" />



 



9.  Slackey



image




<link  href="//fonts.googleapis.com/css?family=Slackey:regular" 


rel="stylesheet" type="text/css" />



 



10. Sniglet



image




<link  href="//fonts.googleapis.com/css?family=Sniglet:regular" 


rel="stylesheet" type="text/css" />



 



11. Tangerine



image




<link  href="//fonts.googleapis.com/css?family=Tangerine:regular" 


rel="stylesheet" type="text/css" />



 



12. Kenia



image




<link  href="//fonts.googleapis.com/css?family=Kenia:regular" 


rel="stylesheet" type="text/css" />



 



13. Kranky



image




<link  href="//fonts.googleapis.com/css?family=Kranky:regular" 


rel="stylesheet" type="text/css" />



 



14. Lobster



image




<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 


rel="stylesheet" type="text/css" />



 



15. Luckiest Guy



image




<link  href="//fonts.googleapis.com/css?family=Luckiest+Guy:regular" 


rel="stylesheet" type="text/css" />



 



16. Mountains of Christmas



image




<link  href="//fonts.googleapis.com/css?family=Mountains+of+Christmas:regular" 


rel="stylesheet" type="text/css" />



 



 



17. IM Fell English SC



image




<link  href="//fonts.googleapis.com/css?family=IM+Fell+English+SC:regular" 


rel="stylesheet" type="text/css" />



 



18. Allerta Stencil



image




<link  href="//fonts.googleapis.com/css?family=Allerta+Stencil:regular" 


rel="stylesheet" type="text/css" />



 



19. Cherry Cream Soda



image




<link  href="//fonts.googleapis.com/css?family=Cherry+Cream+Soda:regular" 


rel="stylesheet" type="text/css" />



 



20. Chewy



image




<link  href="//fonts.googleapis.com/css?family=Chewy:regular" 


rel="stylesheet" type="text/css" />



 



21. Coda



image




<link  href="//fonts.googleapis.com/css?family=Coda:regular" 


rel="stylesheet" type="text/css" />



 



22. Coming Soon



image




<link  href="//fonts.googleapis.com/css?family=Coming+Soon:regular" 


rel="stylesheet" type="text/css" />



 



  23. Covered By Your Grace



image




<link  href="//fonts.googleapis.com/css?family=Covered+By+Your+Grace:regular" 


rel="stylesheet" type="text/css" />



 



24. Droid Serif



image




<link  href="//fonts.googleapis.com/css?family=Droid+Serif:regular" 


rel="stylesheet" type="text/css" />



 



25. Corben



image




<link  href="//fonts.googleapis.com/css?family=Corben:regular" 


rel="stylesheet" type="text/css" />


 




 



If you found anything unclear till now so please feel to post your question. The next part is more interesting so make sure you have [a href="http://feedburner.google.com/fb/a/mailverify?uri=TntByStc" target="_blank"]subscribed to our Updates[/a]. Till then Take care! :)


Source: http://www.mybloggertricks.com/2011/01/how-to-use-google-fonts-in-blogger-part.html

How to Customize Each Sidebar Header Differently?

How To Find out Unique ID Name of each Blogger Widget?

Simply follow these steps,

  1. Log into your [a href="http://blogger.com" target="_blank"]Blogger[/a] Account
  2. And click the link that says  View your Blog
  3. At your Blog below each widget you will find this Edit key image,Blogger Edit-key
  4. Hover your mouse cursor on it and right Click and choose Copy Link Location
  5. The link will look something like this,

http://www.blogger.com/rearrange blogID=#####&widgetType=HTML&widgetId=HTML4&action=editWidget

Copy your Widget ID and keep it save as it will be used in the next part. In my case you can easily see that the widget Id is HTML4

HTML/JavaScript widgets are usually assigned such ID’s as HTML1, HTML2, HTML3 and so on.

About me widget will have an ID like Profile1 and Link lists widgets have Ids as LinkList1, LinkList2 etc.

The ID’s are case sensitive so use them as they appear.

How to Customize a Widget using its Unique ID?

Now here comes the interesting part. We will now customize the Widget’s Heading Style i.e H2 tag. Customization of other portions of the Widget will be shared in future posts.

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Paste the following code just above ]]></b:skin> ,

#ID h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

 

Now replace ID with your unique widget ID. To change the background color change #575656 and to change the Font colour change #ffffff. May be you will like using our [a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" target="_blank" rel="Colour Code Generator Tool"]Colour Code Generator Tool[/a]

   5. Hit save and you are Done!

View your blog to see the new dress :)

Hope you find it useful and worth trying. More interesting CSS tricks on it will be shared soon InshAllah.

Note: Kindly respect Copyrights. Most of our tricks are being duplicated without attaching any credits and this really destroys our efforts. It’s a request from all our readers to respect the content of the original author.

Source: http://www.mybloggertricks.com/2011/01/how-to-customize-each-sidebar-header.html

Hide Read More Link In Blogger Static Pages

Read-More-Button The [a href="http://www.mybloggertricks.com/2009/05/add-read-more-link-to-your-posts-expand.html" target="_blank" rel="Add read more link to Blogger"]Read More link tutorial[/a] that I previously shared summarizes all posts to a specified length but then it even appears on Blogger’s newly introduced Static Pages where it should not be. I was scratching my head on how to solve this problem when [a href="http://www.blogger.com/profile/13597329800723396260" target="_blank"]Sam[/a] of [a href="http://www.plentyofebooks.net/" target="_blank"]Plenty Of E-books[/a] came to my rescue. He provided me with a code that shortens posts and also doesn’t let the read more link or button to appear on static pages. So lets replace our old code with this more updated one.

Note:- If you have never implemented this trick before then kindly read this tutorial first –> [a href="http://www.mybloggertricks.com/2009/05/add-read-more-link-to-your-posts-expand.html" target="_blank" rel="Add Read More Link To Your Posts"]Add Read More Link To Your Posts[/a]

 

 

How To Summarize Posts and Hide Read More Link in Static Pages?

  1. Go To [a href="http://blogger.com" target="_blank"]Blogger[/a] > Design > Edit HTML
  2. Backup your template
  3. Search for the old read more code which looks like this,

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<div style="text-align: right;">Read More ->></div></a>
</b:if>

 

or something similar to this. Simply replace it with this one,

<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'><br/>
<a expr:href='data:post.url'><div style='text-align: right;'>
<img height='33px' src='IMAGE URL OF READ MORE BUTTON' width='120px'/></div>
</a>
</b:if>
</b:if>
<!--READ-MORE-STOPS-->

 

kindly replace IMAGE URL OF READ MORE BUTTON with Image link of your read more button. If you don’t have a button then grab one from some of the buttons I designed in past,

Visit these links,

  • [a href="http://www.mybloggertricks.com/2009/09/blinking-read-more-buttons-for.html" target="_blank" rel="Blinking Read More Buttons"]Blinking Read More Buttons[/a]
  • [a href="http://www.mybloggertricks.com/2009/09/attractive-animated-read-more-buttons.html" target="_blank" rel="Animated Read More Buttons"]Animated Read More Buttons[/a]
  • [a href="http://www.mybloggertricks.com/2009/09/attractive-read-more-button-images-for.html" target="_blank" rel="Arrow Head Read More Buttons"]Arrow Head Read More Buttons[/a]

 

Save your template and view your static Page to see it working just perfect! Peace :)

Source: http://www.mybloggertricks.com/2011/01/hide-read-more-link-in-blogger-static.html

Is Directory Submission a Waste of Time?

Hope you may understand my point and may take mature steps in making your Blog a place where readers may find comfort. Do let me know about any interesting story that you may wish to share with all of us. Peace and blessings :)

Source: http://www.mybloggertricks.com/2011/01/is-directory-submission-waste-of-time.html

Earn $20 Dollars Plus 300 Free EntreCard Credits!!

I have Uploaded My Niece's Sample Home Video. Hope you will like it.
Source: http://www.mybloggertricks.com/2011/01/earn-20-dollars-plus-300-free-entrecard.html

How To Drive Traffic To Your Blogs From Facebook?

After creating the [a target="_blank" href="http://www.mybloggertricks.com/2009/08/introducing-mind-blowing-circular-style.html"]Circular Style[/a] and [a target="_blank" href="http://www.mybloggertricks.com/2009/08/releasing-gorgeous-mbt-social-media.html"]Trigonal Style[/a] 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.

[a target="_blank" href="http://dstats.net/download.php?file=http://sites.google.com/site/mybloggertricks/Home/THEFLAPPER.rar?attredirects=0"][/a]

Downloads: [a href="http://dstats.net/download.php?file=http://sites.google.com/site/mybloggertricks/Home/THEFLAPPER.rar?attredirects=0"][/a]



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

Source: http://www.mybloggertricks.com/2010/03/how-to-drive-traffic-to-your-blogs-from.html

Show / Display Skype Emoticons In Blogger Comment Form

After creating the [a target="_blank" href="http://www.mybloggertricks.com/2009/08/introducing-mind-blowing-circular-style.html"]Circular Style[/a] and [a target="_blank" href="http://www.mybloggertricks.com/2009/08/releasing-gorgeous-mbt-social-media.html"]Trigonal Style[/a] 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.

[a target="_blank" href="http://dstats.net/download.php?file=http://sites.google.com/site/mybloggertricks/Home/THEFLAPPER.rar?attredirects=0"][/a]

Downloads: [a href="http://dstats.net/download.php?file=http://sites.google.com/site/mybloggertricks/Home/THEFLAPPER.rar?attredirects=0"][/a]



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

Source: http://www.mybloggertricks.com/2010/03/show-display-skype-emoticons-in-blogger.html
 
Play : Agame | Y8 Games | Y3 Games
Copyright © 2011. Blogger Tips And Tricks 2012 - All Rights Reserved

Proudly powered by Blogger