Blog E Trick: December 2013

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Find this tag by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

CSS CODE

.nhm_topnavigation
{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPILa2Ni4bkOhLsFRV4ik2fJl8I8ktO4hyEmxEebqVfZDU4UY7o6zczQTV2-CGRQhi7IF7_78lVXlThOvniOWn_ZbZ992d5aizxKqWOijY9P5JiLBmFjY-TyoSA41oIuJO0wuv26rn7c/s1600/top-nav-bg.gif") repeat-x scroll 0 0 #0D1013;

display: block;

height: 38px;

width: 936px;
}

.nhm_topnavigation ul {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPILa2Ni4bkOhLsFRV4ik2fJl8I8ktO4hyEmxEebqVfZDU4UY7o6zczQTV2-CGRQhi7IF7_78lVXlThOvniOWn_ZbZ992d5aizxKqWOijY9P5JiLBmFjY-TyoSA41oIuJO0wuv26rn7c/s1600/top-nav-bg.gif") repeat-x scroll 0 0 #0D1013;

display: block;

height: 38px;

list-style: none outside none;
}
.nhm_topnavigation ul li
{
float: left;
}
.nhm_topnavigation ul li a
{

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuXT3LOTKtzLN0DR5A6697XZNMO67JuC9JQCZaHQ-KsCgDmPtefdwb4lh3GDKWQfXzyJFSsnxNzfU9SfBJCbJVIv-SSyVUEL-rnqB86Cla4EuL3vZk3gHEs8CQaeh7hdhfPvKJj-l4woE/s1600/top-nav-seprator.gif") no-repeat scroll 0 5px rgba(0, 0, 0, 0);

color: #FFFFFF;

display: block;

float: left;

font: 700 12px 'Roboto',sans-serif;

height: 26px;

padding: 9px 14px 0;
}
.nhm_topnavigation_wrap
{

float: left;
}
.nhm_topnavigation .home
{

border-top: 3px solid #009BFF;
}
.nhm_topnavigation .home img
{

margin-top: -3px;
}

.nhm_topnavigation .home:hover
{

background: none repeat scroll 0 0 #009BFF;
}

.nhm_topnavigation .home_active
{

border-bottom: 3px solid #009BFF;
}

.nhm_topnavigation .home_active .home
{

background: none repeat scroll 0 0 #009BFF;
}
.nhm_topnavigation .livetv
{
border-top: 3px solid #9A0000;
}
.nhm_topnavigation .livetv:hover
{

background: none repeat scroll 0 0 #9A0000;
}

