Add an animated and cool and stylish navbar in your blogger website. How to Add Bottom Navigation in Blogger Website, Blogger Website New Setting.
How to add bottom navigation in blogger website free
In the fast-evolving world of web development, staying ahead is crucial for a captivating and user-friendly website. In this comprehensive guide, we'll first unravel crucial new settings to boost your Blogger website's overall performance. Following that, we'll guide you through seamlessly integrating a stylish bottom navigation bar.
Feature of Navigation bar in Blogger
- Optimizing Loading Speed: Dive into Blogger settings to utilize innate tools for optimizing image sizes and turbocharging page loading speed.
- Customizing Mobile Responsiveness: Navigate to the settings panel to ensure your website radiates professionalism on diverse devices by tailor-fitting the mobile responsiveness settings.
- SEO Configuration for Enhanced Visibility: Elevate your website's visibility by fine-tuning SEO settings. Tweak meta tags, descriptions, and keywords to scale up in search engine rankings.
- Fortifying Security Measures: Bolster your website's security by activating HTTPS. Beyond instilling user confidence, this positively influences search engine rankings.
How to install Bottom Navigation in blogger
Step 1:
- Go to your theme section and backup your theme.
- Step 2:
Click Edit Html and search for <head> and paste the code below under <head>.
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js' type='module'/>- Step 3:
Again search for <b:template-skin> and paste the codes below under this.
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 4:
Now this the final part. This is quite a large code so i have put it into telegram instead of here. Join this telegram and write "BottomNav" and you will get the code. Copy all of these codes and paste it above </body>.
And you are done. This is how you can add an animated and cool and stylish navbar in your blogger website. Now you can easily customise like changing icons and other things from your blogger layout section.
By first uncovering vital settings and then integrating a stylish bottom navigation bar, you not only amplify overall performance but also provide a contemporary and intuitive navigation experience. Stay tuned for more web development insights as you continue evolving your website in the ever-changing digital landscape. So this is how to add bottom navigation in blogger website html.
.jpeg)
)_20231108_210816_0000.webp)
