Ways to Creates 'HTML' Blogger Navigation Bar

In this post I am going to show you how to make a "menu" gadget for your Blogger blog page. Let's get started,

First of all make sure to save your blogger blog template. For this go to your "Dashboard" then click on "Design", and then select "Edit HTML". Then click on "Download full template".

After that select "Page elements" and you will go to "page elements". Here you should delete the "pages" gadget if you already have it. If not or after removing the gadget just go back to "Edit HTML". There you should put a tick to "Expand Widget Templates". It will reload your HTML codes.

Now find the following code:


<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>

Then replace the above code by following code:


<b:widget id='LinkList123' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<li class='selected'>
<a expr:href='data:blog.homepageUrl'>Home</a>
</li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
</b:if>
<b:loop values='data:links' var='link'>
<b:if cond='data:blog.url == data:link.target'>
<li class='selected'>
<a expr:href='data:link.target'><data:link.name/></a>
</li>
<b:else/>
<li><a expr:href='data:link.target'><data:link.name/></a>
</li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Now go to the bottom of the page and click on "SAVE TEMPLATE". Now you are at the end of the process. This is the time to select "Page Elements" tab at the left upper part of the page. Then you will see a gadget called "MENU" inside your page elements. At the right bottom corner of that gadget you will see a mark called "Edit". Select it. Following window will appear.

Then add Urls to the "New site URL (http://alljectsart.blogspot.com/search/label/AdSense%20Tips)", and add the name that you want to display on your menu in to "New Site Name"

Save it and view your blog. Thats all. Now you can add more and more web addresses to your menu.

If you want to add your "pages" to your gadget follow the procedure below,

select "POSTING" ---> "EDIT PAGES"

Then click "VIEW" on the page you want to add to your menu gadget. Copy the address of the page from the address bar. Then paste it in the "New Site Url" in the menu gadget. Thats all.

Got Something to Add?
0 comments: Post a Comment

Older Post