2 Super Cool Responsive Dropdown Blogger Navigation Menus
Following a request by one of my most encouraging blog reader, Marx Oduogu who followed every step on my previous series 'how to design Ogbongeblog template' and created a beautiful version of the template (see here).
After the Google Chrome Inspect Series, next series would be how to make your blogger blog fully responsive and flexible. Without using any default template as I taught on Customize Blogger Custom Mobile Template, you can actually make your entire blog responsive and this is the same method followed with the navigation bar.
How To Add Responsive Dropdown Blogger Navigation Menu
Now let's get to adding the menu bar to blogger via the layout section. It is very easy to add, just follow the easy step by step guide below.
Awesome White Responsive Menu
This is a white scheme blogger navigation which cool effects and flexibily. Fits well into any device screen from desktops, phones, tablets and what have you.It loads very fast and does not affect the loading of your blog. You can place unlimited links to it, from drop downs to normal links.
To add this widget to your blog, simply copy the below code and follow the easy to understand instructions.
<nav class="nav" itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<input id="more" aria-hidden="true" tabindex="-1" class="toggle" type="checkbox">
<div class="nav__inner">
<div class="nav__logo"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Local news</span></a></div>
<ul class="nav__list">
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>News</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Sport</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Weather</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>TV</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Radio</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Travel</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Music</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Food</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Arts</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Earth</span></a></li>
<li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Local</span></a></li>
</ul>
<div class="nav__toggle">
<label for="more" aria-hidden="true" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>More</span></label>
</div>
</div>
</nav>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/4menunav/white.css"/>
Cool Flat Dark Multi Menu
The black theme is the opposite of the white scheme. If is best for bloggers using template with dark background. It blends well for beauty, speed and functionality.It is also very responsive and will adjust to all screen sizes as long as your blog was designed with device breakpoints.
<div id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Home</span></a></li>
<li class='active'><a href='#' itemprop='url' title='menu'><span itemprop='name'>Products</span></a>
<ul>
<li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Product 1</span></a>
<ul>
<li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
<li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Product 2</span></a>
<ul>
<li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
<li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' itemprop='url' title='menu'><span itemprop='name'>About</span></a></li>
<li><a href=#' itemprop='url' title='menu'><span itemprop='name'>Contact</span></a></li>
</ul>
</div>
<script src='https://rawgit.com/mastamvan/backup/4menunav/black.js' type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/4menunav/black.css"/>
Step 1
Visit your dashboard www.blogger.com, Locate the layout section, and clink on "Add a gadget" anywhere you want to place the navigation menu. Once it opens, clink on HTML/Javascript.
Step 2
Copy any of the code above and paste it into the HTML/Javascript box.
Menu Customization
Replace the following codes in the HTML to serve your requirements.
# - with the URL you want to link to.
Products, More - with the name of what you are linking to.
Step 3
Save your template and view you blog. But in case you have placed it below the header or you placed it exactly where the former navigation menu is, then it might have some issues, so I advise you follow step 4.
Step 4 - Remove default Navigation CSS.
Blogger provides us with a static menu bar, so in other not to have scattered template, let's remove the default menu CSS.
Locate the "Edit HTML" in the template section. and search for tabs using CRTL + F. Then you should see some codes similar to the below code. Simply remove everything and save.
/* Tabs
----------------------------------------------- */
.tabs-outer{overflow:hidden;position:relative;background:$(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0}
#layout .tabs-outer{overflow:visible}
.tabs-cap-top,.tabs-cap-bottom{position:absolute;width:100%;border-top:1px solid $(tabs.border.color)}
.tabs-cap-bottom{bottom:0}
.tabs-inner .widget li a{display:inline-block;margin:0;padding:.6em 1.5em;font:$(tabs.font);color:$(tabs.text.color);border-top:1px solid $(tabs.border.color);border-bottom:1px solid $(tabs.border.color);border-$startSide:1px solid $(tabs.border.color);height:16px;line-height:16px}
.tabs-inner .widget li:last-child a{border-$endSide:1px solid $(tabs.border.color)}
.tabs-inner .widget li.selected a,.tabs-inner .widget li a:hover{background:$(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;color:$(tabs.selected.text.color)}
Step 5
View your blog and give me feedback.
The above widgets are dedicated to God almighty for giving me the strength to post all the time and wisdom to code widgets and template. 3 premium templates are on the schedule to get published. Stay with me and enjoy both the free and premium themes.
BERITA LENGKAP DI HALAMAN BERIKUTNYA
Halaman Berikutnya
0 Response to "2 Super Cool Responsive Dropdown Blogger Navigation Menus"
Posting Komentar