New Transparent Navbars From Blogger

Now Blogger has given you another reason to show their navbar. Previously only four colors were available, viz. Blue, Black, Tan, and Silver, which of coure do not fit with all templates. Most of the bloggers usually prefer to hide the navbar completely, but a few weeks back a better method was published on BloggerStop to toggle the navbar with mouse-hover effect.

Toggle hide/show Bloger Navbar with mouse hover

Today Blogger has introduced two new "transparent" navbars - "Transparent Light" and "Transparent Dark." To quote a few lines from the post:
These new color schemes take advantage of the ability of modern browsers to render transparency (a technique known to web designers as "alpha blending"). This allows the navbar background to blend together with your blog's background color and pattern. The "Transparent Light" color scheme has a semi-transparent white background, producing subtle pastel colors, while the background of "Transparent Dark" is a semi-transparent black that produces a shaded look.
new transparent Blogger navbar
And also, as it was already observed Blogger has simplified and slimmed down the look of all the navbars, so as to harmonize with the aesthetics of your blog.

It's Friday - Blogger BackUp Day

Get Blogger Into Your FolderA simple Google search will show you how many people using Blogger have lost their blog posts, comments, templates and/or widgets.
Usually blogs are blocked by Blogger if any inappropriate/illegal content is found in the blogs, but again you can see that many Bloggers aren't aware of this and they read the Blogger TOS only when their blogs get banned and they completely lose the access/control over their blogs, and so they cannot even correct or remove the inappropriate content from their blogs.

Google PageRank - From Mystery to History ?

Whether you like it or not, but "PageRank distribution of your webpages" has been permanently removed from your Google Webmaster Tools account.
PageRank Removed or Dead
Along with the recent introduction of Labs in GWT, the option to view PageRank Distribution and Page with highest PageRank under "Crawl Stats" has been removed from GWT.
In the words of Susan Moskwa, Webmaster Trends Analyst, Google.

We've been telling people for a long time that they shouldn't focus on PageRank so much; many site owners seem to think it's the most important metric for them to track, which is simply not true. We removed it because we felt it was silly to tell people not to think about it, but then to show them the data, implying that they should look at it.
Moreover many people have observed that their Google toolbar has also stopped showing the PageRank, rather it is showing N/A (No PageRank information available) for all the webpages/websites. Till now there's no official word from Google on this issue, but again we may get some idea from Susan's next message in the same thread:
Toolbar isn't primarily aimed at site owners who are looking for precise & reliable metrics that they can judge their site by or make decisions by. That's one reason it made sense to remove it from Webmaster Tools, which is designed specifically for site owners in a way that Toolbar is not. Personally I would love to see us remove PR from the Toolbar, but mine is not the only opinion in Google and the folks I have most contact with--site owners--aren't the only users or stakeholders of Toolbar.

Even Matt Cutts has given his opinion against the toolbar PR (way back in 2007):
Personally, I wouldn't mind removing the PageRank in the Google Toolbar or swapping it with some other indicator, but that would be a large undertaking. Maybe that can be a long-term goal for me.

Google PageRank almost always gets a reference when we talk about Websites, SEO and making money/building fame online. For some, it is just an algorithm, for others it's a tool to check the authority or authenticity of a webpage/website and for the rest it is as alien as the 63 moons of Jupiter.

Even if the public PageRank is no more visible to us, but the actual dynamic PageRank is still working and is one of the 200 important criteria which decide the ranking of different webpages in specific Google search results. So keep optimizing your blogs for Search Engines and if you are new to PageRank and SEO, then have a quick look here and here.

RU #3: Blogger Blogs and Search Engine Optimization

This is the third post of the BloggerStop-Round Up series.
Bookmark this post, read and implement these tutorials/hacks to optimize your blog for search engines and bring organic traffic to your blog.

1. Swap title position in Blogger blogs

