Welcome to the third part of the Blogger and WordPress series . In the last two parts, we learned about choosing a website platform and setting up a basic account on Blogger. Just as removing walls from an empty room doesn't make it habitable, just opening a blog doesn't make it look professional. Just as a room needs to be decorated with colors and furniture, a website needs to be decorated with Layout and Menu Bar .
In today's mega guide, we will learn how to turn a simple blogger site into a professional magazine or news portal.
Website Development (Part 3): Blogger Layout Customization and Advanced Menu Bar Settings
Written by : Team Daily Tech News
Website: Tech News 24
The soul of a website is its User Experience (UX) . If your visitor cannot easily find the information he needs when he comes to your site, he will not come to your site a second time. The Layout and Navigation Menu do the work of organizing this information . Let's start today's masterclass.
Chapter 16: What is Layout and its Importance
 |
| Blogger's layout is the design framework of your website. |
Just like we design in Illustrator or Photoshop, Blogger's layout is the design framework of your website. From the layout panel, you control where your logo will be placed, where advertisements will appear, and what will be in the sidebar.
Why is it important to fix the layout?
1. Loading speed: Removing unnecessary gadgets makes the site load faster.
2. AdSense Placement: The right place for advertising can be determined.
3. Professional look: The site doesn't look messy.
Chapter 17: Menu Bar (Main Menu) Customization Step-by-Step Guide
The menu bar is the map of your website. Usually, when you install a theme, there are some demo menus (e.g. Home, Features, Mega Menu). You need to change these and add your own categories.
How to edit the menu:
1. Go to Blogger's Layout option.
2. Find the gadget called Main Menu or Link List and click on the pencil icon.
3. Delete the old demo names here.
4. Click Add a New Item .
5. Site Name: Enter your category name here (e.g. 'Technology' or 'Mobile Reviews').
6. Site URL: This is the most important. Here you need to provide the label link for that category.
Tips : If you want to create a dropdown menu, add an underscore (e.g. _Android) before the name. This will create a sub-menu below the main menu.
Chapter 18: Label linking is the biggest mistake everyone makes
Many people type the name in the menu bar but make a mistake in the link. As a result, when they click on the menu, it shows "Page Not Found".
- The correct rule: If you want to create a menu called 'Tech', you must first have a post with the 'Tech' label.
- The link that you get by adding /search/label/Tech after your blog's URL should be used in the menu bar.
Chapter 19: Logo and Favicon Setup
A brand's identity is in its logo.
- Header Logo: Go to Layout and click on the 'Header' gadget. Upload your created logo (preferably made in Photoshop). Select the 'Instead of title and description' option.
- Favicon : The small icon that appears next to your site name in the browser tab is called a favicon. It can be uploaded by going to Settings > Favicon . (It must be square in size).
Chapter 20: Sidebar Customization
Additional stuff in the sidebar annoys visitors. On professional sites, sidebars usually include the following items:
- Popular Posts: To show the best posts on your site.
- Social Plugin: Link to your Facebook page or YouTube channel.
- Categories (Label): Visitors can see all categories with one click.
Chapter 21: Footer Customization
The footer is the bottom part of the website. It contains the copyright text and links to necessary pages.
- Copyright : You need to change the footer credit from your theme's editor. However, changing it in many free themes will redirect the site. In that case, it is better to use the 'Premium Version'.
Chapter 22: Using Advanced Gadgets (Featured Post)
If you want to highlight a particular post on your site's homepage, use the Featured Post gadget. This will draw visitors to your most important articles.
Chapter 23: Checking Mobile Responsiveness
By 2026, nearly 80% of visitors will view your site from mobile. After customizing the layout, be sure to check it on your own mobile:
1. Is the menu bar opening properly on mobile?
2. Are the images going off the screen?
3. Whether the texts are suitable for reading or not.
Chapter 24: Theme Editing and Introduction to HTML
Sometimes we can't change everything from the layout. In that case we have to go to Theme > Edit HTML . This is a bit risky.
- Warning : Before editing the HTML code, make sure to take a backup . If you make a mistake in coding, press Ctrl + Z to go back.
A beautiful layout makes your website look 10 times more professional. In today's guide, we have dissected each part of the Blogger layout. Now your job is to beautifully design your blog's menu and sidebar.
In the next episode, we will learn "Blogger SEO and Google Search Console Setup" to get your website on the first page of Google. This is going to be the most important episode of this series.
Thank you ,
Team Daily Tech News
URL: Daily Tech News
URL: Tech News 24
© 2026 - Your Online Teacher
Post a Comment