Hello, I’m SSR. Welcome to SSR-TECH, your go-to resource for Blogger SEO solutions. Let's enhance your blog's performance together!
Steps to Add the Code to Blogger:
Go to Blogger Dashboard:
- Log in to your Blogger 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://ssr-tech-blog.blogspot.com/2024/09/steps-to-add-code-to-blogger-go-to.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://ssr-tech-blog.blogspot.com/2024/09/steps-to-add-code-to-blogger-go-to.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://ssr-tech-blog.blogspot.com/2024/09/steps-to-add-code-to-blogger-go-to.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://ssr-tech-blog.blogspot.com/2024/09/steps-to-add-code-to-blogger-go-to.html'><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>- Insert the following code just before the
SSR
This navigation bar is only for demo in this post