2. Meta tags
   (a) Importance & how to add them to your blog
   (b) Add separate meta tags to individual pages
   (c) Dynamic meta tags (add meta tags to all your pages automatically)
   (d) Duplicate meta tags and titles - issue Solved

3. Track your visitors and optimize your blog for them.

4. Find out what most people search for...

5. Add your blog to Google blog search.

6. Find and remove broken links from your blog.

7. Show only titles in Blog Archive and Labels pages.

8. How to write titles for search engines.

9. Check your website in different browsers and at different screen resolutions.

10. SEO plug-ins for Firefox.

11. Add your blogs sitemap to Google

12. Best title for your About-Me page

13. Correct way to write titles in Blogger [Important for SEO]

14. Encrypt or hide your HTML source

15. Get better and converting traffic from BlogExplosion and EntreCard

16. A quick SEO tool [Checks your blog for various parameters and accordingly gives a grade to your blog - you MUST check your blog here]

Free File Hosting Sites with Hotlinking/Direct Linking

This post will solve one of the main problems faced by Bloggers working on Blogger platform, i.e. to hotlink CSS/JavaScript (.js) files within their templates.

Direct Linking or Hotlinking
Whenever you upload a file to a file hosting site, a download link is given to you to share the file with others. But there are mainly two ways in which the file can be downloaded.
Let’s say you uploaded a file “X” to
And your blog/website is
Now if your readers can download that “X” file directly from a link present on your website (, then it is called hotlinking/direct linking. But if they have to visit to download that particular “X” file (like in case of Rapidshare/MegaUpload etc.) then these download links are not considered as hotlinks/direct links.

RU #2: Optimize Commenting System On Your Blog!

This is the second post of the BloggerStop-Round Up series.
Bookmark this post, and read the tutorials listed below to optimize commenting on your blog and the way you display your popular/recent comments to your visitors.

01. Embed comment form below posts.

02. Recent comments widget for Blogger.

03. Top commentators widget.

04. Easily moderate comments in Blogger blogs.

05. Delete spam comments without the "Delete icon".

06. Add Yahoo smiley emoticons/icons above the comment form.

07. Change "Post A Comment" link/text.

08. Highlight Blog owners comments.

09. Redfine your comment form, by replacing it with these new comment forms [from JS-Kit/Echo, Disqus and Intense-debate]

10. Back up your comments and posts.

11. Comment like this! [Gain authority through the comments you make on other blogs]

RU #1: Optimize Your Posts - Blogger Help!

Bounce & Share - Social Bookmarking Widget !

Here's a cool new social bookmarking widget for your blog, with on-hover animation effect. The icons will bounce up as soon as you place your mouse cursor over these icons.

Check out the live demo here: Bouncing Icons

Instructions to add these buttons:

Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:
And immediately ABOVE/BEFORE it, paste this code:
<link href='' media='all' rel='stylesheet' type='text/css'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>

STEP #2:
Now find this code in the template:
And immediately BELOW/AFTER it, paste this code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul id='nav-shadow'>
<li class='button-color-1'><a expr:href='&quot; reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>
<li class='button-color-2'><a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-3'><a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-4'><a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-5'><a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></ul></center>
<a href="" target="_blank"><span style="font-size: x-small;">Get this widget</span></a>

Now SAVE the template. And let your visitors share your articles.

NOTE: Although the required css and js files are already uploaded and linked by me in STEP #1, but as a backup you can download and save them on your PC:

BackUp - STEP #1
Download these files:

from Ziddu as a zipped file

BackUp - STEP #2
Upload those two files to MyDataNest (Registration required)
and copy the DIRECT LINKS to these two files.

This section of the post is ONLY FOR THOSE readers, who are not happy with the above icons or they want to use their own icons or if they want to remove/include any other bookmarking icon.
(This is a little bit difficult part. Actually not difficult, but will certainly take some time.)

This is complicated not only because of the additional coding, but also because you have to work with Adobe Photoshop (but don't worry as more than half of the work is already done for you).

Download all the circular icons (including Yahoo, Technorati etc.) from here:

Then contact me, for the .PSD image (Icons.psd) containing all icons used in the above tutorial.

In the .PSD image, replace the icons with the new icons you got from BlogPerfume. Save the image as icons-new.png
Upload this new file to and get the Direct Link to this file.
Then in the Screen2.css file, replace this link ( with the new DIRECT LINK you just obtained from

Finally, in the STEP #4, change the code, depending on the network icon selected by you. [code to add other social networking icons]

*Update: You may download and use these icons too:

Red and White Pearl Social Icons by WebTreat

Silver Glossy Icons by WebTreat

Glossy Orange White Icons by WebTreat

Glossy Blue White Icons by WebTreat

Credits: Bounce & Share widget by BloggerStop. This tutorial is based on Realistic Hover Effect With jQuery by Adrian. Icons used in the widget are free-to-use icons created by BlogPerfume.

BloggerStop - Round Ups Are Coming !

After completing more than 365 days online with over 300 posts already published, some important posts are lost in the archives and only a few regular readers are able to access them. So some round-up (RUs) posts are ready to get published at BloggerStop. These posts will be categorized in different groups and will contain links to other already published posts. I will suggest you to bookmark these posts, to easily access all the important posts anytime in future.

Check Your WebSite In Different Browsers, Resolutions and Operating Systems

Optimizing your website/blog for all screen resolutions, Internet browsers and operating systems is really important. A conflict of your website with any these parameters may result in an increase in the bounce rate of your blog/website.

The stats facts!

According to the Global Stats from Statcounter, you should optimize your blog/website for these operating systems: Windows XP, Windows Vista, Mac OS X and Windows 7.
And you should make your website/blog compatible with these Internet browsers: Windows Internet Explorer 6 (and 6+), Firefox 2 (and 2+), Opera 9+ and Google Chrome.
And finally the content-area of your website should be clearly visible in these screen resolutions (that means your website should be neither too smaller nor larger than the resolution of your visitor's PC): 1024x768, 1280x1024, 800x600, 1152x864, 1280x800 and also 1600x1200.

The problem you will face
If you want to check and optimize your website for each of the above listed parameter, then it may take hours just to check your website in these different operating systems, browsers and screen resolutions.

Finally the solution
So to make your work simple, here are just four websites, that will help you to visualize your website in different combinations within minutes.

1. Adobe Browser Labs - To check your website in different combinations of operating systems and browsers. (It's Adobe - registration is required).

2. BrowserLing - Check your website on different browsers & versions.

3. BrowserShots - most famous, damn slow and I don't use it anymore !

4. NetRender - A quicker option to check your website in all versions of Internet Explorer.

My Suggestions:
1. Track your website visitors to check, in what operating systems, internet browsers and screen resolutions are they working.
2. Your website must look good in all operating systems, but do not worry much on this.
3. Internet Explorer and Firefox display many html/css elements differently. Like using transparent PNG images in older versions of Internet Explorer is not impossible but quite difficult. So you must check your website in different browsers.
 4. Set your websites dimensions (width) near 1000 px. This resolution will suite almost all the screen resolutions. And use background images/colors [download free background images] for those visitors with screen resolution higher than 1000 px.

Let Your Visitors Change Your Blog Theme !!!

Here's another cool hack, that will allow your visitors to change the header/background image of your blog.
The theme will get modified only for that particular reader/visitor and will remain in the default state for all other users.

To quickly understand and try this hack, checkout this on this demo blog: Dynamic Css For Blogger Blogs

Although this hack can be used to change all the css elements of your blog (Header, Background image, links colors, font size and style etc.) but to keep this post short and easy to understand I will only focus on Header and Background images.
In any blogger templates, you will see codes similar to these, to change background images and header.

For Background Image:
body {
color: #fff;
background: url('') repeat;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;

And for Header Image:
#header h1 {
color: #fff;
font: Trebuchet MS;
text-align: left;

But generally these elements ("body" and "header h1") are used only once. So you do not have an option to switch between different background and header images.

But in this hack, we will add more than one background or header elements to the template, although at any moment of time only one background image and/or header image will be shown (of course).
To add different elements, separate .css files will be used.

Now follow these instructions to add similar multiple background and header images to your blog:

STEP #1:
Download these CSS Files:
style_1.css (for background 1)
style_2.css (for background 2)
style_3.css (for background 3)

style_4.css (for header 1)
style_5.css (for header 2)


As a Zipped File (from Ziddu)

And download StylesheetToggle.js from (Right click and "save target as")

STEP #2:
Edit the css files, to add your own images.
You may use as many CSS files as you want. To create more css files, simply create new text files, and save them as .css instead of .txt

In stylesheets 1-3, change the image url, like this:
body {
background: url(http://DIRECT_LINK_TO_ANY_IMAGE.jpg) repeat;
color: #333;
More instructions to change background image here.
And download more background images from here.

In stylesheets 4-5, change the image url and corresponding height and width, like this:
#header-wrapper {
height: 200px;
background: url( no-repeat;
margin:0 auto 10px;
border:1px solid $bordercolor;
Edit the code lines highlighted in RED. Save the file.

NOTE: It is NOT necessary to use different files for header and background images. You can make combinatinos of those files too. So in stylesheets 1-3 along with background images you can simultaneously use 3 different header images too. Similarly in stylesheets 4-5 along with header images, you can insert code for background images too.

STEP #3:
Upload all the files to your MyDataNest/HotLinkFiles account (registration required).
Copy the DIRECT LINKS to these files.

NOTE: In MyDataNest, make sure that the folder where you have uploaded these files is selected as "hidden" and NOT as "private".

STEP #4:
Log in to Blogger, go to Layout -> Edit HTML
and find (CTRL+F) this code:

and immediately ABOVE/BEFORE it, paste this code:
<link href='' media='screen' rel='alternate stylesheet' title='styles1' type='text/css'/>
<link href='' media='screen' rel='alternate stylesheet' title='styles2' type='text/css'/>
<link href='' media='screen' rel='alternate stylesheet' title='styles3' type='text/css'/>
<link href='' media='screen' rel='alternate stylesheet' title='styles4' type='text/css'/>
<link href='' media='screen' rel='alternate stylesheet' title='styles5' type='text/css'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>
<script type='text/javascript'>
// Call stylesheet init so that all stylesheet changing functions
// will work.

// This code loops through the stylesheets when you click the link with
// an ID of &quot;toggler&quot; below.
return false;

// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
return false;
Replace links in RED above, with the DIRECT LINKS you got in STEP #3.

Once again, you need not use exactly 5 css files, delete or add code to the above code in STEP #4 according to the number of your css files.

Save the template.

STEP #5:
Go to Layout -> Page Elements and click on "Add A Gadget" and select it as "HTML/JavaScript" type.

And paste this in to it:
<h3>Try Changing HEADER of this blog!</h3>
<a href="" class="styleswitch" rel="styles4"><img width="200" src=""/></a>
<a href="" class="styleswitch" rel="styles5"><img width="200" src=""/></a>
<h3>Choose a different Background:</h3>
<a href="" class="styleswitch" rel="styles1"><img width="100" src=""/></a>
<a href="" class="styleswitch" rel="styles2"><img width="100" src=""/></a>
<a href="" class="styleswitch" rel="styles3"><img width="100" src=""/></a>

Change the link highlighted in RED with the DIRECT LINK to the file (serversideSwitch.html).
And use the same "rel" tags in the code above as the "title" tags used in STEP #4.

Credits: Based on StyleSwicth-Toggle by Kelvin Luck from Follow him on Twitter @vitch.