hide-disable-remove-blogger navbar from your blog

Learn how to hide,disable or remove the blogger navbar(navigation bar) from your blog.
First,let us see what blogger navbar is:

Blogger navbar allows users to easily navigate to other random blogs and it also has a feauture to search the blogs ,and mark any blog as spam.
So,now you have a clear idea of what really a blogger navbar is.So, why so many people prefer to just remove the navbar inspite of the feautures it has like search,etc.Many people think that, it spoils the look of the blog,especially if your blog has differnet subtitle layout which looks too obvious to see for a visitor.Well, let me come to the actual point on how to disable or hide your blogger navbar.

Below is the step-by-step procedure on how to do it with photos to make it easy to understand.

1.Sign in to your blogger account and click the layout button next to your blog name

2.Next,click the edit html tab as shown in the below picture.

3.Add the below html code as specified in the below picture.

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

4. Save the changes.

Now, you can see your blog without that navbar(this tip can only hides the navbar,it doesn't completely delete it).If you want the navbar to appear again,just remove that code and save the changes.

Show off your followers with Followers blogger widget

This post was written to provide a basic guide about one of the most newest widgets of Blogger beta – Followers blogger widget. Please note that it is being under testing so if you don’t see it right away, don’t worry. It’s coming soon (Blogger.com enabled this feature for me yesterday)

What is Following?

Would you like to know who enjoys reading your blog? Or stay updated with your favorite blogs right from your Blogger dashboard? Well now you can do that and more with the Blogger Following feature! You can even keep track of the blogs you follow via your Reading List on the Blogger dashboard.

How do I become a Follower of a blog?

There are two ways to become a follower of a blog.
Option 1. Add a blog to your Reading List.
First, click on the “Blogs I’m Following” tab under “My Reading List” on your Blogger Dashboard.

Then, click on the blue “Add” button in the bottom left corner of your Reading List.

Next, insert the URL of the blog you’d like to follow in the URL box. You can add as many blogs as you’d like by clicking on “Add another“. When you have added all of your favorite blogs, click the orange “Next” button.

You’ll then be given the option to either follow publicly or anonymously:

Then click the orange “Follow” button and that’s it! You’ve added all your favorite blogs to your Reading List! Now, every time one of the blogs are updated the latest post will be displayed in your reading list under the “Items” section.

Option 2. Visit a blog that has added the Following widget and click on the “Follow this Blog” link under the “Followers” widget then do several steps as above.

How to add the Following gadget to your blog

It’s really easy to add the Following widget to your blog. First go to the Layout -> Page Elements tab for your blog. Click the “Add a Gadget” link that appears in the sidebar of your layout. You’ll then see a popup window with all the different types of Gadgets you can add toyour blog. Look for the one called “ Followers” and click on the blue “+” icon

You can then enter your desired title for your Following widget. Once you have chosen a title, click the orange “Save” button. You have now added the following widget to your blog!

Google Ajax Search With Your Adsense Ads

All of you might have seen the New Ajax Search Gadget on your Layout > Add Gadget Page. This Ajax search gadget doesn't support adsense ads.But you can now have a Google ad supported Google Ajax search widget on your blog.The speciality of the Ajax Search is that it can search your blog, without actually leaving your blog.(no need to go to a new page.. it acts like an inline search)

The Ad supported Ajax search Code is available at Google Web Elements .You can see 3 options there.

1. Automatically Search My Site
2. Search my Site and use Adsense for Search
3. Use an existing Custom Search Engine

For showing adsense ads you have to opt for option 2 or 3 .If you choose to use the second option,then you will have to provide you Adsense publisher id(which looks like pub-xxxxxxxx).If you opt for the option 3, you will have to provide the Custom search ID, which will be present in your Google Custom search Code.[Code is generated inline when you enter any of these ids.]

After grabbing this code, just go to your Blogger > Layout page and add a new HTML/JavaScript Gadget and paste the Google Web Element Custom Search code there and save the gadget. The Gadget will look better if you drag it to above the Blog Posts Widget and save it.[that area has got enough space to display the ads :)]
 
