यदि आप भी अपने blogger वेबसाइट मे Responsive Navigation Menu Icon Button लगाना चाहते है तो आप सही आर्टिकल मे पहुँच चुके है आज मे आपको बताऊंगा की आप Responsive Button Icon Navigation Menu on Blogger मे कैसे लगा पाएंगे। 
Responsive Navigation Menu Icon Button लगाना बहुत ही सरल है इसमें आपको Copy & Paste करना है जो codes मैंने नीचे दिये है उन codes को सही स्थान पर पेस्ट करना है।
How to Generate a Responsive Button Icon Navigation Menu on Blogger?
Step 1 - सबसे Blogger Dashboard मे जाए और Login कर ले। अब आप Theme Section पर क्लिक करे। अब आप अपनी पहली Theme का Backup ले ले।
Step2- अब आप Edit HTML पर क्लिक करे।
Step 3- अब आप नीचे दिया कोड को </body> टैग के ऊपर पेस्ट कर दे।
<!-- HTML Code -->
<nav class='mobile' id='ATnav'>
<ul>
<li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
<path d='M15 13L11 9V12H2V14H11V17M22 12H20V21H4V16H6V19H18V11L12 5L7 10H4L12 2L22 12Z' fill='currentColor'/>
</svg><span>Home</span></a></li>
<li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
<path d='M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z' fill='currentColor'/>
</svg><span>Trending</span></a> </li>
<li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
<path d='M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z' fill='currentColor'/>
</svg> <span>About</span></a></li>
<li><a href='#'><svg viewBox='0 0 24 24'>
<path d='M17.5,7A5.5,5.5 0 0,1 23,12.5A5.5,5.5 0 0,1 17.5,18C15.79,18 14.27,17.22 13.26,16H10.74C9.73,17.22 8.21,18 6.5,18A5.5,5.5 0 0,1 1,12.5A5.5,5.5 0 0,1 6.5,7H17.5M6.5,9A3.5,3.5 0 0,0 3,12.5A3.5,3.5 0 0,0 6.5,16C7.9,16 9.1,15.18 9.66,14H14.34C14.9,15.18 16.1,16 17.5,16A3.5,3.5 0 0,0 21,12.5A3.5,3.5 0 0,0 17.5,9H6.5M5.75,10.25H7.25V11.75H8.75V13.25H7.25V14.75H5.75V13.25H4.25V11.75H5.75V10.25M16.75,12.5A1,1 0 0,1 17.75,13.5A1,1 0 0,1 16.75,14.5A1,1 0 0,1 15.75,13.5A1,1 0 0,1 16.75,12.5M18.75,10.5A1,1 0 0,1 19.75,11.5A1,1 0 0,1 18.75,12.5A1,1 0 0,1 17.75,11.5A1,1 0 0,1 18.75,10.5Z' fill='currentColor'/>
</svg><span>Games</span></a></li>
<li><a href='#'><svg viewBox='0 0 24 24'>
<path d='M14,20H10V11L6.5,14.5L4.08,12.08L12,4.16L19.92,12.08L17.5,14.5L14,11V20Z' fill='currentColor'/>
</svg><span>Back-to-Top</span></a></li>
</ul>
</nav>
<!-- JavaScript Code -->
<script>
//<![CDATA[
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("ATnav").style.bottom = "0";
} else {
document.getElementById("ATnav").style.bottom = "-80px";
}
prevScrollpos = currentScrollPos;
}
//]]>
</script>
Step 4 - अब आप दूसरे Code को </head> के ऊपर पेस्ट कर दे।
<style>
nav.mobile { display: flex; position: fixed; bottom: 0; width: 100%; padding: 0.8rem 0; background: #fefefe; border-top: 1px solid #ccc; z-index: 9999; margin: 0 auto; } .mobile { transition: 0.5s ease!important; } nav.mobile ul { list-style: none; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; justify-self: center; vertical-align: middle; } nav.mobile ul li { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; flex-grow: 1; margin: 0; } nav.mobile ul li a { color: #222; font-size: inherit; display: var(--prP3M8); flex-direction: var(--mZSq9k); }nav.mobile ul li a svg{width: 24px; height: 24px; display: block;margin: 0 auto; }
</style>
और Save बटन पर क्लिक करे। Theme Save कर ले।
Implementing a responsive navigation menu icon button in the footer of a Blogger website offers several benefits:
1. Accessibility: Placing the navigation menu icon button in the footer ensures that it remains accessible from any page on the website, allowing visitors to easily navigate to different sections without having to scroll back to the top.
2. Consistent User Experience: By including the navigation menu icon button in the footer, you provide a consistent user experience across all pages of your website, regardless of where visitors are navigating from.
3. Space Optimization: Placing the icon button in the footer helps optimize space in the header area, allowing you to focus on important content or branding elements without cluttering the top of the page.
4. Mobile-Friendly Design: A responsive navigation menu icon button in the footer ensures that visitors using mobile devices have easy access to navigation options without taking up too much screen space or interfering with other content.
5. Enhanced Navigation: With the navigation menu readily available in the footer, visitors can quickly find and access important sections of your website, improving overall navigation and user satisfaction.
Conclusion:
I hope you understood how to easily create and add a responsive bottom icon navigation menu to your Blogger website using HTML, CSS, and JavaScript in just a few minutes.
