Monday, January 14, 2013

Cute Menubar Tutorial


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 */
margin: 0;
padding: 6;
border:0px solid #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>

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=''>Home</a></li>
<li><a href=''>Me</a></li>
<li><a href=''>Facebook</a></li>
<li><a href=''>Kdrama Obsession</a></li>
<li><a href=''>Books</a></li>
<li><a href=''>Reading Challenge</a></li>
<li><a href=''>Freebies</a></li>

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 :))