Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

Once you activate any widget, in your blog, it will be displayed in all the pages by default, including your homepage.But what if you want a certain widget to appear only on a certain page or pages, can it be done? Yes You can do this easily using conditional tags.

first go to Blogger’s Dashboard > Design > Page Elements tab and add a “HTML/JavaScript” gadget. I prefer it because it will be easy for everyone to understand. Give it a unique title so that it does not match with any of the titles of other widgets added.

Go to Dashboard > Design > Edit HTML. Check the Expand Widget Templates check box on top right of the HTML window. Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box. Let’s say I have given the title for my widget as “Recent Comments”. After searching you will find the below snippets:

Add Animated Flying Twitter Bird Gadget For Blogger

Twitter is one of the most popular Social networking sites in the world among Bloggers to promote their blogs. So here I have a very cool Blogger Twitter widget, an actual Animated flying Twitter Bird that flies around your blog.

Twitter bird flying animated effect by Javascript Hack and when you scroll the page Up or Down, twitter bird will come in front of your page. The bird found itself as the "follow me" link on the Twitter account. If you move the mouse pointer over the bird, a "follow me" button and a "tweet this" button displayed.


Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

How to Add Bookmark Us Hyperlink to Blogger Blogs

For your website to have traffic, people should remember your site and visit again. This problem was solved long time ago with browser's Bookmarks. Still, people are lazy and usually are not using it, unless you remind them. so you can add a quick "Bookmark this page" link in all your pages. Clicking on the link prompts the user with a dialog box to add the specified URL to the Favorites list.

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

Add Animated Flash Clock To Your Blogger blog

Two most common widgets bloggers and webmasters put on their websites/blogs are a Clock and a Calendar.A clock gives a beautiful look to a website. A clock is a must for a personal blog.You simply have to copy the code below each clock and add it to your blog

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add one of code given below in to it:

How to add “Email Subscription Form” to your blogger blog

One of the most important thing for a blogger is to keep connect your existing visitors with your blog. If you are providing useful information in your blog, then every visitor will want to get latest updates from your blog. For that purpose you need a Email Subscription Form in your blog , so that interested visitors can easily get latest updates from your blog.

and it’s very easy to add email or feed Subscription Form to your blogger blog (blogspot).
So let’s do it,

Login To Blogger Go To > Design > Page Elements.

How To Add Html And Other Codes To Your Blog Posts

Bloggers often do many hacks to their blog themes or templates to give it a professional look. If you run a blog where you post tutorials and use HTML, CSS, JavaScript or any other codes in your posts then you can show these codes on a colored and professional looking background. It will not only help you to give your blog a professional look but it will also help your readers to easily distinguish the codes used in the post.

 The result will look like this:

Replace Newer, Older And Home Links With Images In Blogger

Change Older Post And Newer Post Link With icons or images in Blogger is very nice trick to make your blog look very beautiful.As it make your blog look more beautiful than before if you are using good icons to be get replaced with older post or newer post or home link.Today i will tell you how easy it is to hide those links and place your any image you like.

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

Customize Blogger Read More Links With image Buttons

I'm happy to share here some related tips for those seeking to learn how to customize and style the 'Read More' or Jump link in various ways.

Please download a copy of your template before applying any changes.

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

How To Customize Blockquote In Blogger

"Block quotes" are sections of text which are generally used to highlight quotes from other sources; they are usually indented from the main body of a blog posts and may also have a slightly different background color.
Ever wanted to change the look of blockquote ?

First of all, if you don't know what a blockquote tag is, then edit any of your previous posts and add this code to it (anywhere in the post):

<blockquote>Write your quotations here</blockquote>

Save the post, and check it out.

You will see that the text "Write your quotations here" is separated from your regular content. At Royal Tutor, just like the one below.

How to Highlight Blog Author Comments in Blogger

Do you see your own comments hidden with other comments on your blog? What if you want to highlight your own comments and let your readers know quickly what have you responded? Will not it be cool?
Lets get on with the tutorial straightaway.


As usual login into your Blogger Dashboard > Design > Edit HTML and check the "Expand Widget Templates" option.

Important Step: Now as a precautionary measure please download your template so that you have an emergency backup if in case you create any errors.

How To Add 3D Horizontal Link List to Blogger

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

</head>

And immediately before it, paste this code:

New Year Banner widget for your blog

As 2010 is fast drawing to a close, I have created a New Year banner which you can easily install in your blog. This tutorial is similar to the previous one.

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

Get a Christmas banner for your blog

Christmas is just around the corner now, and many Bloggers are decorating their templates with festive themes.What better way is there to wish your readers a Merry Christmas than to place a Christmas banner in your blog?Add one now to your blog in 1 easy step!

(I have got this banner image from Bloggerbuster thank you so much for that.)
Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

Replace "Subscribe to: Posts (Atom)" With "Subscribe to: Posts (RSS)"

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, Scroll down to where you see this code in the template.

How To Remove Subscribe to: Posts (Atom) Link

You must have seen that at the bottom of your blogger template there is a Subscribe to: Posts (Atom) link. Blogger has added it so that the blog visitors can subscribe to your Atom feeds. Most blog readers are familiar with feeds in RSS format, though not with Atom feeds. Therefore this link can be confusing, and may well discourage readers from subscribing!

If You need to remove this Subscribe to: Posts (Atom) link,Then Follow the instructions below.

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

HTML Color Codes Generator For Bloggers And Web Developers

These tool helps you to pick your favorite color and it's code,Every color has its own unique color and code to use.So,these makes webmasters and developers to choose color picker tool who often use in Photoshop.I found the similar tool which we use in Photoshop,So you don't need to go for the color code to pick in Photoshop always.

Generate Your Own Custom Hex Colors

1. Drag the black bar on the "Hue" selector to generate the desired base color.

2. Next double click inside the Brightness/Saturation grid to activate the cursor.  Drag it until the desired brightness is achieved.

The "Swatch" bar shows you the final color result.

3. The hex color code is generated at the bottom of the grid in the "Hex" box.  Simply copy and paste the code into your page.

Add Breadcrumb Navigation To Blogger

All of us might have seen breadcrumbs on most wordpress blog.
So why not implement a breadcrumb for the blogger blogs.. For those who don't know what a breadcrumb is,here is a little description.

Breadcrumb is a widget like stuff that displays the visitor's location within a blog. Basically, it improves the navigation for a blog and helps the visitor easily jump from one part of the blog to another.

Making Different Posting Background for Blogger

In making background, we can use two alternative, they are background with color and background with image. For background with images, we can divide again into some techniques, background images with repeated techniques (repeat, repeat-x, repeat-y) and background images with no-repeat techniques.

Making Background with color
to make colorful background in every posting, you need to so some steps;

JQuery Social Bookmark Icons For Bloggers with MouseOver

Normal View:

On Mouse Over:

Login To Blogger Go To > Design > Edit HTML.

Animated Notice Box Widget for Blogger

Ever wanted to greet your visitor with something important message or want to have your visitor a look at the most important content of your website. Than a Animated Notice Box blogger widget is the one you are looking for.

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it: