Create Custom Navigation Bar For Blogger ~ Bishal's Blog

; A navigation menu is highly required organize your blog labels, or to add a menu button for a new Blogger page, or to link to another page on the web. This can be done using some basic HTML and CSS. Just I will be telling you that they will work as a buttons for bloggers. When we click on any of them, it redirects to the specified URL of it.

Follow My Steps on Adding Custom Navigation Bar;

Go To Blogger Dashboard
Click On Add A Gadget Just Below Your Blogger Header (Because We will be showing it in the top of our blog)
Click On HTML/Javascript
Paste The Below Code there;

 <div id="tabs24">  
      <ul>  
           <li><a href="1st link" title="Bishal Blog Menu"><span>Home</span></a></li>  
           <li><a href="2nd Link" title="Bishal Blog Menu" class="current"><span>About Us</span></a></li>  
           <li><a href="3rd link" title="Bishal Blog Menu"><span>Services</span></a></li>  
           <li><a href="4th Link" title="Bishal Blog Menu"><span>Our Work</span></a></li>  
           <li><a href="5th link" title="Bishal Blog Menu"><span>Contact Us</span></a></li>  
      </ul>  
 </div>

Change 1st Link, 2nd Link, 3rd Link, etc with your respective links.
Change Home, About Us, Services, Our Work, Contact us, etc with the text to appear in the button.
Save it!

Now, we have added the links. But it is incomplete and looks very very simple. Now, let's stylize the bar. Follow My Steps To Stylize the navigation bar;

Go To Blogger Dashboard And Select Template And Click On Edit HTML
Then Search for This Code inside the HTML Codes: ]]></b:skin>
Now Just Paste This below code before/above ]]></b:skin>

 /* ---------------------- Start Bishal Blog's Navigation Bar ---------------------- */  
 #tabs24{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("images/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}  
 #tabs24 ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}  
 #tabs24 ul li{display:block;float:left;margin:0 2px;}  
 #tabs24 ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}  
 #tabs24 ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}  
 #tabs24 ul li a:hover{color:#fff;}  
 #tabs24 ul li a:hover span{display:block;cursor:pointer;}  
 #tabs24 ul li a.current,#tabs24 ul li a.current:hover{color:#894d12;background:transparent url("images/time2bed_left-ON.gif") no-repeat top left;}  
 #tabs24 ul li a.current span{background:transparent url("images/time2bed_right-ON.gif") no-repeat top right;height:43px;}  
 /* ---------------------- END Bishal Blog's Navigation Bar ---------------------- */

Save Your Template
Check Your blog

Now, we have made a custom navigation bar for blogger. The final work in your blog looks similar to this;

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Create Custom Navigation Bar For Blogger

Follow My Steps on Adding Custom Navigation Bar;

About Admin MC3

Related Post