Recently, Blogger added a Pages widget to their template designer. FINALLY! I love blogger, but they are way behind the times when it comes to what us bloggers can and can't do easily to make our blogs "cute." I feel like after all the customizations I've had to research and learn, I should have a PhD in blog design!
Blogger pages is great because it allows us to create a menu of static links on our main blog page. What do I mean by static? A static post is basically a single post that, when it is published, goes directly to a menu item rather than to our normal archived posts. While this is a really fun widget, it still leaves something to be desired as far as customizations, including a mix of static and non-static links. A non-static link is a link that doesn't necessarily take you to one post it can take you to another website, or where ever else you want. Non-static links are still relatively easy to create simply add an "HTML/JavaScript" widget to your page, and enter the following code:
While that is all fun and dandy, that isn't the point of this post. I'm going to teach you how to create a drop down menu in your blogger header, just like the one I made yesterday for this blog, and for my garden blog!
***
Step 1 Adding the CSS Code to your blog's HTML.
First, you want to add the CSS code to your Blogger HTML. To do this, go to your Blogger Dashboard and click the "Design" tab. Click “Edit HTML” and then click “Expand Widget Templates.”
Push “Ctrl F” and in the search bar type:
Directly above that, enter the following code:
1. The Main Menu: This is what you will see on your page, a row of options.
2. The Drop Down Menu: There is a separate drop down menu for each main menu item.
3. Elements of the drop down menu: These are the individual pages you are linking to in your drop down menus.
In the CSS code you will notice there are things like: “font color of main menu,” “font size of main menu,” “background color of main menu,” and “background hover color of main menu.” You can change any of these options to customize the look of your main menu.
Next, you’ll want to customize the options for the “menu elements.” Customize these as you did for the main menu.
I’m no computer expert, but originally the menu I made was very small. I fiddled a lot with the “margin” sizes and “padding” sizes and that seemed to make it larger and the menu then spread across my whole header.
When you’re finished click “Save Template.”
Step 2 Add the Menu to Your Blog
Go to the “Page Elements “ area of the Design Tab. In the Header section click “Add Widget” and choose to add the “HTML/Java Script” widget.
You can leave the Title area blank, but then enter the following code:
I tried to make this code as easy to use as possible. This is a code to create your “Home” button, which will allow visitors to return to your main blog page, and has for 7 drop down menus. To customize it, replace the words “Page 1,” “Page 2,” etc ., with the names for you Main Menu items.
Next, replace the words “Page 1-1,” “Page 1-2,” etc., with the titles you are creating under each main menu tab. Before each of these replacement words there is a # sign in quotations. DO NOT DELETE the quotations, but simply replace the # with the URL of the pages you are linking to.
<d iv id="m2" onmouseover="mcancelclosetime ()" onmouseout="mclosetime ()">
< a href=" www.shirts.com">SHIRTS</a>
< a href=" www.pants.com">PANTS</a>
< a href=" www.dresses.com">DRESSES</a> < /div> < /li>
< /ul>
< div style="clear:both">< /div>
The blue text will be what appears in the Main Menu, and the green text is what will appear below the blue text in the dropdown menu.
If you want to add a link to your main menu that doesn’t have a drop down menu, it’s just a link, like a “Contact Me” page for example. For these links, just use the code for the non-static link I talked about earlier, just be sure you place the link codes before the highlighted part of the widget code.
Click Save and there you have it, your very own drop down menu!
Hope you found this helpful. If you have questions, I will try to answer them, but like I said, I'm no expert and I was literally trying to figure this out for about 9 hours!
Very helpful! Could you do one on how you make your pictures look like a collage and write on them?
ReplyDelete@Lizett
ReplyDeleteHi Lizette! When I make my collages, I use a program called Photoshop. It's tough to learn and really expensive, but it's the best investment I ever made. I've got a few "Photoshop tips" comeing up on the blog this year, so I'll remember to do a little collage tutorial in the next few months.