Bottom Navigation in Blogger
Steps to Add Bottom Navigation in Blogger
Step-1 : First of all copy the below code and paste it below the <head> tag of your Blogger theme.
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js' type='module'/>
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 : Now download the below code and paste it above the </body> tag.
<div class="bottom-navbar-nav" id="btmnav">
<ul>
<li class="bottom-navbar-list">
<a class="hrr" href="#" /> <span class="bottom-navbar-icon" id="mydiv1" />
<span class="bottom-navbar-text" />
<div class="bottom-navbar-indicator" />
</li>
<li class="bottom-navbar-list">
<a class="hrr" href="#" /> <span class="bottom-navbar-icon" id="mydiv3" />
<span class="bottom-navbar-text" />
<div class="bottom-navbar-indicator" />
</li>
<li class="bottom-navbar-list">
<a class="hrr" href="#" /> <span class="bottom-navbar-icon" id="mydiv5" />
<span class="bottom-navbar-text" />
<div class="bottom-navbar-indicator" />
</li>
<li class="bottom-navbar-list">
<a class="hrr" href="#" /> <span class="bottom-navbar-icon" id="mydiv7" />
<span class="bottom-navbar-text" />
<div class="bottom-navbar-indicator" />
</li>
<li class="bottom-navbar-list">
<a class="hrr" href="#" /> <span class="bottom-navbar-icon" id="mydiv9" />
<span class="bottom-navbar-text" />
<div class="bottom-navbar-indicator" />
</li>
</ul>
</div>
<div class="mobile-bottom">
<div class="mobilemenu">
<b:section class="bottom-navbar" id="bottom-nav2" showaddelement="no">
<b:widget
id="Text100"
locked="true"
title="Navbar Color (color name in small letter)"
type="Text"
version="2"
visible="true"
>
<b:widget-settings>
<b:widget-setting name="content">white</b:widget-setting>
</b:widget-settings>
<b:includable id="main">
<b:include name="widget-title" />
<div class="widget-content">
<div id="bottom-nav-color">"--dlr:<data:content />"</div>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class="bottom-navbar" id="bottom-nav3" showaddelement="no">
<b:widget
id="LinkList100"
locked="true"
title="Bottom Navbar"
type="LinkList"
version="2"
visible="true"
>
<b:widget-settings>
<b:widget-setting name="link-3">#</b:widget-setting>
<b:widget-setting name="sorting">NONE</b:widget-setting>
<b:widget-setting name="link-4">#</b:widget-setting>
<b:widget-setting name="text-1">Videos</b:widget-setting>
<b:widget-setting name="link-1">#</b:widget-setting>
<b:widget-setting name="text-0">News</b:widget-setting>
<b:widget-setting name="link-2">#</b:widget-setting>
<b:widget-setting name="text-3">Sitemap</b:widget-setting>
<b:widget-setting name="link-0">#</b:widget-setting>
<b:widget-setting name="text-2">Home</b:widget-setting>
<b:widget-setting name="text-4">Rss</b:widget-setting>
</b:widget-settings>
<b:includable id="main">
<b:include name="widget-title" /> <b:include name="content" />
</b:includable>
<b:includable id="content">
<div class="widget-content">
<div class="">
<ul>
<b:loop index="soc" values="data:links" var="link">
<b:if cond="data:soc == 0">
<li class="lst">
<p class="linkkk">"<data:link.target />"</p>
<p id="hlink-1"><data:link.target /></p>
<span class="icn" />
<p class="txt"><data:link.name /></p>
<div class="incator" />
</li>
</b:if>
<b:if cond="data:soc == 1">
<li class="lst">
<p id="hlink-2"><data:link.target /></p>
<p class="linkkk">"<data:link.target />"</p>
<span class="icn" />
<p class="txt"><data:link.name /></p>
<div class="incator" />
</li>
</b:if>
<b:if cond="data:soc == 2">
<li class="lst">
<p class="linkkk">"<data:link.target />"</p>
<p id="hlink-3"><data:link.target /></p>
<span class="icn" />
<p class="txt"><data:link.name /></p>
<div class="incator" />
</li>
</b:if>
<b:if cond="data:soc == 3">
<li class="lst">
<p class="linkkk">"<data:link.target />"</p>
<p id="hlink-4"><data:link.target /></p>
<span class="icn" />
<p class="txt"><data:link.name /></p>
<div class="incator" />
</li>
</b:if>
<b:if cond="data:soc == 4">
<li class="lst">
<p class="linkkk">"<data:link.target />"</p>
<p id="hlink-5"><data:link.target /></p>
<span class="icn" />
<p class="txt"><data:link.name /></p>
<div class="incator" />
</li>
</b:if>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class="bottom-navbar-navbar" id="bottom-nav4" showaddelement="no">
<b:widget
id="LinkList200"
locked="true"
title="Icons"
type="LinkList"
version="2"
visible="true"
>
<b:widget-settings>
<b:widget-setting name="link-3"
><![CDATA[<ion-icon
name="newspaper-outline"></ion-icon>]]></b:widget-setting
>
<b:widget-setting name="sorting">NONE</b:widget-setting>
<b:widget-setting name="link-4"
><![CDATA[<ion-icon
name="planet-outline"></ion-icon>]]></b:widget-setting
>
<b:widget-setting name="text-1"
>2nd icon (visit https://ionic.io/ionicons to change
icon)</b:widget-setting
>
<b:widget-setting name="link-1"
><![CDATA[<ion-icon
name="hammer-outline"></ion-icon>]]></b:widget-setting
>
<b:widget-setting name="text-0"
>1st icon ( visit https://ionic.io/ionicons to change
icon)</b:widget-setting
>
<b:widget-setting name="link-2"
><![CDATA[<ion-icon
name="home-outline"></ion-icon>]]></b:widget-setting
>
<b:widget-setting name="text-3"
>4th icon (visit https://ionic.io/ionicons to change
icon)</b:widget-setting
>
<b:widget-setting name="link-0"
><![CDATA[<ion-icon
name="grid-outline"></ion-icon>]]></b:widget-setting
>
<b:widget-setting name="text-2"
>3rd icon (visit https://ionic.io/ionicons to change
icon)</b:widget-setting
>
<b:widget-setting name="text-4"
>5th icon (visit https://ionic.io/ionicons to change
icon)</b:widget-setting
>
</b:widget-settings>
<b:includable id="main">
<b:include name="widget-title" /> <b:include name="content" />
</b:includable>
<b:includable id="content">
<div class="widget-content">
<ul>
<b:loop index="index" values="data:links" var="link">
<b:if cond="data:index == 0">
<li>
<div id="mydiv2"><data:link.target /></div>
</li>
</b:if>
<b:if cond="data:index == 1">
<li>
<div id="mydiv4"><data:link.target /></div>
</li>
</b:if>
<b:if cond="data:index == 2">
<li>
<div id="mydiv6"><data:link.target /></div>
</li>
</b:if>
<b:if cond="data:index == 3">
<li>
<div id="mydiv8"><data:link.target /></div>
</li>
</b:if>
<b:if cond="data:index == 4">
<li>
<div id="mydiv10"><data:link.target /></div>
</li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class="bottom-navbar" id="bottom-nav8" showaddelement="no">
<b:widget
id="Text200"
locked="true"
title="Icon color (Color name in small letter)"
type="Text"
version="2"
visible="true"
>
<b:widget-settings>
<b:widget-setting name="content">black</b:widget-setting>
</b:widget-settings>
<b:includable id="main">
<b:include name="widget-title" />
<div class="widget-content">
<p id="bottom-nav-icon-color">"--nlr:<data:content />"</p>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class="bottom-navbar" id="bottom-navbar" showaddelement="no">
<b:widget
id="LinkList300"
locked="true"
title="Icon Background Color"
type="LinkList"
version="2"
visible="true"
>
<b:widget-settings>
<b:widget-setting name="link-3">green</b:widget-setting>
<b:widget-setting name="sorting">NONE</b:widget-setting>
<b:widget-setting name="link-4">purple</b:widget-setting>
<b:widget-setting name="text-1"
>2nd icon (enter color name or code in small
letter)</b:widget-setting
>
<b:widget-setting name="link-1">orange</b:widget-setting>
<b:widget-setting name="text-0"
>1st icon (enter color name or code in small
letter)</b:widget-setting
>
<b:widget-setting name="link-2">blue</b:widget-setting>
<b:widget-setting name="text-3"
>4th icon (enter color name or code in small
letter)</b:widget-setting
>
<b:widget-setting name="link-0">red</b:widget-setting>
<b:widget-setting name="text-2"
>3rd icon (enter color name or code in small
letter)</b:widget-setting
>
<b:widget-setting name="text-4"
>5th icon (enter color name or code in small
letter)</b:widget-setting
>
</b:widget-settings>
<b:includable id="main">
<b:include name="widget-title" /> <b:include name="content" />
</b:includable>
<b:includable id="content">
<div class="widget-content">
<ul>
<b:loop index="colors" values="data:links" var="link">
<b:if cond="data:colors == 0">
<li>
<div class="bottomnavbgcolor">
"--clr:<data:link.target />"
</div>
</li>
</b:if>
<b:if cond="data:colors == 1">
<li>
<div class="bottomnavbgcolor">
"--clr:<data:link.target />"
</div>
</li>
</b:if>
<b:if cond="data:colors == 2">
<li>
<div class="bottomnavbgcolor">
"--clr:<data:link.target />"
</div>
</li>
</b:if>
<b:if cond="data:colors == 3">
<li>
<div class="bottomnavbgcolor">
"--clr:<data:link.target />"
</div>
</li>
</b:if>
<b:if cond="data:colors == 4">
<li>
<div class="bottomnavbgcolor">
"--clr:<data:link.target />"
</div>
</li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<style>
@media only screen and (max-width: 1600px) { .bottom-navbar-nav { width: 100%; height: 70px; background: var(--dlr); position: fixed; bottom: 0; display:flex; justify-content: center; align-items: center; z-index: 16000; box-shadow: 0px -5px 8px -5px black; } .bottom-navbar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .bottom-navbar-nav ul .bottom-navbar-list { margin: 5px auto; max-width: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .bottom-navbar-nav ul li a { position: absolute; width: 50px; height: 50px; display: block; justify-content: center; align-items: center; background: transparent; z-index: 1; } .bottom-navbar-nav ul li .bottom-navbar-text { font-size: 10px; position: absolute; opacity: 0; font-weight: bold; color: var(--nlr); } .bottom-navbar-nav ul .bottom-navbar-list .bottom-navbar-icon { position: relative; font-size: 1.4em; color: var(--nlr); justify-content: center; align-items: center; line-height: 75px; } .bottom-navbar-nav ul .active .bottom-navbar-icon { color: white; background-color: var(--clr); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; transform: translateY(-25px); transition: 0.5s; } .bottom-navbar-nav ul .active .bottom-navbar-text { opacity: 1; transform: translateY(10px); transition: 0.5s; } .bottom-navbar-nav ul .bottom-navbar-list.active .bottom-navbar-indicator{ background: var(--dlr); width: 70px; height: 70px; border-radius: 50%; position: absolute; transform: translateY(-25px); z-index: -1; transition: 0.5s; box-shadow: 0px -5px 8px -5px black; } .bottom-navbar-nav ul .bottom-navbar-list.active .bottom-navbar-indicator::before { content: ''; position: absolute; width: 15px; height: 15px; background: transparent; transform: translate(-11.1px,10px); border-radius:50%; box-shadow: 6px 10px var(--dlr); } .bottom-navbar-nav ul .bottom-navbar-list.active .bottom-navbar-indicator::after { content: ''; position: absolute; width: 15px; height: 15px; background: transparent; transform: translate(66.2px,10px); border-radius:50%; box-shadow: -6px 10px var(--dlr); } } @media only screen and (min-width: 1600px) { .bottom-navbar-nav { display: none; } }
.bottom-navbar {
display: none;
}
#bottom-nav1 {
display: none;
}
#bottom-nav2 {
display: none;
}
#bottom-nav3 {
display: none;
}
#bottom-nav4 {
display: none;
}
</style>
<script>
const lists = document.querySelectorAll('.bottom-navbar-list'); function activeLink(){ lists.forEach((item) => item.classList.remove('active')); this.classList.add('active') } lists.forEach((item) => item.addEventListener('click',activeLink))
</script>
<script>
let div2 = document.getElementById('mydiv2'); let div4 = document.getElementById('mydiv4'); let div6 = document.getElementById('mydiv6'); let div8 = document.getElementById('mydiv8'); let div10 = document.getElementById('mydiv10'); document.getElementById('mydiv1').innerHTML = div2.innerHTML; document.getElementById('mydiv3').innerHTML = div4.innerHTML; document.getElementById('mydiv5').innerHTML = div6.innerHTML; document.getElementById('mydiv7').innerHTML = div8.innerHTML; document.getElementById('mydiv9').innerHTML = div10.innerHTML;
</script>
<script>
let navtext = document.getElementById("bottom-nav-color").innerHTML; let txtcolor = document.getElementsByClassName("bottom-navbar-text"); let coloricontext = document.getElementById("bottom-nav-icon-color").innerHTML; txtcolor[0].style = eval(coloricontext); txtcolor[1].style = eval(coloricontext); txtcolor[2].style = eval(coloricontext); txtcolor[3].style = eval(coloricontext); txtcolor[4].style = eval(coloricontext); let indddd = document.getElementsByClassName("bottom-navbar-indicator"); let navcolor = document.getElementById('btmnav'); let indicatorcolor = document.getElementsByClassName("bottom-navbar-indicator"); let bottomnavspan = document.getElementsByClassName("bottom-navbar-list"); let bottomnavbg = document.getElementsByClassName("bottomnavbgcolor"); let bottomspan = document.getElementsByClassName("bottom-navbar-icon"); let firstbg = bottomnavbg[0].innerHTML; let secondbg = bottomnavbg[1].innerHTML; let thirdbg = bottomnavbg[2].innerHTML; let forthbg = bottomnavbg[3].innerHTML; let fifthbg = bottomnavbg[4].innerHTML; bottomspan[0].style = eval(firstbg); bottomspan[1].style = eval(secondbg); bottomspan[2].style = eval(thirdbg); bottomspan[3].style = eval(forthbg); bottomspan[4].style = eval(fifthbg); navcolor.style = eval(navtext); indicatorcolor[0].style.backgroundColor = eval(navtext); indicatorcolor[1].style.backgroundColor = eval(navtext); indicatorcolor[2].style.backgroundColor = eval(navtext); indicatorcolor[3].style.backgroundColor = eval(navtext); indicatorcolor[4].style.backgroundColor = eval(navtext); bottomnavspan[0].style = eval(coloricontext); bottomnavspan[1].style = eval(coloricontext); bottomnavspan[2].style = eval(coloricontext); bottomnavspan[3].style = eval(coloricontext); bottomnavspan[4].style = eval(coloricontext); indddd[0].style = eval(navtext); indddd[1].style = eval(navtext); indddd[2].style = eval(navtext); indddd[3].style = eval(navtext); indddd[4].style = eval(navtext);
</script>
<script>
let attru = document.getElementsByClassName("linkkk"); let hrt = document.getElementsByClassName("hrr"); hrt[0].href= eval(attru[0].innerHTML); hrt[1].href= eval(attru[1].innerHTML); hrt[2].href= eval(attru[2].innerHTML); hrt[3].href= eval(attru[3].innerHTML); hrt[4].href= eval(attru[4].innerHTML); let txtname = document.getElementsByClassName("txt"); let txtspan = document.getElementsByClassName("bottom-navbar-text"); txtspan[0].innerHTML = txtname[0].innerHTML; txtspan[1].innerHTML = txtname[1].innerHTML; txtspan[2].innerHTML = txtname[2].innerHTML; txtspan[3].innerHTML = txtname[3].innerHTML; txtspan[4].innerHTML = txtname[4].innerHTML;
</script>
<script>
let apco1 = new URL(document.getElementById("hlink-1").innerHTML); if (window.location.protocol + "//" + window.location.hostname + window.location.pathname == apco1.protocol + "//" + apco1.hostname + apco1.pathname ) { bottomnavspan[0].classList.add("active"); } else if (window.location.protocol + "//" + window.location.hostname + window.location.pathname + window.location.search == apco1.protocol + "//" + apco1.hostname + apco1.pathname + apco1.search ) { bottomnavspan[0].classList.add("active"); } let apco2 = new URL(document.getElementById("hlink-2").innerHTML); if (window.location.protocol + "//" + window.location.hostname + window.location.pathname == apco2.protocol + "//" + apco2.hostname + apco2.pathname ) { bottomnavspan[1].classList.add("active"); } else if (window.location.protocol + "//" + window.location.hostname + window.location.pathname + window.location.search == apco2.protocol + "//" + apco2.hostname + apco2.pathname + apco2.search ) { bottomnavspan[1].classList.add("active"); } let apco3 = new URL(document.getElementById("hlink-3").innerHTML); if (window.location.protocol + "//" + window.location.hostname + window.location.pathname == apco3.protocol + "//" + apco3.hostname + apco3.pathname ) { bottomnavspan[2].classList.add("active"); } else if (window.location.protocol + "//" + window.location.hostname + window.location.pathname + window.location.search == apco3.protocol + "//" + apco3.hostname + apco3.pathname + apco3.search ) { bottomnavspan[2].classList.add("active"); } let apco4 = new URL(document.getElementById("hlink-4").innerHTML); if (window.location.protocol + "//" + window.location.hostname + window.location.pathname == apco4.protocol + "//" + apco4.hostname + apco4.pathname ) { bottomnavspan[3].classList.add("active"); } else if (window.location.protocol + "//" + window.location.hostname + window.location.pathname + window.location.search == apco4.protocol + "//" + apco4.hostname + apco4.pathname + apco4.search ) { bottomnavspan[3].classList.add("active"); } let apco5 = new URL(document.getElementById("hlink-5").innerHTML); if (window.location.protocol + "//" + window.location.hostname + window.location.pathname == apco5.protocol + "//" + apco5.hostname + apco5.pathname ) { bottomnavspan[4].classList.add("active"); } else if (window.location.protocol + "//" + window.location.hostname + window.location.pathname + window.location.search == apco5.protocol + "//" + apco5.hostname + apco5.pathname + apco5.search ) { bottomnavspan[4].classList.add("active"); }
</script>
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;
}
Your_code_is_here