Here is a preview of what you should see.

powered by

Custom Search Control

Web

If you want to change the colours and styling of the search results, you will have to add additional CSS Classes.
Update: – Now Google CSE has added all these things. and much more(themes and other customization stuff) So it would be easier for you guys.. :)

Blogger Releases the new version of the Label Widget

Blogger,as a part of its 10th Birthday celebrations, has now released a new version of the label gadget.This one is much better that the old version

What is new?

1. It comes with a Label Cloud.
2. It lets you choose which labels are to be displayed.
3. You can customize it further using CSS.

Drawbacks

1. The cloud just has 5 variations.All labels will be divided into 5 classes depending on the usage of these labels.
2. It would have been better if there was a bigger number of classes.

How to Customize?

You can customize the looks further by using CSS..As i said it has 5 classes of clouds..You can add CSS styles to each of them.

Here is a sample Style which will give a bluish look for the cloud..Here i have applied styles for all 5 label classes and their hover styles (so 10 style definitions in total).

.label-size-5 a {color: #2789ce; /*color of a label of class 5*/
font-size: 3em;
text-decoration: none;
   }
.label-size-5 a:hover {color: #2789ce; /*color of a label of class 5 on hover*/
text-decoration: underline;
   }
.label-size-4 a {color: #2789ce;/*color of a label of class 4*/
font-size: 2.5em;
text-decoration: none;
   }
.label-size-4 a:hover {color: #2789ce;/*color of a label of class 4 on hover*/
text-decoration: underline;
   }
.label-size-3 a {color: #2789ce;/*color of a label of class 3*/
font-size: 2em;
text-decoration: none;
   }
.label-size-3 a:hover {color: #2789ce; /*color of a label of class 3 on hover*/
text-decoration: underline;
   }
.label-size-2 a {color: #2789ce;/*color of a label of class 2*/
font-size: 1.5em;
text-decoration: none;
   }
.label-size-2 a:hover {color: #2789ce; /*color of a label of class 2 on hover*/
text-decoration: underline;
   }
.label-size-1 a {color: #2789ce;/*color of a label of class 1*/
font-size: 1em;
text-decoration: none;
   }
.label-size-1 a:hover {color: #2789ce; /*color of a label of class 1 on hover*/
text-decoration: underline;
   }

Here all of these CSS styles are customizable.You can change the colours and font sizes of each of the 5 classes.

color: #2789ce; is responsible for the colouring of each of the classes.You can change it appropriately with some other hex colour code or something like color:red;
You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class.. (em is a unit of font size just like px)
I have commented the css codes(10 comments)..You can remove those comments if you want(eg: /*color of a label of class 2 on hover*/ is a comment)
These CSS style definitions should be placed above

]]>

If you are not impressed by the customizability of this blogger label cloud,try this advanced version of the cloud which is highly customizable Label Cloud Widget For Blogger

Related Posts with Thumbnails for Blogger

related posts with thumbnails for blogger

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for therelated posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]
Related Posts Widget with Thumbnails for Blogger

Here are the detailed installation steps

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box

2.Now look for

</head>

and replace it with

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Now Find

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

To change the colors and all you will have to modify the CSS
If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve thiswidget,then it would be really great.
If you need a demo just check the related post thumbnails below this post. If you liked this widget,please do retweet and spread the news. :). UPDATE: Fixed the chrome Issue.So if you installed the widget before seeing this,then please update the widget.. :)

How to put an Embedded Comment Form?

Here's what an Embedded Comment Form looks like below your posts and other comments.


If you don't have it in your blog yet but want to put it in your blog, follow these instructions:

1. Sign in to your blog from the Blogger web: http://www.blogger.com/.

2. Make sure you set the Enable Post Pages to 'Yes' in the Settings > Archiving tab.

3. Go to Settings > Comments tab for your blog. Look for the Comment Form Placement and click the Embedded below post button. Then save your settings.


4. Go to Layout > Edit HTML and click Expand Widget Templates.

5. Search for this line in the code:

and below that line add the following line:

6. Save your template and you're done.

