Creating Drop Down Menus

Tweet

Dropdown menu or Pull-down menu is the collection of some data (in the form of text and link) which is shortened to become a single menu. Dropdown menus can be used as you need. Beside it can be used as an alternative Blogroll, you can also use it to make many link addresses to the targeted site. Do you want to know how to make it?

How to make standard dropdown menu

Menu1 Menu2 Menu3

<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://10-mobile.blogspot.com">Menu1</option>
<option value="http://10-mobile.blogspot.com">Menu2</option>
<option value="http://10-mobile.blogspot.com">Menu3</option>
</select>
</form>

How to make dropdown menu with button

Menu1 Menu2 Menu3

<form name="jump">
<select name="menu">
<option value="http://10-mobile.blogspot.com">Menu1</option>
<option value="http://10-mobile.blogspot.com">Menu2</option>
<option value="http://10-mobile.blogspot.com">Menu3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="OK">
</form>

How to make dropdown menu with picture button

Menu1 Menu2 Menu3 Menu4

<form name="jump">
<script>
function jumpMenu(){
location=document.jump.menu.options[document.jump.menu.selectedIndex].value;
}
</script>
<select name="menu">
<option value="http://10-mobile.blogspot.com">Menu1</option>
<option value="http://10-mobile.blogspot.com">Menu2</option>
<option value="http://10-mobile.blogspot.com">Menu3</option>
<option value="http://10-mobile.blogspot.com">Menu4</option>
</select>
<a href="javascript:jumpMenu()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYno6APlQY-jGtyU4M7xZIJnewI9sJZCAimGVZyLZpwnOVpeOnXnFn990j2vIU0Y1EemqDZXHQlCXX1BOmrjruncdo9cpAopQL6HtKiL588jlcGVOI1HfgzpPcx9JjIc6_xXTRLOuSDw/s1600/btn_go.gif" /></a></form>

4:42 AM by Susanto · 0

How to display the last Posts or Comments on the sidebar?

Tweet

1. Login the administrator page elements (Dashboard → Design).

2. Add a Gadget.. select  feed widget, with the following URL’s:

To show the recent posts:

http://BlogName.blogspot.com/feeds/posts/default

To display the latest comments:

http://BlogName.blogspot.com/feeds/comments/default

3:56 AM by Susanto · 0

How to Set SEO for Meta Title, Keyword and Description?

Tweet

Find This Code:

<title><data:blog.pageTitle/></title>

And Change with this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | (example: Free Blogger Templates)</title>
<b:else/>
<title><data:blog.pageTitle/> | (example: Free Blogger Templates)</title>
</b:if>
<meta content='</font><font color="#ff0000">your description here</font><font color="#008000">' name='description'/>
<meta content='</font><font color="#ff0000">keyowrd1, keyowrd1, etc..</font><font color="#008000">' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

3:24 AM by Susanto · 0

How can I edit the Navigation Menu link of my template?

Tweet

1. Most templates have a menu that can only be changed from the HTML (Dashboard → Layout → Edit HTML). In many cases the code to look for is:




Just find the similar code like this:

<li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='</font><font color="#ff0000">#</font><font color="#008000">'>Edit</a></li>

For set link on Menu, your just find a code like this href='#' and change symbol # with link what you want.

Or, if you find the similar code like this:

<li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='</font><font color="#ff0000">#</font><font color="#008000">'>Edit</a></li>

There you can change the expr:href='</font><font color="#ff0000">#</font><font color="#008000">' with your own links: href='</b></font><b><font color="#ff0000">mylink</font><font color="#008000">'. Also see the instructions in your template for more information.

2. Some templates include a gadget to edit the menu directly from the Dashboard (Dashboard → Layout → Page Elements).

2:44 AM by Susanto · 0

How to Show or Hide or Auto Hide "Navbar Blogger"?

Tweet

Before erasing navbar blogger (Navigation Bar), it’s better if I inform that this method is one of the Blogger TOS violation. If you still want to erase it, you can use the script below:



Hide Navbar:

#navbar-iframe { display:none}

Show Navbar:

#navbar-iframe { display:block }

Auto Hide:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

How to do:
In the Edit HTML page, put the code above under the code <b:skin><![CDATA[/* and then save template.

2:32 AM by Susanto · 0

How to Install a custom template in Blogger?

Tweet

1.Download a template file (Zip / Rar) and unzip. (Screenshot 1)

2. Log in to Blogger.
3. Go to "Layout" under "Dashboard". (Screenshot 2)

4. Click "Edit HTML" under "Layout". (Screenshot 3)

5. Don't forget for backup your old template. (Screenshot 4)

6. Find and Upload the new Blogger template. (Screenshot 5)

6. If a warning: Your new template does not include the following widgets, click "KEEP WIDGETS". (Screenshot 6)

7. Finish, Enjoy your new blog design.

2:24 AM by Susanto · 0