In this Blogger educational you may discover ways to place a horizontal row of menu objects above your first put up to your Blogger weblog (Blogspot blog). This system calls for including both a small amount of code for your Blogger template and a HTML/Javascript widget on your layout. This educational is suitable for Blogger (Blogspot) site owners of all abilities.
Navigating a internet site the use of a horizontal menu is a traditional way to get round. On this weblog for example you may see that I have tweaked Blogger to create a row of horizontal textual content hyperlinks for easier navigation of popular pages and labels. Follow the step by step commands under and you may be capable of add a custom designed menu of horizontal links to your Blogspot weblog as seen here.
Steps to Add a Horizontal Links Menu Above Blog Posts
1. In Blogger navigate to Design > Edit HTML
2. Locate the header style sheet section that allows you to typically be notated as
/* Blog Header */
If you can't locate this line then locate the following region of your stylesheet the usage of CTRL + F and area earlier than these lines
]]></b:skin>
</head>
three. Copy and paste the following CSS code into your template under the header section taking care not to overwrite any current code and to encompass the stop bracket. It might be excellent to paste into the lowest of the header fashion sheet section in order that it's miles less difficult to trade the code if essential.
/* Blog Header */
#newnavbar ul li
font-size:one hundred%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px stable;
#newnavbar li a
color:#335577;
#newnavbar li a:visited
shade: #990066;
#newnavbar li a:hover
color: #99FFFF;
historical past: #CCFFFF;
four. Click on Save Template
Note: You will want to alternate the colors to in shape the color scheme of your weblog. Change every instance of shade and the history shade to personalize on your own requirements
5. Navigate to Design > Page Elements
6. Click on Add a Gadget within the Blog Posts region. If you do not have this feature already set on your template you could enable it via finding the subsequent code and setting showaddelement to sure.
<div id='main-wrapper'>
<b:section class="'main'" id="'main'" showaddelement="'yes'>
7. Select HTML/Javascript from the menu
8. Copy and Paste the following code into the Content container. There is not any need to add a identify. You can regulate the code to suit your own needs relying at the hyperlinks required.
<div id='newnavbar'>
<ul>
<a href="Home Page URL">Home</a></li>
<li><a href="URL of Your Blogger Profile Page">About Me</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
</ul></div>
To add a link to a label, as I did in this site, in this situation Blogger Tutorials, you'll enter the following:
<a href="dailybloggiingtips.Blogspot.Com/search/label/Blogger%20Tips">Blogger Tutorials</a>
nine. Your script must be above your posts and any advertising and marketing or banners. If it is not drag it to the pinnacle role
10. Click on Save
11. Click on View Blog to see your new menu in action
Steps to Add a Horizontal Link Menu to Header
If you decide on you may add your horizontal hyperlink menu in your header as opposed to immediately above your first post. In this case observe the steps underneath:
1. Follow steps 1 to 4 as for menu above first publish
2. Navigate to Design > Edit HTML
three. No want to check Expand Widget Templates
four. Locate the start of the body section so that it will be tagged as <body>
five. Find the road: <b:section class='header' id='header' maxwidgets='1'>
6. Change maxwidgets from 1 to three.
7. Click on Save Template
8. Navigate to Design > Page Elements
nine. Click on Add a Gadget within the Header area.
10.Select HTML/Javascript from the menu
11.Copy and Paste the subsequent code into the Content container. There is no want to feature a title. You can regulate the code to fit your personal needs relying at the hyperlinks required.
<div id='newnavbar'>
<ul>
<a href="Home Page URL">Home</a></li>
<li><a href="URL of Your Blogger Profile Page">About Me</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
<li><a href="URL of Any Label You Choose">Label of Your Choice</a></li>
</ul></div>
To add a hyperlink to a label, as I did on this web page, in this situation Blogger Tutorials, you'll enter the subsequent:
<a href="http://blogknowhow.Blogspot.Com/search/label/Blogger%20Tutorials">Blogger Tutorials</a>
12. Click on Save Template
13. Click on View Blog to view the brand new horizontal menu to your header
Tips and Troubleshooting
To upload this horizontal navigation menu to the place below the header do the following:
Login in to Blogger
Navigate to Design > Edit HTML
Find the following traces of code:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Change showaddelement to sure
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
To left align the menu trade textual content-align:middle to textual content-align:left
Paste the code in step 3 of Steps to Add a Horizontal Link Menu Above First Post directly before the subsequent:
]]></b:skin>
</head>
Navigate to Design > Page Elements
Click on Add a Gadget within the new region enabled below header
Select HTML/Javascript from the menu
Copy and paste the code in step eight of Steps to Add a Horizontal Link Menu Above First Post into the content place of the machine and change links for your personal necessities
Save device and select View Blog to peer your menu in motion
0 Comments