25 best widgets for bloggers

Many people think that Blogger lacks in all of the extra goodies you can add to other platforms like WordPress, but it simply isn’t true. By using widgets you can customize your blog as much as you like by just adding little snippets of code to the sidebars.

Allow users to talk to you via IM, see what your most popular posts are, or even read news from sites such as Mashable. With these 25 widgets, you can create an even more powerful way of communicating with your visitors, just make sure you don’t overload them with too many!

What are some of your favorite widgets for use on Blogger?

Communications Widgets

Google Talk – Give visitors the ability to talk to you via Google Talk directly from your blog sidebar.

Jaxtr – Create a widget that allows people to call you on the phone without revealing the phone number to them.

Meebo Me – Meebo Me will allow you to create a chat box that you can install on your Blogger page, giving you the chance to converse with visitors to your site.

Skype – The official Skype widget allows you to create various buttons that can show your current status and also allows people to just click it and give you a call.

Tag-Board – Allows you to add a real-time chat board to your blog that your visitors and you can use to converse.

Social Widgets

Delicious Linkrolls – Share your Delicious bookmarks with the world with this easy to install linkroll widget.

FriendFeed Widget – Share all of your FriendFeed activity with the readers of your site.

Google Friend Connect – A makeshift social network that runs across any site that has installed Google Friend Connect.  You can join a site, see the other members, play games and more.

LinkedInABox – LinkedInABox retrieves your LinkedIn profile to display on your blog, allowing people to look through things such as your specialties and experience.

MyBlogLog – If someone visits your blog that is also a member of MyBlogLog, their avatar and username will appear in the box.  You can then click on any person to check out their profile on the service.

Twitter – Add your Twitter stream to your blog and display anywhere from your last tweet to the last twenty. Also gives a link for people to be able to follow you.

Share on Facebook – A simple widget that allows your readers to share items from your blog on Facebook.

SocialFeed – A miniature lifestreaming widget that broadcasts your activities on sites such as Twitter, StumbleUpon, Last.fm and so on.  Has several different skins you can choose from.

Utility Widgets

Add This – The popular social bookmarking button is available for Blogger accounts.

Easy Comments – This widget allows you to add commenting to any page of your site by placing the widget at the bottom of a page.  Allows people to say if they liked the comment, includes comment threading and more.

Google Search – Add an AJAX powered Google search box to your blog that you can allow to search the web and your blog, or even just restrict it to the contents of your site.

Popular Posts – This widget will take a look at your comments, up to the last 5,000, and generate a list of which posts had the most conversation around them.

Recent Comments – Display the most recent comments on your blog in this widget so that readers can join in the conversation.

Related Posts – Not so much a widget as a hack, this will give you the related post functionality that so many WordPress powered blogs use.

ShareThis – The highly customizable green button that ShareThis is known for can be added to your blog.  Choose if you want it for social bookmarking, users emailing your posts and more.

Shout List Icons – Be the king (or queen) of social sharing with this widget that generates icons for over 30 social sites your blog can be added to.

Tag/Label Cloud – Gives you the ability to install a traditional tag cloud in your sidebar so people can see what you write about the most.

Miscellaneous Widgets

Flickr – You can generate an HTML or Flash based badge of your photo stream to share your images with your visitors.

Mashable – Yes, now you too can share the best web-related news on your blog with the Mashable widget.

Picasa Albums – Display your public Picasa albums in your blog sidebar with this handy widget.

Interested in more Blogger resources? Check these out:

- 50 More Beautiful Blogger Templates
- Blogger.com Toolbox: 30+ Tools and Resources for Bloggers
- 70 Fresh and Modern Blogger Templates
- 30+ Great Resources for Blogger Templates
- 10 Unique Blogger Templates

Continue Reading »

How to change your Blogger template

How to change your Blogger template

It is not that hard to change the template of your Blogger blog, just go to your Blogger dashboard and follow the steps told here. You can click on the thumbnails below to see larger versions of screen shots.

• 
 
• 
 
• 
 
• 

1. First of all login to your Blogger account and choose your blog (if you have more than one), than click on "Template" section.
2. You will see a big input box with full of codes at "Template" section. Click somewhere in that box then hit your CTRL and A buttons together to select all text in the box. After selecting whole text, hit the DELETE button on your keyboard to clear old template codes.
3. Open your theme.txt (which comes out of your downloaded template archive package) with a text editor like notepad and again select all text by hitting CTRL and A buttons on your keyboard, then hit CTRL and C keys together (or right click with your mouse and select copy) to copy whole text to your clipboard.
4. Go to "Template" section, and paste your new template codes to the input box by hitting CTRL and V keys together (or right click with your mouse and select paste), then click "Save Template Changes".
5. After saving process finished, click "Republish".

