How to Make a List of Navigation Menu On Blogger

blogger logo Hufff, already almost two weeks I vacuum to update the article on my blog. Due to inadequate time and my busy work, Yup! also called employee bloggers, who can only fill a little spare time he poured and share anything I have ever seen, read and try to write an article on my personal weblog.

Yup! this time I try to write a guide for bloggers, namely how to make a navigation menu on Blogger. Which in my blog has changed little in the navigation menu view, well! because I believe and hope that with the addition of a navigation menu may be easier for visitors and readers in navigating SoftAndRose Weblogs and articles can be a clue that is suitable for visitors.

Maybe the bloggers are more familiar and may already know a lot and have been using this navigation menu, and times I wanted to share and add as an archive on my blog. And may also be useful for those of you who may still not understand and have never tried.

Here's how to create a very simple navigation menu, without a lot of script code you simply copy the code and slightly changed the code link to create a navigation menu like this. And you can edit your own preferences to reduce and add links and edit the color display on the navigation menu.

Menu Navigasi SoftAndRose

The following sequence of making such a simple navigation menu;

  1. You have to login to your Blogger account
  2. Go to Menu Dashboard then as can be to customize page, click on the Tab Menu Dashboard Design
  3. Then click Edit HTML to change via script\
  4. Well! This is a very important, you should first back up your blog template to avoid unwanted. Click Download Full Template to a complete copy of your template.
  5. Okay, go. Now please copy the following script code;
  6. Then for the placement of the code, you are looking for (Ctrl + F) for code ]]></b:skin> in your blog's HTML template.
  7. If you've met the code, paste your script code that has been previously Copy the code directly above the ]]></b:skin>

      #NavbarMenu{background:#6699cc; width:940px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
      #NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
      #search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
      #nav{margin:0; padding:0;}
      #nav ul{float:left; list-style:none; margin:0; padding:0;}
      #nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
      #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
      #nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
      #nav li li a, #nav li li a:link, #nav li li a:visited{background:#99ccff; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
      #nav li li a:hover, #nav li li a:active{background:#3399ff; color:#fff; padding:3px 10px;}
      #nav li{float:left; padding:0;}
      #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
      #nav li ul a{width:140px;}
      #nav li ul ul{margin:-24px 0 0 170px;}
      #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
      #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
      #nav li:hover, #nav li.sfhover{position:static;}
      #searchbox{padding:0; margin:0;}
      #search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
      #search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
      #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
      #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
      #top a:hover{color:#cc0000; text-decoration: underline;}
      #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
      .topleft {width: 304px; float: left; margin: 0; padding:0;}
      .topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
      .topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

      You can change the color of navigation in accordance with your taste by changing the color background with RGB color code values on red color letters.

  8. Okay, after that to make the list menu you can add or remove default navigation menu or earlier. There is usually under the code <body>
  9. For list of menu navigation, the following is a navigation menu like on this blog. And you are advised to change or edit the link code according to the link on your blog.
  10. Done! Now we try it first by clicking the Preview button, if it is still something is missing and is not suitable you can change it back before the storage process template.
  11. Okay! If it is successful and suitable, now you press the Save Template to save the full HTML code in your blog.

Success! Good luck ! hopefully can be useful for you.

By On

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)