Monday, January 14, 2013

Cute Menubar Tutorial

HELLO WORLD!

From my experience, it is VERY tough to create a proper menubar for your blog ( at least for me it is lol ). Therefore, as lame as I am, I feel like making a tutorial on creating a menubar for bloggers ( which is aimed for those who suck at HTML/CSS like me).

If you’re looking for a drop down menubar, stay a mile away from this post because I DO NOT offer a tutorial for that type of menubar since my KIND of menubar is SIMPLE.




Okay here we go:

Look, this is how the menubar looks like, right under the header. ( don’t worry, the color is optional so you can use your favorite color just edit the HTML code here and there and you're good; mine is PINK :D )

First step:

Log in to Blogger and go straight to Dashboard. Go to Design and then click Backup/Restore to save your current theme. This is important to keep your original setting just in case you messed with anything (I often forget to do so lol)

Second step:

Click Edit Template.

Third step:

Use ctrl+F to find ]]></b:skin>

Fourth step:

Copy the code below



/* menu bar */
#menubar{
margin: 0;
padding: 6;
float:center;
border:0px solid #ffffff;
width:90%;
background:#ffffff;
}
#menubar li{
margin-left: 0;
padding: 0;
list-style: none;
float: left;
font: bold 14px arial;
}
#menubar li a{
display: block;
margin: 0;
padding: 13px 10px;
background: #ffc4c5;
color: #fff;
text-align: center;
text-decoration: none;
border:2px solid #ffffff;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#menubar li a:hover{
background: #000000;-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
}
#menubar div{
position: absolute;
visibility: hidden;
}

Paste the code right above the ]]></b:skin>

(the theme is set as pink-ish. So just in case you hate pink, simply do a few things to the HTML code. Change #fff to whatever color you want as the color of the text.
P/s: for the color HTML code, click here.

Fifth step:

Use ctrl+F to find <div id=’content-wrapper’>


Sixth step:

Copy the code below:

<br/><ul id='menubar'><center>
<li><a href='URL'>TITLE</a></li>
<li><a href='URL'>TITLE</a></li>
<li><a href='URL'>TITLE</a></li>
<li><a href='URL'>TITLE</a></li>
<li><a href='URL'>TITLE</a></li>
<li><a href='URL'>TITLE</a></li>
<li><a href='URL'>TITLE</a></li>
</center></ul>


Paste the code right below <div id=’content-wrapper’>

Seventh step:


Replace all the URLs with the links for your blog entries and replace all the TITLEs with the titles.
If you wanna add another box, copy and paste <li><a href='URL'>TITLE</a></li> right above </center></ul> The same goes for deleting a box, just delete the extra <li><a href='URL'>TITLE</a></li> right above the </center></ul>

An example of the edited code should be like this:


<br/><ul id='menubar'><center>
<li><a href='http://sweetmissfifi.blogspot.com/'>Home</a></li>
<li><a href='http://sweetmissfifi.blogspot.com/2013/01/knowing-me_3.html'>Me</a></li>
<li><a href='http://www.facebook.com/ellezze'>Facebook</a></li>
<li><a href='http://sweetmissfifi.blogspot.com/search/label/kdrama'>Kdrama Obsession</a></li>
<li><a href='http://sweetmissfifi.blogspot.com/2013/01/my-simple-book-reviews.html'>Books</a></li>
<li><a href='http://sweetmissfifi.blogspot.com/2013/01/150-reading-challenge-for-2013.html'>Reading Challenge</a></li>
<li><a href='http://sweetmissfifi.blogspot.com/2013/01/free-headers-banners.html'>Freebies</a></li>
</center></ul>


Eighth step:

Now, click Preview. And see whether the magic works lol Just in case it didn't, just go back and re-edit the edited html. If it went as you wish, simply click Save Template.

Okay, the tutorial ends here. See you soon. :)

(feel free to ask anything that you don't get below :))

4 comments: