Responsive horizontal menu [link-list] in Blogger

Responsive horizontal menu [link-list] in Blogger

Hello everyone, Do you want to use Responsive horizontal menu [link-list] in Blogger?  you came at right place. today I will tell you how to create  Responsive horizontal menu [link-list] in Blogger.

Responsive horizontal menu [link-list] is very good way to show your category or labels in blogger. so that every user can easily see your category or labels without clicking in any where. This trick will increase your pageviews. using this menu list your user easily can read desired labels posts . i will suggest you add this menu list in header . 

Sometimes we want to show our list link horizontally . if you want to particular list link to show horizontally then you have to follow below steps.

Preview of responsive horizontal menu

if you want see demo how it looks then click on demo button below

Demo

first before doing any editing please backup your blogger template. because if you do any mistake then you can move on your previous design.

  • Now go to your blogger dashboard.
  • click on layout section
  • Now to click on add an gadget (where you want to show link list or menu bar )
  • copy below code carefully and paste it.

Responsive horizontal Menu Code is given belew

<--start navbar code by sakshitrends.com-->

<style>

div.scrollmenu {

  background-color: #333;

  overflow: auto;

  white-space: nowrap;

}

div.scrollmenu a {

  display: inline-block;

  color: white;

  text-align: center;

  padding: 14px;

  text-decoration: none;

}

div.scrollmenu a:hover {

  background-color: #000;

}

</style>

<div class="scrollmenu">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

  <a href="#about">About</a>

  <a href="#support">Support</a>

  <a href="#blog">Blog</a>

  <a href="#tools">Tools</a>  

  <a href="#base">Base</a>

  <a href="#custom">Custom</a>

  <a href="#more">More</a>

  <a href="#logo">Logo</a>

  <a href="#friends">Friends</a>

  <a href="#partners">Partners</a>

  <a href="#people">People</a>

  <a href="#work">Work</a></div>                                                                                                          <--end navbar code by sakshitrends.com-->

how to change colors

Now if you want to change you menu background color and font color then you can replace yellow color code area with your favourite color html code .

if you have any querry related to this you can comment below .Feel free to ask anything related to this.

Next Post Previous Post
No Comment
Add Comment
comment url