Navigation Bar
Let's Do a Demo Here...!
Steps to Add the Code to Blogger:
Go to Blogger Dashboard:
- Log in to your Blogger Dashboard account and open the dashboard for the blog where you want to add this code.
Navigate to Theme:
- From the left sidebar, click on "Theme".
Edit HTML:
- In the Theme section, click the drop-down arrow under the "Customize" button and select "Edit HTML".
Locate the
</body>Tag:- Scroll down in the HTML editor and locate the
</body>tag. This is typically near the end of the code.
- Scroll down in the HTML editor and locate the
Add the Code Before
</body>:- Insert the following code just before the
</body>tag:
<nav class='mobile' id='ATnav'><ul><li> <a href='https://abdullahcoded.blogspot.com/2024/11/stylish-navigation-bar-in-blogger-site.html'><svg style="color: blue" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door-fill" viewbox="0 0 16 16"> <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z" fill="blue"></path> </svg> <span>Home</span></a></li>
<li><a href='https://abdullahcoded.blogspot.com/2024/11/stylish-navigation-bar-in-blogger-site.html'><svg style="color: red" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M219.9,140a92,92,0,0,1-184,0c0-23.1,9.9-49.7,29.4-79.1a8,8,0,0,1,5-3.4,8.2,8.2,0,0,1,6.1,1.2l32.2,21.5,30.9-64.8a7.9,7.9,0,0,1,5.8-4.4,8.1,8.1,0,0,1,7.1,2.2c14.7,14.7,31.5,32.6,44.6,53.4C212.4,91.1,219.9,115.1,219.9,140Z" fill="red"></path></svg><span>Trending</span></a> </li>
<li><a href='https://abdullahcoded.blogspot.com/2024/11/stylish-navigation-bar-in-blogger-site.html'><svg style="color: red" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewbox="0 0 16 16"> <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" fill="red"></path> </svg> <span>YouTube</span></a></li>
<li><a href='https://abdullahcoded.blogspot.com/2024/11/stylish-navigation-bar-in-blogger-site.htmll'><svg style="color: blue" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram" viewbox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z" fill="blue"></path> </svg>
<span>Group</span></a></li>
<li><a href='#'><svg style="color: red" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewbox="0 0 16 16"> <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z" fill="red"></path> </svg><span>Go to Top</span></a></li>
</ul>
</nav><style>
a {
text-decoration: none;
transition: box-shadow 0.3s ease; /* Smooth transition for the glow effect */
}
nav.mobile {
display: flex;
position: fixed;
right: 20px;
bottom: 20px;
width: 90%;
padding-right: 0;
padding-left: 0;
background: linear-gradient(to right, #8000ff, #16e0dd); /* Black background */
border: 4px solid #0c594b; /* White border */
z-index: 9999;
margin: 0;
font-weight: bold;
border-radius: 40px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.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: 7px 0;
}
nav.mobile ul li a {
color: #fff; /* White text color */
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;
}
/* Glowing effect on click */
nav.mobile ul li a:active {
box-shadow: 0 0 10px #f5426f; /* Glowing effect with color #f5426f */}
</style><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>Now Click on Save Button
Conclusion
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
Copyright ©
.png)