0 BLOGGER ADS CODE CONVERTER ENCODER

This Post Has Currently Moved To Our New Domain

http://www.problogtuts.com

0 TWITTER FOLLOWER WIDGET FOR BLOGGER

Twitter Follower Box or Twitter Fan Box.

This Post Has Currently Moved To Our New Domain:

www.problogtuts.com

1 APPEAR DISAPPEAR BLOGGER NAVBAR AUTOMATIC

Mouse hover effect to Automatically hide and show Blogger’s navbar/ Automatic appearing and disappearing blogger nav bar. Hide and reappear blogger navbar automatically is another great blogger trick we will learn today. Earlier in my post how to Remove Blogger navbar I had talked about removing blogger navigation bar or hiding a nav bar from a blog. But this is very different from earlier trick. In previous trick we learned how to completely disable blogger navbar but in this lesson we will focus on hiding and making it reappear when a mouse is hovered on a particular location of a topnavbar. However if you are not interested in this but simply want bloggers default navigation bar to be removed completely forever or hide it than read the post how to remove the topnavbar in your blogs and if you are interested in showing nav in your blog but not every time than you may learn the trick on how to automatically hide this Blogger’s naavbar and reappear when a mouse hovers.

In this hack blogger nav bar automatically hides which means, it only will show when the cursor passes by the place it’s usually located. So let us start with this latest blogger tips and tricks.

...............................................................................................................

Easy and Simple Removal Steps:

...............................................................................................................

So, how to add banner ads widget/ads gadget in blogger blog. For making this possible log in to your blogs dashboard and select the blog you want to add this trick.

Go to Design > Choose Edit HTML
Click on Expand Widget Templates box

Now search for the following code in your blogs template:

body {

Paste any one of the below given codes whichever is applicable just Before above found code.

...............................................................................................................

New Blogger Templates

...............................................................................................................

#navbar-iframe {

opacity:0.0;

filter:alpha(Opacity=0)

}

#navbar-iframe:hover {

opacity:1.0;

filter:alpha(Opacity=100,FinishedOpacity=100)

}

...............................................................................................................

Classic Blogger Templates

...............................................................................................................

#b-navbar {

opacity:0.0;

filter:alpha(Opacity=0)

}

#b-navbar:hover {

opacity:1.0;

filter:alpha(Opacity=100,FinishedOpacity=100)

}

...............................................................................................................

Suggested Reading:

...............................................................................................................

•   How to remove the default topnavbar from your blogs

0 125x125 IMAGE ADS BANNER FOR BLOGS

125x125 Image Ads Banner Widget/Gadget For Blogs. I hope you have noticed ad spots of different sizes in various blogs. Do you know what the objectives of this ads banner in blog are? If not than let me tell you, this is the famous ads widgets which most of the professional blogs have. This blogger ad widget would prove very helpful for you in designing ads spot in your blog, especially if you are registered as publisher with Buy and Sell Ads including various other advertising companies. You may also opt for direct ads placement in your blog with the help of this widget. I have designed different versions of this blogger banner ads widget/ads gadget. You can easily copy the code and implement in your blog in minutes. Lastly, I would like to inform you that this is the most popular ads widget that include 4 images two at the top and two just below it and I have also noticed that bloggers calls this as 125x125 banner ads for blogger and sometimes random ads widget for blogger which is exactly similar to banner ads gadget 125x125. An unnoticeable difference between these two widgets is that the former is static and another keeps on changing every time a page is reloaded.

...............................................................................................................

Steps to Add Banner Ads Widget/Gadget to Blogger

...............................................................................................................

So, how to add banner ads widget/ads gadget in blogger blog. For making this possible log in to your blogs dashboard and select the blog you want to add this ads widget.

Go to Design > Add Gadget > Html/Javascript

Choose HTML/JavaScript Widget

Paste the below given code inside it.

Save and reload your blog to see the changes.

Click Here To Get Lists of Html Color Codes

<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#000000">
<tbody><tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE-1 " height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE-2 " height="125"/></a></center></td></tr>

<tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE-3 " height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="RL OF BANNER’S IMAGE-4 " height="125"/></a></center></td>
</tr>
</tbody></table>
<table border="1" bordercolor="#ffffff" cellpadding="2" cellspacing="1" width="269" bgcolor="#000000">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="269" height="29" border="0" alt="AD DESCRIPTION!" src="URL OF BANNER’S IMAGE-5" /></a></center></td>
      </tr>
    </tbody></table>
</div>
</div>

...............................................................................................................

Suggested Reading:

...............................................................................................................

•  Color Code Picker For Blog Designing

• Add Search Box to Blogger Blog

...............................................................................................................

Customizing the codes:

...............................................................................................................

1. Replace  all the colored phrases with the Image banner links provided by Advertisers.
a)URL OF BANNER’S IMAGE-1  URL OF BANNER’S IMAGE-2  
b)URL OF BANNER’S IMAGE-3 URL OF BANNER’S IMAGE-4 
c)URL OF BANNER’S IMAGE-5
 
2. Replace AD DESCRIPTION with some information related to the Ad. The description appears on mouse hover.

3. Replace URL OF ADVERTISER with the link provided by advertisers.

4. Replace this color code for changing the background of  the ads widget  ( bgcolor="#000000")

5. If you want to increase the distance between the ad blocks then edit width="265"

Note: Do not change image width and  height.

...............................................................................................................

Download similar ads widgets:

...............................................................................................................
Coming Soon.....

...............................................................................................................

Add Widget to Blogger:

...............................................................................................................