Recent posts with thumbnail for each labels

 SETUP - INSTALL:
1/ Activate Full Feed in Blogger. Go to Settings > Site Feed > Allow Blog Feeds > choose Full in dropdown menu. Select Full will syndicate the full content of your post. Reader can read all your post in feed without visit your site. If you don't do this step, Recent Post can not display right thumbnail of your post, and display random thumbnail.

2/ Go to Layout > Page Elements and Add a widget, then paste this code:


<script type="text/javascript">

imgr = new Array();

imgr[0] = "http://lh4.ggpht.com/_t2Z6nkGKLVc/SuHdAIyGJFI/AAAAAAAAAlw/ZddbcX27rVY/s128/windows_7_32bit_4gb_ram_2.png";

imgr[1] = "http://lh4.ggpht.com/_t2Z6nkGKLVc/SugcQki56yI/AAAAAAAAAn4/7VvpxuJwSJM/s128/firefox_addons_compatibility_check.png";

imgr[2] = "http://lh6.ggpht.com/_t2Z6nkGKLVc/Suuy2rgY22I/AAAAAAAAAoc/HoCgkM79ZPY/s128/TuneUp_Utilities_2010_main.png";

imgr[3] = "http://lh6.ggpht.com/_t2Z6nkGKLVc/SugB5dMgEZI/AAAAAAAAAnQ/Dp-0D8NwvrE/s128/vtechtip_b2.png";

imgr[4] = "http://lh6.ggpht.com/_t2Z6nkGKLVc/SwFhLrXGA0I/AAAAAAAAAvk/69EKKkaI738/s128/Windows%207.png";

showRandomImg = true;

tablewidth = 248;

cellspacing = 1;

borderColor = "#30a1db";

bgTD = "#fff";

imgwidth = 70;

imgheight = 70;

fntsize = 12;

acolor = "#000";

aBold = true;

icon = " • ";

text = "cm";

showPostDate = false;

summaryPost = 50;

summaryFontsize = 12;

summaryColor = "#000";

icon2 = " → ";

numposts = 10;

rc_feedLink = "http://www.vtechtip.com/feeds/posts/default";

</script>

<script type="text/javascript" src="http://sites.google.com/site/vtechtipcom/home/vtechtip_recentpost_thumb.js"></script>
Explain:



imgr[0] = random images url.


showRandomImg = true if you want use random images, false if no.

tablewidth = width of the widget.

cellspacing = Space between cells (default one is good)

borderColor = order color (add the background color of your template to perfectly blend it in the template)

bgTD = background color of widget.

imgwidth and imgheight = width and height of thumbnail.

fntsize = font size.

acolor = color of the title.

aBold = do you want to bold title? (true or false)

icon = change icon before title. Can leave blank.

text = text stand for comment (may be cm, comments, comment(s) etc.)

showPostDate = do you want to show post date (true of false).

summaryPost = amount of characters of summary.

summaryFontsize = font size

summaryColor = font color.

icon2 = icon before summary, can leave blank

numposts = amount of post display in widget.

rc_feedLink = Your blog feed url. Default is http://www.yourblogurl.com/feeds/posts/default. If you want only show recent post from specific label, you need change url to: http://www.yourblogurl.com/feeds/posts/default/-/LabelName. Ex: Use http://www.bmagics.blogspot.com/feeds/posts/default/-/Video to show recent posts from label Video.

<script type="text/javascript" src="http://sites.google.com/site/vtechtipcom/home/vtechtip_recentpost_thumb.js"></script>: this javascript is stored in this site. it is STRONGLY Recommended to download the script and upload to your own hosting (google for free javascripts hosts) and replace that url with yours.

Auto 'Read More' Feature with Thumbnails

Add after </head>:

<!-- Auto readmore hehe -->
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 350;
img_thumb_height = 250;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {  
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
  
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}


//]]>
</script>

<!-- Auto readmore hehe -->

Find: <data:post.body/>

Repalce with:

<!-- Auto readmore hehe -->
   <b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:2px;'><a expr:href='data:post.url'><b> Read more...</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<!-- Auto readmore hehe -->