Important!

I recommend you to backup your old template codes before deleting them in this step. In order to backup your old template select all codes in the template codes box (CTRL+A), copy (CTRL+C) and paste (CTRL+V) them in a new text file with appropriate file name.

How to change your Blogger template

It is not that hard to change the template of your Blogger blog, just go to your Blogger dashboard and follow the steps told here. You can click on the thumbnails below to see larger versions of screen shots.

• 
 
• 
 
• 
 
• 

1. First of all login to your Blogger account and choose your blog (if you have more than one), than click on "Template" section.
2. You will see a big input box with full of codes at "Template" section. Click somewhere in that box then hit your CTRL and A buttons together to select all text in the box. After selecting whole text, hit the DELETE button on your keyboard to clear old template codes.
3. Open your theme.txt (which comes out of your downloaded template archive package) with a text editor like notepad and again select all text by hitting CTRL and A buttons on your keyboard, then hit CTRL and C keys together (or right click with your mouse and select copy) to copy whole text to your clipboard.
4. Go to "Template" section, and paste your new template codes to the input box by hitting CTRL and V keys together (or right click with your mouse and select paste), then click "Save Template Changes".
5. After saving process finished, click "Republish".

Important!

I recommend you to backup your old template codes before deleting them in this step. In order to backup your old template select all codes in the template codes box (CTRL+A), copy (CTRL+C) and paste (CTRL+V) them in a new text file with appropriate file name.

Continue Reading »

how to add facebook like button in blogger

WELCOME TO VINAY SABHARWAL BLOG FOR MORE INFORMATION JOIN THIS SITE

Steps

1. 1
   Go to the "Facebook Developers" page:http://developers.facebook.com/docs/reference/plugins/like.
   
   
   
2. 2
   
   

    Set the options you want.
   Set the options you want. Specifically, select whether you want a "Like" or a "Recommend" button. The sample button on the page will automatically update to reflect your selections.
3. 3
   
   

    Leave the "URL to Like" field blank.
   Leave the "URL to Like" field blank. You will be replacing that soon.
4. 4
   
   

    Click "Get Code".
   Click "Get Code". You will see something that looks like this:
   
   
   

   <iframe src="http://www.facebook.com/plugins/like.php?href=
   

   
   

   http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike&layout=standard&
   

   
   

   show_faces=false&width=450&action=like&colorscheme=light"
   

   
   

   scrolling="no" frameborder="0" allowTransparency="true" style="border:none;
   

   
   

   overflow:hidden; width:450px; height:px"></iframe>
   
5. 5
   Replace the following text:
   • src= above with:

     expr:src='
     
   • http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike&layout part with:

     " + data:post.url + "&layout
     
   • light" with:

     light"'
     

     -- notice the new trailing apostrophe
   • height:px with:

     height:35px
     

     -- otherwise, Firefox will make the iframe really big.
   • Leave a copy of the final code somewhere accessible for you to transfer to Blogger.
6. 6
   
   

    Go to your Blogger Dashboard.
   Go to your Blogger Dashboard.
7. 7
   Open your blog's layout and click Edit HTML.
   
   
   
   
8. 8
   Back up your template! Do this by clicking Download Full Template.
   
   
   
   
9. 9
   Check Expand Widget Templates.
   
   
   
   
10. 10
    Find a place to put the Facebook "Like" code into your HTML layout. A good location is directly after or below:

    <div class='post-footer'>
    

    • Use the browser "Find" mechanism to help you locate it.
11. 11
    Save and check that the button has appeared. Once you can see it, you're done!
    
    
    
    

EditTips

• As of May 16, 2010 this feature is only available in the English language.

• 
  Always back up your blog's template before making changes to its layout!
• It is recommended that you keep "Show Faces" unchecked and use the "button_count" layout. Otherwise, less-savvy users who did not configure their privacy settings properly may be turned off by their profiles appearing on your blog after "Liking" it.

EditThings You'll Need

• Blogger account
• Facebook account

Continue Reading »

How to add slideshow in blogger

0

1 

2

Widgets

How to add slideshow in blogger