1 REMOVE BLOGGER NAV BAR HIDE NAVBAR

Blogspot hosted Blogger blog comes with a default navigation bar or navbar which allows users to search the posts within the blog, helps visitors to easily navigate to other random blogs, mark any blog as spam by clicking Flag Blog option. Most blogger prefers to hide the nav bar using the simple css trick in the template of the blog but are you aware that you can also permanently remove the nav bar. Yes, it’s up to you to decide whether you want to hide the blogger nav bar, disable blogger nav bar or remove the blogger nav bar permanently. I have written down simple and step wise instructions I hope you will enjoy playing with the codes.

...............................................................................................................

Advantages and reasons to disable blogger nav bar

...............................................................................................................

1. You can make your blog look professional.
2. Visitors can never flag and mark your blog spam.
4. Take advantage of default blogger blog search engine.
3. Visitors will have no option to jump out of your blog clicking the ‘Next Blog’ or ‘Previous Blog’ option.

...............................................................................................................

Disadvantages and reasons not to disable blogger nav bar

...............................................................................................................

1. Your visitors cannot use the link Follow and cannot follow your blog.
2. Visitors and you yourself can no longer search the post within the blog.
3. Unfortunately you will remove a blogger stamp.

...............................................................................................................

Explanation on hiding the nav bar style one

...............................................................................................................

Follow step wise instructions to hide blogger navigation bar.

1. Sign in to your blogger dashboard and click the design button.
2. Next, click the edit html tab and tick mark the expand widget box.

Search the codes given below in red in your blogs template.

/* Variable definitions

====================

3. Now add the code in green given below just above the code in red.

#navbar-iframe {
display: none !important;
}

The final result of the code should look like this.

#navbar-iframe {

display: none !important;

}

/* Variable definitions

====================

...............................................................................................................

Explanations on hiding the nav bar style two

...............................................................................................................

Follow step wise instructions to hide blogger navigation bar.

1. Sign in to your blogger dashboard and click the design button.
2. Next, click the edit html tab and tick mark the expand widget box.

Search the codes given below in red in your blogs template.

/* Variable definitions

====================

3. Now add the code in green given below just above the code in red.

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

The final result of the code should look like this.

#navbar {

height: 0px;

visibility: hidden;

display: none;

}

/* Variable definitions

====================

...............................................................................................................

Completely removing the blogger nav bar

...............................................................................................................

Search This

<body>

Paste This just above the code shown above in red.

<!--<body>-->

The final result of the code should look like this.

<!--<body>-->

<body>

Now Save the Template and you will see a confirmation about deleting the Navbar Widget.

Confirm the Deletion by Clicking on the Delete Widgets Button.

...............................................................................................................

How to get back the Nav Bar?

...............................................................................................................

In any point of time if you want the nav bar to reappear in you blog than simply search the extra codes you have added and remove it. And lastly don’t forget to save the template.

Remove this:

#navbar-iframe {
display: none !important;
}

OR

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

OR

<!--<body>-->

If you have any doubts regarding this post, or any other posts don't hesitate to submit a request or you may also ask your doubts via comments to this post. But please note we hate spam’s as much as you do.

2 ADD BLOG SEARCH BOX CODE TO BLOGGER TRICKS

Blogger Navigation bar or popularly called as Blogger Nav Bar comes with a default search box embedded at the top of your Blogger blogs. The nav bar leaves behind no options of customizing it or the search box except changing the colour of the bar. However, you may want to include similar custom searchbox in blogs sidebar or blogs header or blogs footer or at the main body of your blog. You might be thinking why my blog has no Navigation bar with search button embedded at the top though I have mentioned above in the post that default Blogger Navigation Bar comes with no options of customization. The tricks of blogger customization come here. The answer to this question is very simple I followed a trick to remove the navigation bar from my blog. See you cannot edit the code of the search but you can remove the whole code of the search box along with the blogger nav bar. You too can remove the blogger nav bar, read the post how to remove hide or disable blogger nav bar for giving your blog a professional look.

................................................................................................................

Stepwise Instructions To Ad The Code
................................................................................................................

Sign in to Blogger Dashboard select Design and Add Gadget

Select HTML/JavaScript and when the page opens add the codes.

Save and reload/refresh your blog. 

................................................................................................................

Search Box Code

................................................................................................................

<p align="left">
<form id="searchthis" action="http://basnetblog.blogspot.com/search" style="display:inline;" method="get">
<strong>BASNET BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

................................................................................................................

Customize Simple Blogger Search Box
................................................................................................................

Don’t forget to change the portion in red http://basnetblog.blogspot.com to the URL or web address of your Blog and BASNET BLOG to your sites name. Apart from the sites url it is always not mandatory that you should give particular name of your blog to the blog internal search engine or the search box. Let me explain you, for instance, if you have a Blog Name/Blogs Title like “Blogger Blog Tutorials and Tricks” than in this case you may consider writing something like “BBTD”, “Search Here”, “Search This Site”, “Search The Blog”, “Blog Search”, “Blogger Search Box”, etc.

You can also change the width of the search box by replacing the digits 20 to whatever size you want.  Not only this you can easily tweak the value Search to Go, Hit, Visit, etc. After you are done with the code customizations save it and load the page that contains the search box code. By doing this you can verify the bugs in your code and its presentation, location, etc.Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size.

................................................................................................................

Demo Of Custom Search Box Code
...............................................................................................................

Below given demo has width size="20" and value="Search" will give you this result:-

BASNET BLOG

0 HTML COLOUR CODES GENERATOR PICKER

Free Hexa Html Color Codes Generator Tool And Chart