Make Horizontal Menu Bar Like My Blog

If see the menu bar on the header of my blog quite interesting and good enough suitable with red and black color, may be among you also want to have a menu bar like my blog, if so,in this opportunity I will share about how to make horizontal menu bar like that, and let's enhance your blog.
First,prepare the left image and the right image like below and upload to the free image hosting of your favorite, if you lazy to do that,just use the image below by right click on the image and select copy image location.

Left image

Right image

After that,as usual follow the steps below:

1. Log in to Blogger with your account.
2. On the dashboard menu select templates.
3. On the templates menu select edit HTML.
4. Copy-paste the code below before the ]]></b:skin> code

/*credits : http://nazarpunya.blogspot.com */
#tabs {
float:left;
width:100%;
background:#CC0000;
font-size:93%;
line-height:normal;
border-bottom:none;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("Left image URL") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("Right image URL") no-repeat right top;
padding:5px 15px 4px 6px;
color:#0000FF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#CC0000;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

5. On the body tag search for the code below:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>

And replace the maxwidgets='1' with maxwidgets='3' or more from the value, and replace the showaddelement='no' with showaddelement='yes'.

6. After that copy and paste the code below after the </b:section> above and replace the link and the link name with your's:

<div id="tabs">
<ul>
<li><a href="link 1"><span>link name 1</span></a></li>
<li><a href="link 2"><span>link name 2</span></a></li>
<li><a href="link 3"><span>link name 3</span></a></li>
</ul>
</div>

7. Note,if the method above doesn't work and you have got error you can parse the HTML above by clicking here.

Add AdSense Code Manually On The Blog Post On New Blogger

In the previous page I had share tips about how to add AdSense between blog post and at this time I will share tips about how to Add AdSense code manually on the blog post on new Blogger that can be done as follows:
1.Log in to Blogger with your account.
2.On the dashboard menu select template, here you will see the edit HTML tab and select this section, see the image below:



3.Then on the edit HTML tick the check box for Expand Widget Templates like this:



4.Next step is parsing the AdSense code as the example below:

<script type="text/javascript"> <! --
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</ script>
<script type = "text / javascript"
src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</ script>

Change the HTML characters by replacing the (<) to (&lt;) and the (>) to (&gt;) and the quote marks ( ") to (&quot;), then the code will be look like this:

&lt;script type=&quot;text/javascript&quot;&gt; &lt;! --
google_ad_client = &quot;pub-XXXXXXXXXXXXXXXX&quot;;
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = &quot;468x60_as&quot;;
google_ad_type = &quot;text_image&quot;;
google_ad_channel = &quot;&quot;;
//--&gt;
&lt;/ script&gt;
&lt;script type = &quot;text / javascript&quot;
src = &quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/ script&gt;

You can also use parse HTML online services by clicking here.
4.Now back to edit HTML and scroll down on the edit HTML, search for the <data:post.body/> tags or you can press (Ctrl + F for IE and Firefox). You should see this code:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>

5.And you can add the parsed AdSense code before or after the <data:post.body/> tags, if you want to place on left or right on the blog post the code will be like this:

<div style='float:left;'>
the parsed AdSense code
</ div>

If you want to place AdSense on the right ,just change the float from left to right.