Having a menu on his blog is handy for highlighting some
pages (like the About page), presenting his topics and helping readers to find
out. In this tutorial I will show you how to create a simple horizontal menu on
Blogger, where the links change color when you hover over them with the mouse.
To get there, it happens in two steps:
- · First, we create the HTML code that allows to define which links contains the menu, what are its titles
· 2. Then you create the CSS
code that allows you to format the menu so that the display looks nice.
Step 1 - Create a menu
To create a menu on Blogger, you have to go to the
"Page layout" section of your blog and choose where you will go to
view the menu. In general, a main menu is displayed at the top of the page,
under the header, and takes the full width of the screen.
Add a gadget to the desired location:
in this example, I will click on "Add a gadget" at
the area called "Cross-column" because it responds exactly to these
criteria: it is under the header (and above the articles) and it takes up the
full width of the blog.
Then choose as type "HTM/Javascript" gadget
Add code in this gadget
no need to give it a title. In the area labeled
"content", we will copy the code that will display the links of your
menu. He's going to show up like this:
<div
class="notuxmenu"><ul class="menuliste">
<li><a
href="A">heading 1</a></li>
<li><a
href="B">heading 2</a></li>
<li><a
href="C">heading 3</a></li>
<li><a
href="D">heading 4</a></li>
</ul></div>
I explain this code:
- each line starting with <li> and ending with </li>Corresponds
to a menu link. In other words, if your menu has 7 items, there will be seven
lines like that. In my example, there are 4 menu items (= 4 lines starting with
<li> and ending with </li>).
- You must replace
the letters A, B, C, and D with links (starting with http://).
- The words
"Heading 1", "Heading 2", etc., correspond to the labels on
your menu, the ones that readers will see.
For example, let's say that the blog "example.blogspot.com"
has a menu with a photo topic, a topic design, a page about and a link to
another site like Instagram. He could be like this:
<div class="notuxmenu"><ul class="menuliste"><li><a href=" example.blogspot.com/search/label/sports">sports</a></li><li><a href=" example.blogspot.com /search/label/tech">tech</a></li><li><a href=" example.blogspot.com /2017/04/about.html">About</a></li><li><a href="http://www.instagram.com/example" target="_blank">Instagram</a></li></ul></div>
The part I added in red to ensure that the link opens in a
new tab. This is useful when you send readers on a site other than your
(Instagram in my example): the site opens in another tab, but readers do not
leave your blog so far.
You can save the gadget. Depending on the model Blogger you
are using, in some cases, this menu will automatically adopt horizontal
formatting. If this isn't the case, it will be displayed vertically, in a very
aesthetic way to true say. It is for this reason that we will move to the
second step of this tutorial: the design!
Step 2 – Customize the menu design
This time, things are happening in the "model"
section of blogger. Click "Edit HTML Code". If you are afraid to make
a mistake, consider making a copy of all the code that appears. So you can
easily put it back in case of a problem and get a functional blog.
Among the code that appears, look for the line (feel free to
Ctrl + F on PC, ⌘ + F on Mac and then enter the line of
code in the search field).
Just before ... and before the double hooks, you will copy
these lines:
/* Horizontal
Menu
----------------------------------------------
*/
.notuxmenu {
width:100%;
}
ul.menuliste li {
display: inline-block;
padding: 5px 30px;
text-transform: uppercase;
}
ul.menuliste li a {
color: #000000;
text-decoration: none;
}
ul.menuliste li a:hover {
color: #777777;
}
Depending on the design you use on your blog, this code may
require adjustments to work well. For example, some templates disappear widgets
on mobile and your menu may not be displayed on mobile without some code
changes.
The menu can also be enriched according to needs, to change
the font of writing or the size of the text for example, all follies are
allowed!
I hope this tutorial will help you!
Did you like this article ? Then share it with your friends by clicking on the buttons below:
No comments: