How To Add a Color Full Stylish Toolbar For Blogger Blog ?

If We Have Stylish Toolbar In Our Blog Then Our Blog Is Looking Very Cool And Beautiful And Also Attract The Visitors Because So Many Visitors Want To See The Stylish Looking Blogs Having Awesome Looking . If You Are Also Looking For The Same Then You Are On The Right Place .MyBloggerRoadDecided To Give You a Tutorial Of Adding a Stylish Colorful Toolbar For Your Blogger Blog . This Tutorial Is Very Easy To Implement .

Steps To Add a Color Full Stylish Toolbar For Blogger Blog :

Log in To Your Blogger Account By Your Gmail Account .
Which Will Brought You On The Blogger Dashboard (As Shown In Image)

Select The Blog In Which You Want To Add Now Click On The Template (As Shown In Image)

Now Click On The Edit HTML Button In Template Menu (As Shown In Image)

Now Press Ctrl+F And Find This]]></b:skin>

Now Before This Tag ]]></b:skin> Paste The Below Code .

.nhm_topnavigation
{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3SKQCpXhIbQHHWmm3OubigSQj-1dQNVL2MEV5vFASBQx8dF86dazjfS-QxcFtU8S25fNjCBfQ2KFkmVl2PDU-5PXKm8esR6QODqNrrwU-c1qEvQJRH2uyTSu0hTsjgokhV7mI_Q469wY/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/AVvXsEi3SKQCpXhIbQHHWmm3OubigSQj-1dQNVL2MEV5vFASBQx8dF86dazjfS-QxcFtU8S25fNjCBfQ2KFkmVl2PDU-5PXKm8esR6QODqNrrwU-c1qEvQJRH2uyTSu0hTsjgokhV7mI_Q469wY/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/AVvXsEgUC_hDNcyRBQXsGv5DDh5ONov0xjxV0jYp0LBlF322glfRODEhOLKzAiQ2QX46Ejw6gmIEU2DbjWj4-U8Qr9HAjseUnk3nHJCQObwHqINHTcxoCCfYQWnzA4ZPUP4snGPWZqEm8mB7fbY/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;
}

Now Go To Your Blogger And Click On Layout Option .

Click On Add a Gadget And Add Select The HTML/JavaScript .How To Add a Gadget In Blogger .

Now Paste The Following HTML Code There .

<div>
<div>
<ul>
<li>
<a href="#">
<img height="23" width="26" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvNNfwGERdg0dExyZnEVdDH8KCK1q2ypnvlCPAh-YlyQuEbI1sqHw5ZpA5QKAZPteixUD4jyfT_hhPJ3XVayI3wHcsFaof7Bv8Z3GsLDBYuUrvgj-Fr85iqGDpxcHOU8mjpu0Q8_6dut8/s1600/home-icon.png">
</a>
</li>
<li><a href="#">LIVE TV</a></li>
<li><a href="#">VIDEO</a></li>
<li><a href="#">INDIA</a></li>
<li><a href="#">ELECTIONS</a></li>
<li><a href="#">CITIES</a></li>
<li><a href="#">WORLD</a></li>
<li><a href="#">SPORTS</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">TRENDS</a></li>
<li><a href="#">PEOPLE</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="">
<img height="7" width="27" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdmJtGqGHDQi2SeWZgGfYBau_MklBwPDrDv75PvTiRtMo8TXGWT5Vsj5Ai9HDnn2kPxgouXJlpYzA6LyV8UYdTFpdslOPuE3J28lP_Xgamb0Cv9WvSP8MJNHt-Vb09t9vcVzj9YsH8UeY/s1600/more-icon.png">
</a>
</li>
</ul>
</div>
</div>

And Click On Save Button .

Your Work Is Done Now .You Have Successfully Added Stylish Toolbar In Your Blogger Blog . If You Feel Any Problem Then Comment Below We Will Try Our Best To Help You .

Posted by Unknown