 |
| How to add bottom navigation menue in blogger |
Hi everyone today we are going to learn how can we add bottom navigation icons menue in blogger if you have choosen a theme and want to add quick links in bottom to engage visitors than your on right page here you learn the complete method of adding bottom navigation icons menue in blogger.
What Is a Bottom Navigation Menu?
A bottom navigation menu is a type of navigation menu that is typically placed at the bottom of a mobile app or website screen. This type of menu is often used in conjunction with a top navigation menu or a tab bar.
Bottom navigation menus provide quick access to the most frequently used actions in an app or website. They are especially useful on mobile devices, where screen real estate is limited.
Why You Should Add One to Your Blogger Site?
Bottom nav menus are a great way to keep your blog organized and easy to navigate. By adding a bottom nav menu to your blog, you can make it easier for your readers to find the content they're looking for. Plus, bottom nav menus can help to optimize your blog for search engines, making it easier for people to find your site when they're searching for keywords related to your content.
Benifits
There are several benefits of using a bottom navigation menu, including:
1. Increased usability: Bottom navigation menus are easy to use and understand, which makes them ideal for mobile users.
2. Improved user experience: Bottom navigation menus provide a better user experience than other types of navigation menus (such as hamburger menus).
3. Increased engagement: Bottom navigation menus can help increase engagement by making it easy for users to access the most important features of your app.
4. Reduced development time: Bottom navigation menus are relatively easy to implement, which can save you time and money during development.
How to add bottom navigation icons menue in blogger?
Follow these steps to add bottom navigation icons menue in blogger:
Step#1
Copy the code that is given below and add it just below the <head> tag in your theme html coding.
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js' type='module'/>
Step#2
Than copy below code and add it below <b:template-skin> in your theme edit html coding
body#layout .mobile-bottom {background-color: #00cc00;}body#layout #bottom-nav2 {background-color: aqua;border-top: 1px;}body#layout #bottom-nav2:before {content:"Navbar Color";border: 1px solid black;border-radius: 20px;padding: 3px;}body#layout #bottom-nav3 {background-color: aqua;border-top: 1px;}body#layout #bottom-nav3:before {content:"Links and Texts";border: 1px solid black;border-radius: 20px;padding: 3px;}body#layout #bottom-nav4 {background-color: aqua;border-top: 1px;}body#layout #bottom-nav4:before {content:"Icons";border: 1px solid black;border-radius: 20px;padding: 3px;}body#layout #bottom-nav8 {background-color: aqua;border-top: 1px;}body#layout #bottom-nav8:before {content:"Icons Color";border: 1px solid black;border-radius: 20px;padding: 3px;}body#layout #bottom-navbar {background-color: aqua;border-top: 1px;}body#layout #bottom-navbar:before {content:"Icons Background Color";border: 1px solid black;border-radius: 20px;padding: 3px;}
Step#3
Last step you have to do download below code and paste it above </body> tag.
You have all done now you can see changes view your blog and you will see a very awesome bottom navigation icons menue in bottom of your screen.
Also read
How to monetize your blog and start earning income?
How to change font style in blogger theme?
How to get indexed blog posts fast by google?
How to customize bottom navigation menue?
After pasting all codes exactly in same tags you will see a option of edit navigation menue in Layout widgets section just like that👇
 |
| Bottom navigation in blogger |
- In first option you can choose the color of nav bar write the name of color in small letters that you want to set.
- In 2nd option you can add name and link of menue options.
- In 3rd you can change icons of nav bar.
- In 4th option you can select the color of nav bar.
- Andin 5th you can choose background color of icons.
Changing the icons is quite simple if you have few knowledge of codings and how to set icons we have pasted the script code in head section is the link of https://ionic.io website from where the all icons are taken just go to their website and select the icon and copy the code and paste it in layout icons option.
How to select and apply icons from other websites?
If you want to set icons from some other websites than you have to paste the script code of their websites in <head> tag.
After submitting script tag of your desired website select the code of icons from that website and paste it in layout section
Conclution
We learned about how to add bottom navigation icons menue in blogger just we have to do is copy the codes and paste it in exact tags that we have mentioned above and for customization in layout section a option of bottom nav editing appears as you done all steps and you can easily add custom icons, colors, links to it.
Enjoy your new look of blog and learn more here in blogging section.
0 Comments