Main menu

Pages

How to make a navigation bar (Like my navigation bar) for your blogger blog (You should have a navbar section in your blog to use this code)

Introduction

In this tutorial I'm gonna show you how to make a navigation bar for your blogger blog just like mine
I'll give you the code and tell you how to add it to you blogger HTML .. The codes here are provided by W3schools.com with some modifications.

my blog's navigation bar

Steps

  • First go to your blogger
  • Theme -> Edit HTML
  • Between
    <b:skin><![CDATA[
    and
    ]]></b:skin>
  • Put this CSS code for the navigation bar 
.mynavbar {
  overflow: hidden;
  background-color: #333333;
  padding: 20px;
}

.mynavbar a {
  float: left;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 18px;
  line-height: 10px;
  border-radius: 4px;
}

.mynavbar a.logo {
  font-size: 25px;
  font-weight: bold;
  background:#0f5bff;
  color:white;

}

.mynavbar a:hover {
  background-color: #ddd;
  color: black;
}



.mynavbar-right {
  float: right;

}

@media screen and (max-width: 500px) {
  .mynavbar a {
    float: none;
    display: block;
    text-align: left;
  }
 
  .mynavbar-right {
    float: none;
  }
}

  • What's left is to put the code to the navigation bar in the "navbar section" of you blogger theme layout (in which the maximum number of widgets is set to "1" so we wanna change that)
  • So "CTRL + F" in the blog HTML and type "navbar"
  • In the "navbar" section, change the "maxwidgets" to at least "2"
navbar section - blogger - maxwidgets
 
  • Now go to your blogger layout
  • Add a new widget "HTML/Javascript type"
  • Then paste this code
<div class="mynavbar">
  <a href="Link to home page" class="logo">Home</a>
 <a href="Link to privacy policy page">Privacy</a>
    <a href="Link to terms and conditions page">Terms</a>
    <a href="Link to contact page">Contact</a>
    <a href="Link to about page">About</a>
  <div class="mynavbar-right">
   
<a href="Link to facebook page" class="fa fa-facebook"></a>

  <a href="link to twitter" class="fa fa-twitter"></a>
 
<a href="Link to youtube channel" class="fa fa-youtube"></a>
  </div>
</div>

  • You should modify this code and add your own links to static pages and social media
  • For the social media icons of the navigation bar to appear, You need to add a fontawesome kit script under the <head> in your blogger HTML .. Check this topic for how to make a fontawesome kit .. and check fontawesome.com for the limitations of the free kit
  • Save the widget
  • This widget should be moved to the navbar section of the blog
Now save and you're done

Comments