Hi guys, someone has asked me how to add slideshow in blogger a while ago. Therefore, now I want to share my answer to anyone who can visit my blog. This tip is not too hard, so I would expect that you can get to know how to add slideshow in your own blog easily. All right, let's do these steps:

1.  Go to Google Picasa (you probably have a google account, don't you?)
2. Upload your photo into a album that you want to make it as a slide show in your blog posts

3. After you have uploaded your photos into a specific album, click on the album
4. Click on " Link to this album " (located in the right hand side)

5.  Click on " Embed Slideshow "

6. Copy the code in the yellow box. 
7. Now, you've already have the code, Go to create a new post
8. Paste the code into the content box where you want your slideshow to be displayed 
9. Click on Preview to check the result, then Click on Save or Publish. 

You're done
Note: You can place your slideshow anywhere in your blog by copying the slideshow code into a Gadget.  

Continue Reading »

how create a download link in blogger

In order to allow others to download files from your downloads page, it is necessary to create a download link. Thedownload link is coded exactly the same way as a regular hyperlink.

• HTML Code For Download Link
• The PDF Download Link
• Relative Links
• The HTML Download Button
• Additionl Tips

HTML Code For Download Link

The destination URL points to the file you want downloaded. In this case it is a Zip file calledaff-masters.zip.

Source

<a href="http://www.goldcoastwebdesigns.com/dl/aff-masters.zip"target="_blank">Download Link</a>

Output

Download Link

You will notice that the link is set to open in a new browser window. The reason for this is because if the link is not set to open in a new browser window, when the link is clicked, the page where the download link is located will sometimes disappear.

The only drawback to setting these links to open in a new browser window is that pop-up blocking software might block the new browser opening. In this case, it is suggested to instruct visitors to turn pop-up blocking programs off while downloading from your page.

A regular hyperlink can be coded instead of the one above but the visitor should be instructed to right-mouse-click/alternate-mouse-click on the link and select "Save Target As" from the menu.

The PDF Download Link

Source

<a href="http://www.goldcoastwebdesigns.com/dl/aff-masters.pdf">Download Link</a>

Output

Download Link

Right-Click Menu

Caution: Clicking a link that points to a PDF file will not cause it to download to your hard drive directly. It will only downloadand open the file in your web browser.

It's true you can save a copy of the PDF from the browser, but most people do not know this. For this reason, it is best to instruct people to right-mouse click the link and save the file to their hard drive.

Tip: How do you know in advance if the link you are going to click on is a normal web page, a PDF (.pdf) file, a Zip (.zip) file or an executable (.exe) program? Check the status bar before clicking.

Relative Links

The example HTML codes above illustrate hyperlinks with an absolute path. The path is absolute because the full URL is given as the value.

It is however possible to give a relative value like this:

Source

<a href="dl/aff-masters.pdf">Download Link</a>

Output

Download Link

You will notice that the value given above is relative to two things:

1. The location of the file being downloaded.
2. The location of the page where the link to the download resides.

So, if this page you are reading right now was located in the dl directory, in order for thedownload link to work, the HTML would need to look like this:

<a href="aff-masters.pdf">Download Link</a>

In other words, if the download page is located in the same directory as the file to be downloaded, the above code would be used.

Anchor - Local Button

Tip: Users of 1st Page 2000 free HTML editor, can simply click on the Anchor - Local button to create relative links without mistakes. This button is located on the Tabbed Palette in Expert mode.

Obviously, to use this feature, the directory structure on your web site should be the same as it is on your hard drive in order for the links to work.

The HTML Download Button

HTML buttons can also be used to download files. Visit to-3gp.com to see these exact buttons in action across the entire website.

Source

<form><input type="button" value="Download Now"onClick="window.location.href='/dl/aff-masters.exe'"></form>

Output

Additionl Tips

About Zip (.zip) Files

Not everybody knows how to unzip .zip files because additional software needs to be installed on the users computer in order to unzip the file. For this reason, it can be a good idea to supply a self extracting zip file so that the user can unzip the file without installing additional software.

If you would like to see a demonstration of a self extracting zip file in action, use the download link below:

Download Demo File - aff-masters.exe - 1.23 MB

After the file has downloaded, just double click the file to start unzipping. By default, the file will unzip to C:\Aff-Masters. But you can set it to unzip anywhere you want. After the file is unzipped, you will own an excellent marketing book in PDF format.

Image Hyperlinks

Image hyperlinks can also be used to point to a download file. Craft the link the same as a regular download link and add an image to it.

Continue Reading »