Blogger Navgation Menu with Date | 2014 | InfoTechBlogging InfoTechBlogging: Blogger Navgation Menu with Date | 2014

Posted by Syed Muhammad Ali
Today we are sharing an Awesome Navigation menu for Blogger. As navigation menu helps Visitor to Find Categories in your Blog and Find Latest Posts.

Must Check These:

Drop down Navigation Menu for Blogger

Navigation Menu with Social Sharing Buttons

This Navigation menu also contains date at the right which creates an impression on the Visitor.

This is an awesome widget made by Itb. You can easily Add it in Blogger.

You just have to add some Piece of Code in your Blog Template.

  • Go to Blogger
  • Log-In to your Dashboard
  • Go to Template Section
  • Click Edit Html
  • Find tag in your Blog Template
  • Paste the Below Code Just Below Tag.

 

/*                              var itb-date=new Date()
                             var year=itb-date.getYear()
                             if (year < 1000)
                               year+=1900
                             var day=itb-date.getDay()
                             var month=itb-date.getMonth()
                             var daym=itb-date.getDate()
                             if (daym*/

 
 
 

  • Now Find ]]> tag in your Template
  • Paste the Below Code Just Above ]]> 

#itb-navtop {display: inline-block;}#itb-navtop ul, #itb-navtop li {list-style: none outside none;margin: 0;padding: 1px 0 0;}#itb-navtop li {float: left;height: 18px;position: relative;}#itb-navtop li a {border-right: 1px solid #333333;color: #fff;font: bold 11px sans-serif;padding: 20px 15px;text-transform: uppercase;}#itb-navtop li.dgnsubtop {padding-right: 10px;background-image: url(http://4.bp.blogspot.com/-NTKXiugkHrs/UIeVQmEzDjI/AAAAAAAAGJ4/G92p5n8hgvY/s7/downarrow-dark.png);background-repeat: no-repeat;background-position: 90% 50%}#header, body#layout #header {width:40%;display:inline-block;float:left;margin-left:22px;}#itb-date {color: #ffffff;display: inline-block;float: right;font: bold 12px sans-serif;padding: 4px 10px;}#itb-date a {background: none repeat scroll 0 0 #333333;color: #ffffff;font-family: sans-serif;font-weight: bolder;padding: 13px 16px 16px;}#itb-nav {background: #2C2C2C;overflow: hidden;padding: 8px 20px;height: 22px;margin-bottom: 25px;overflow:hidden;

}

Customization:

  • Replace your-link-here with your Code

Congrats You Are Done!

You can see the Menu on your Blog. I hope you like this Widget. Ask your Queries in Below Comments:)

Follow Us!

About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter