1. Log in to blogger account and Click drop down.
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_topnavigation7. Go to blogger and click Layout
{
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;
}
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>
Save this Image For Your Back UP:If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code
