How to Create Sub-Menu Items and
Put Them in a Box in Blogger?
Hi, Radiant Guys! How are you all? In the last post, we learned how to create a page and add a menu to the header bar using the page.
Today, I will introduce how to use the "Pages" in the dashboard to create sub-menus for specific categories. First, I will make a page titled “Google Blogger.” Next, I'll organize a list of posts related to the title "Google Blogger" within the text of the page. Namely, the list of posts acts as a submenu.
Today's Contents:
• Make a Menu
• Set the Sub-Menu Items' Title
• Link the Sub-Menu Item to the Post URL
• Put the List of Sub-Menu Items in a Box
• Make the Page that acts as a Menu & a Sub-Menu Visible to My Blogger
• Check the Sub-Menu Items in a Box in Blogger
| Make a Menu
First, use the page function to create a menu for the header bar. For further details, please refer to the previously introduced “10. How Do I Add a Menu in Blogger?”. Below, I will briefly explain it without attaching reference images.
• Select the “New Page” from the left menu of the Blogger dashboard.
• In the title field, write the official name of the menu that will be placed in the header bar.
• In the body of the page, write the same title as the name written in the title field, or write another title that goes well with it. Here, I will arbitrarily title the page "Google Blogger"(see the image below).
| Set the Sub-Menu Items' Title
Organize a list of posts related to the category menu. Please, refer to the title of the original post. At this time, I prefer to paste from the title of the original post 100% to avoid confusion. If you have a large number of posts, sorting the list by number can help with visibility.
| Link Each Sub-menu to the Post URL
Let's link each sub-menu item to the URL of the corresponding post.
• Set the range from somewhere you want to the desired part on the title of the post using the Shift+arrow keys on the keyboard.
• Click the "insert or edit link" icon (⸦–⸧) In the top menu bar.
• Paste the URL from the original post into the field for the "Paste". Each post has its own permalink, so you can use that permalink after copying.
• Then, checkmark the "Open this link in a new window".
• Click the "APPLY" at the bottom.
| Put the List of Sub-Menu Items in a Box
To make the list of sub-menu items look well organized, I will place all the sub-menu items in a box. So, I need to manipulate the CSS code.
• Click the "pencil-shaped" icon in the top menu bar, and switch the compose view to the HTML view.
First, I need to find the right location in the HTML view to enter the new CSS Code. I'm going to put the list of sub-menu items in a box in the main body of the page. Therefore, I need to look for the opening tag <div> located right before the first sub-menu item starts.
Of course, you can find the location of the desired tag by directly looking at the HTML view, but I will use shortcut keys to protect my precious vision. To open the "search", place the cursor anywhere in the HTML view and enter the shortcut key "Ctrl+F" on the keyboard. In reality, double quotation marks are not entered.
🎯 TIP
Above, When pressing a shortcut key, do not press the double quotation marks or +; press only the control key and the F key on the keyboard.
• When the "search" opens, type “div” in the search field and press "Enter" on the keyboard.
All parts with the tag "div" are highlighted in yellow.
Can you see the opening tag <div> located right before the first sub-menu item's title? At this time, if necessary, it is helpful to enlarge the entire screen For those who have difficulty reading small print.
• Create a text box with the desired shape by inserting the CSS code source below within the opening tag <div>.
<div style="text-align: left; border: thick double khaki; border-radius: 20px; padding: 20px; margin: 20px 5px;">
At this time, the closing tag </div> must be moved to the back of the last sub-menu item's title to be included in the box instead of its original location. See the images below.
To help you understand, let's briefly examine the characteristics of some HTML tags that I used in this post.
⎖ <div>
The <div> tag comes from an abbreviated form of division and is used as a container for HTML elements. It is often used when creating website layouts. Any kind of content can be put within a <div> tag.
⎖ <text-align>
The <text-align> property is used to determine the horizontal alignment of a text. The text can be left-aligned with the "left;", right-aligned with the "right;" centered with the "center;", or justified with the "justify;" indicating both alignments on both sides in HTML view.
⎖ <border>
The <border> property sets the border of an element and includes the following subproperties: "border-width", "border-style", and "border-color". One to three subproperties can be specified, and the order does not matter.
The subproperty "border-width" sets the width of the border on all four sides of the element. The default value is a "medium", and other values include a "thin", and a "thick".
The subproperty "border-style" sets the border style. The default value is a "none", so the border is not visible unless you determine the value at the start. The values include a "none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", and "outset".
⎖ <border-radius>
The <border-radius> property sets the vertices of the element border to be rounded. Enter always unit after value.
⎖ <padding>
The <padding> property sets the space, excluding the border and outer margin around the current element. Namely, it is the space between the content and the border of an element. A Padding and margin are divided by border. Enter unit after value. Refer to the image below.
⎖ <margin>
The <margin> property sets the outermost margin around the current element. The value is followed by the unit.
• Select the "Preview Page" to preview or "Update" to apply to Blogger.
🎯 TIP
Currently, I have already set up the page to be visible in Blogger, so options like this appear. If you haven't yet set the page to be visible in Blogger, only two options will be displayed: "Preview" and "Save."
| Make the Page Visible to My Blogger
Now, I will show you how to make the page named “Google Blogger” actually visible to my Blogger. In the previous post, since I added a page gadget, I will show you how to use the “edit” in the page gadget. If you want to see the entire process of adding page gadgets and configuring the page list, please refer to the following post. 10. How Do I Add a Menu in Blogger?
🎯 TIP
If, like me, you have already set up your page to be visible to bloggers, please skip this step.
• Select the “Layout” on the blogger dashboard and click “Edit” on the page gadget in the gadgets window on the right.
• Select the "Add A NEW ITEM".
• Click the empty field for the Page name.
• Select the “Google Blogger” from the drop-down menu.
• Paste the URL of the page.
• Click the "SAVE".
🎯 TIP
In the image above, you can use the arrows to change the position of the page (or you can understand it as a menu or category) displayed in the header bar, edit it with the pencil icon, and delete it with the trash can icon.
• Click the "Fluppy disc-shaped" icon to apply to Blogger.
| Check the Sub-Menu Items in a box in Blogger
Congratulations! As shown in the image below, a page menu named “Google Blogger” has been created in the header bar, and sub-menu items have been designed well inside the page.
Above all, the sub-menu items are nicely placed in the box, making it pretty. However, I think it would look neater if the box color was a bit darker.
With this post, I was really excited about being able to customize my blogger. I'm curious how you guys spent your time with this post.
In the next post, I will create a menu in the header bar that moves to an external site. I hope this post was helpful to you. See you soon, Radiant Guys!
Posted by Ayul
