December 2013 | Notes on Editing Blogspot

On this original blog template, there were a few drop down menu, as seen on the picture below. I want to

1) change the menu and direct to another page within my blog
2) remove the ones that I do not need.

Original Menu. I intend to change the ones in the red box and remove the rest.

1. To change the menu, I would need to locate a section of the html code as follows:

</div>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

and change it to the following:

<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFasq97dLPyBsLd-f5g47y2jm3TyUnoYsgYeWqe_IbnxWEHH-VrjSNdEzpmn4T9mfFjfcRuiatsPBU4y9VoVpcXZLSCF1wDEdnfayxzPVed9duT1sH-_vGScHzmTRyXMUsV_4ZPWzP2Dk/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='http://modmyblogg.blogspot.sg/p/about-this-blog.html#'>About This Blog</a></li>
<li><a href='http://modmyblogg.blogspot.sg/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<ul>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
</ul>

I have created 2 static page on my blog. This would be for the 'About this Blog' information and the Privacy Policy, which I intend to fill up later. Blogger generates a URL created for these 2 pages. I have placed the 2 URLs to direct when the menu is clicked.

The '#' located in each line is for a URL to be placed. This means whenever the Sub Menu is selected, it is directed to the URL indicated.

There is also another code that works in a similar fashion which I have used before:

<li><a class='trigger' href='#'>New Items</a>
<ul>

But I do not see any difference if I use the trigger command or just a href line.

Nevertheless, the result are as follows:

The 2 menus in the red box has been changed.

Next is to remove the rest of the menu selection. From the same code above, I would comment out the section that I want to remove.



Final result are as follows:

I prefer using the Comment Out function as it leaves the code intact. I intend to use it at a later stage.

Let this be my first post on how to install a Blogger/Blogspot template.

It is the most basic of all notes but it is important.

If we are replacing an existing template, we can save that existing template before replacing it with a new template.

To save your existing Blogger / Blogspot template, as follows:

1) Log in to your Blogger / Blogspot dashboard.

2) Select Template > Backup / Restore (located on the top right hand corner)

3) Click on Download Full Template. This is to save the existing template. Take note of the location of the saved xml file.

4) To upload a new template, click on the Choose File button > Locate the new template file that you have downloaded and save. Refer to the picture above.

5) Click on upload to initiate the new template.

6) If you have any existing widgets, select Keep Widgets.

Notes on Editing Blogspot

Create and Edit Drop Down Menu in Blogspot

Saving and Installing a Template on Blogger / Blogspot

Popular Posts

Blog Archive

My Feedjit