Almost YouTube Style Horizontal Menu Bar for Blogger


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


YouTube Style Horizontal Menu for Blogger
I’ve already shared two CSS horizontal menu bar on LabStrike so far. First one was Google style top fixed and the second one was black and white menu bar. But at this time, I just wanna share a YouTube style horizontal menu bar for Blogspot blog. As mentioned in title, its not meticulous as YouTube style menu, but almost with underline hover effect. Also you can easily customize in your own style and works perfectly with any Blogger blog. Lets create it with a simple CSS Code snippet.

Weve to check out this YouTube Style Horizontal Menu Bar in action. Therefore, Ive provided a sample horizontal menu bar screenshot for a demonstration with hover effect. You can also test this menu from our LS Demo Blog and realize its small differences from the actual YouTube horizontal menu bar.


Youtube style menu for blogger blog

You can straightforwardly add this YouTube Style Horizontal Menu Bar in one step method without customizing your Blogger template if youre a novice blogspot user. One Click Installer makes it easy for you. Slightly click on the Add to Blogger button provided below and it adds your menu bar widget to your blog automatically. Also dont forget to customize both CSS and HTML Code snippets before saving your gadget.



   Styling Horizontal Menu Bar with CSS Style Sheets

Due to Bloggers tweak in Blogger template HTML editor, become more advanced for developers. So if youre a novice Blogger, itll be a little bit complicated, because youve to deal with not only CSS and HTML but with jQuery too. In advance, backup your template before you dive into template HTML editor.

Also make sure to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template.

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before making any changes
  • Click on Edit HTML
  • Expand your Blogger template skin | See how it's - screenshot
  • Press Ctrl + F and search the code shown below

]]></b:skin>

Now copy & paste the below code right above/before ]]></b:skin> [use Ctrl+F to find the code].

#arrowunderline-labstrike {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font: normal 15px Georgia;
}
#arrowunderline-labstrike li {
    display: inline;
    margin-right: 20px;
}
#arrowunderline-labstrike li a {
    position: relative;
    color: black;
    padding-bottom: 8px;
    text-decoration: none;
}
#arrowunderline-labstrike li a:hover {
    border-bottom: 3px solid #990012;
}
#arrowunderline-labstrike li a:hover:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    bottom: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #990012 transparent;
}

   » Basic CSS Code Customizations

  - Replace font: normal 15px Georgia with your own font weight, size & name.
   - Replace #990012 (both line no: 19 & 31) with your desired underline color.
  - Remove both line no: 30 & 31 to hide/remove arrow from the underline effect.

Now click Save template and youve added the CSS code in your Blogger template successfully. Lets see how to add the HTML code snippet to your Blogger layout to see your widget completely. See the below steps.

  • Go to Blogger Dashboard » Layout
  • Click on Add a Gadget
  • Choose + HTML/JavaScript
  • Copy & paste the below code in it [leave title column blank, its better]

<div id="arrowunderline-labstrike"><ul>
<li><a href="#"><span>Menu Title 1</span></a></li>
<li><a href="#"><span>Menu Title 2</span></a></li>
<li><a href="#"><span>Menu Title 3</span></a></li>
<li><a href="#"><span>Menu Title 4</span></a></li>
<li><a href="#"><span>Menu Title 5</span></a></li>
<li><a href="#"><span>Menu Title 6</span></a></li>
</ul></div>

HTML Customizations: If you wanna add more menus, add <li><a href="#"><span>Menu Title</span></a></li> code snippet between <ul> tags. Youll be able to replace all # tags with your Link URL and change Menu Title with your title text that wanna display. Save your Gadget and drag it right below your Blogger header or footer and click Save arrangement. Youre done!