ஐLonger Vogue: blogspot

Monday

How to create a drop down menu on blogger 2015

In different version of blogger, the method may be dramatically different. If you found some tutorial doesn't work, it may not be the updated version. After browsing other people's tutorial, I'd like to introduce the simplest way of adding a drop down menu. This tutorial is created on May 3rd, 2015.

Before

After

Drop down menu can be created in different themes and format. It includes 2 parts, structure (html) and style (css).

Layout -> Add a new HTML/Javascript and paste the following code (suppose you add on top menu)

<div id="navigationbar">
<ul id='cssnav'>
<li class="active"><a href=''>Home</a></li>
<li class="sub"><a href='http://longervogue.com'>Product Show Room</a>
<ul>
<li><a href='link'>sub-tab A</a></li>
<li><a href='link'>sub-tab B</a></li>
</ul>
</li>
<li class="sub"><a href='http://longervogue.wordpress.com'>Vogue Design</a>
<ul>
<li><a href='link'>sub-tab C</a></li>
<li><a href='link'>sub-tab D</a></li>
</ul>
</li>

<li class="last"><a href='link'>Contact</a></li>
</ul>
</div>

By adding </ul> and </li> you may add more tab and sub-tab.

After save this html, you will see the structure of drop down menu in your blogger. Now we need some css to make it look normal.

In other tutorials, you maybe asked to look for this ]]>) comment in customized html to add some coding before it. While in current version of blogger, you just need to add some customized css without touching any source code.

Template -> Customize -> Advanced -> Add CSS and paste the code below

/* ----- dropdown CSS ----- */
#cssnav {
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: none;
display: inline-block;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color); /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/* ----- end ----- */

You may play with these font style, color, height, and width to customized your own drop down menu now.

Saturday

How to create category and subcategory in blogspot

Way 1 - label (auto)

Unfortunately, blogspot doesn't have such function called category. Yet it has some similar function such as label.

Go to layout - add gadget - label

Hence, in each blog post you need to specify label then the blog will appear in the corresponding label. Our normal perception is like wordpress, define category first and then write article and list it in the category, so does web design. However, blogspot use the other way round.

So the disadvantage is that there is no "subcategory" function in blogspot.

Way 2 - link list (semi-auto)

Beside label, users can also use link list as semi self defined category.

Go to layout - add gadget - link list

Create a title and add article name and link manually. Click "add link" and "save". Then you can define your own category. The advantage of this function is you can create as many as possible to cater different purposes.

Way 3 - customized HTML (manual)

Go to layout - add gadget - HTML or text

In this way, you may write whatever format or coding you like without limitation. Then subcategory may also be achieved in this method. The disadvantage is all must be done manually...

The disadvantage of first 2 methods is you cannot control it to pop up in new window or tab.
The disadvantage of link list is you cannot make changes to existing content any time. Site title and url must be re-created.

In this blog, I use the first two ways to display category.

Wednesday

How to hide/remove blogspot navigation bar

The navigation bar is the one appear on top of the blog which users could use it to browse blog by blog. Before 2010, users must use certain coding to hide it, but now it's pretty easier than ever by just click an option.

Go to dash board -> layout -> Navbar (edit)

Click "off" and "save", and then go to view your blog now...

ஐLonger Vogue