.nhm_topnavigation .livetv_active
{

border-bottom: 3px solid #9A0000;
}
.nhm_topnavigation .livetv_active .livetv {
background: none repeat scroll 0 0 #9A0000;
}
.nhm_topnavigation .video_new {
border-top: 3px solid #FE9A2E;
}
.nhm_topnavigation .video_new:hover {
background: none repeat scroll 0 0 #FE9A2E;
}
.nhm_topnavigation .video_new_active {
border-bottom: 3px solid #FE9A2E;
}
.nhm_topnavigation .video_new_active .video_new {
background: none repeat scroll 0 0 #FE9A2E;
}
.nhm_topnavigation .allindia {
border-top: 3px solid #FA5F00;
}
.nhm_topnavigation .allindia:hover {
background: none repeat scroll 0 0 #FA5F00;
}
.nhm_topnavigation .allindia_active {
border-bottom: 3px solid #FA5F00;
}
.nhm_topnavigation .allindia_active .allindia {
background: none repeat scroll 0 0 #FA5F00;
}
.nhm_topnavigation .cities {
border-top: 3px solid #BA4A1D;
}
.nhm_topnavigation .cities:hover {
background: none repeat scroll 0 0 #BA4A1D;
}
.nhm_topnavigation .cities_active {
border-bottom: 3px solid #BA4A1D;
}
.nhm_topnavigation .cities_active .cities {
background: none repeat scroll 0 0 #BA4A1D;
}
.nhm_topnavigation .world {
border-top: 3px solid #3366CC;
}
.nhm_topnavigation .world:hover {
background: none repeat scroll 0 0 #3366CC;
}
.nhm_topnavigation .world_active {
border-bottom: 3px solid #3366CC;
}
.nhm_topnavigation .world_active .world {
background: none repeat scroll 0 0 #3366CC;
}
.nhm_topnavigation .sports {
border-top: 3px solid #00A53C;
}
.nhm_topnavigation .sports:hover {
background: none repeat scroll 0 0 #00A53C;
}
.nhm_topnavigation .sports_active {
border-bottom: 3px solid #00A53C;
}
.nhm_topnavigation .sports_active .sports {
background: none repeat scroll 0 0 #00A53C;
}
.nhm_topnavigation .trends {
border-top: 3px solid #CC3333;
}
.nhm_topnavigation .trends:hover {
background: none repeat scroll 0 0 #CC3333;
}
.nhm_topnavigation .trends_active {
border-bottom: 3px solid #CC3333;
}
.nhm_topnavigation .trends_active .trends {
background: none repeat scroll 0 0 #CC3333;
}
.nhm_topnavigation .blog {
border-top: 3px solid #CC66CC;
}
.nhm_topnavigation .blog:hover {
background: none repeat scroll 0 0 #CC66CC;
}
.nhm_topnavigation .blog_active {
border-bottom: 3px solid #CC66CC;
}
.nhm_topnavigation .blog_active .blog {
background: none repeat scroll 0 0 #CC66CC;
}
.nhm_topnavigation .photos {
border-top: 3px solid #9600B4;
}
.nhm_topnavigation .photos:hover {
background: none repeat scroll 0 0 #9600B4;
}
.nhm_topnavigation .photos_active {
border-bottom: 3px solid #9600B4;
}
.nhm_topnavigation .photos_active .photos {
background: none repeat scroll 0 0 #9600B4;
}
.nhm_topnavigation .assembly {
border-top: 3px solid #33CC99;
}
.nhm_topnavigation .assembly:hover {
background: none repeat scroll 0 0 #33CC99;
}
.nhm_topnavigation .assembly_active {
border-bottom: 3px solid #33CC99;
}
.nhm_topnavigation .assembly_active .assembly {
background: none repeat scroll 0 0 #33CC99;
}
.nhm_topnavigation .people {
border-top: 3px solid #62B0C2;
}
.nhm_topnavigation .people:hover {
background: none repeat scroll 0 0 #62B0C2;
}
.nhm_topnavigation .people_active {
border-bottom: 3px solid #62B0C2;
}
.nhm_topnavigation .people_active .people {
background: none repeat scroll 0 0 #62B0C2;
}
.nhm_topnavigation .more {
border-top: 3px solid #666666;
}
.nhm_topnavigation .more img {
margin: 7px 3px;
}
.nhm_topnavigation .more:hover {
background: none repeat scroll 0 0 #666666;
}
.nhm_topnavigation .more_active {
border-bottom: 3px solid #666666;
}
.nhm_topnavigation .more_active .more {
background: none repeat scroll 0 0 #666666;
}

.subnav {
background: none repeat scroll 0 0 #666666;
float: left;
position: relative;
width: 100%;
}
.subnav ul {
margin: 0;
padding: 0;
}
.subnav ul li {
border-left: 1px solid #404040;
border-right: 1px solid #7E7E7E;
display: inline-block;
margin: 6px 0;
padding: 2px 17px;
position: relative;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.subnav ul li:first-child {
border-left: medium none;
}
.subnav ul li.last {
border-right: medium none;
}
.subnav ul li a {
color: #FFFFFF;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code

HTML CODE

<div class="nhm_topnavigation">
<div class="nhm_topnavigation_wrap">
<ul class="home_active">
<li>
<a class="home" href="#">
<img height="23" width="26" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixwo0_BmOyYPXX8yKVH1gz36CE-CRYqM0-7C0gu3GJGzefRrIxHC6BDDEKZaXS66tDtvmMoNUjInD0KX8IulpR9qpHEi_KK5m17e3oiTEfa-wpNZP21AUMXHjusHyUd8FsVnJ3JDoOo9c/s1600/home-icon.png" alt="" title="">
</a>
</li>
<li><a class="livetv" href="#">LIVE TV</a></li>
<li><a class="video_new" href="#">VIDEO</a></li>
<li><a class="allindia" href="#">INDIA</a></li>
<li><a class="assembly" href="#">ELECTIONS</a></li>
<li><a class="cities" href="#">CITIES</a></li>
<li><a class="world" href="#">WORLD</a></li>
<li><a class="sports" href="#">SPORTS</a></li>
<li><a class="photos" href="#">PHOTOS</a></li>
<li><a class="trends" href="#">TRENDS</a></li>
<li><a class="people" href="#">PEOPLE</a></li>
<li><a class="blog" href="#">BLOG</a></li>
<li><a class="more" id="" href="">
<img height="7" width="27" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO5Gcyc1qJ2uPhyfewVL0sO8xk9LqQ7TIEMc3mOkQ9nvi8GPwRs-4kljT7rYGi0XJwWmr9AirO190AmGDRoOlXl-xnGwfPCJSlXE3dIe6F44LZGnvXXCdFCRwtuX9cUa5m-ssWDzcc0o/s1600/more-icon.png">
</a>
</li>
</ul>
</div>
</div>