Change the color of the search results background in blogger and the same tag posts
Question
Good night people. I am creating a blog on blogger and I would like to put the background color according to the tag: For example: when I search for a tag eg: Books all the posts that contain this tag will appear and the posts that contain this tag will appear with the blue background. When I open a post that has the tag Books this post also has to have the blue blog background. I tried to find a similar question in the stackoverflow in English but the code didn't work here is the link Change color by Blogger Tag
But when I put this code on the blogger and with the tags with their proper colors, it always stays with the last color set and not one for each tag as I wanted... And when there is no tag he is putting the color in the same way as if he did not have an if .
The blogger was supposed to stay on top of the color of each navigation button on the side.
When I put the code the main page is the color that was supposed to be only when all posts included the tag I'm looking for.
This is the main page
Updated: The menu code is the following:
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/solid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"/>
<!doctype html>
<style>
#mySidenav a {
position: fixed;
left: -230px;
transition: 0.3s;
padding: 15px;
width: 270px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
}
#mySidenav a:hover {
left: 0;
}
#search {
top: 40px;
background-color: #FFBA99;
}
#home {
top: 100px;
background-color: #BA2D26;
}
#about {
top: 160px;
background-color: #0055A5;
}
#blog {
top: 220px;
background-color: #5F6BB0;
}
#projects {
top: 280px;
background-color: #158DA9;
}
#contact {
top: 340px;
background-color: #8F2054;
}
#matematica{
top:400px;
background-color:#B1BB36;
}
#sheatsheet{
top:460px;
background-color:#B80c00;
}
#postsPolulares{
top:520px;
background-color:#420085;
}
#arquivos{
top:580px;
background-color:#963c00;
}
#contato{
top:640px;
background-color:#8a0a83;
}
#sobre{
top:700px;
background-color:#006b54;
}
#repositorio{
top:760px;
background-color:#000000;
}
#calendario{
top:820px;
background-color:#0F89BA;
}
#media{
top:880px;
background-color:#EC7650;
}
#books{
top:940px;
background-color:#49497F;
}
#rss{
top:1000px;
background-color:#D38094;
}
a{
text-align: right;
}
/* Novo estilo*/
*{box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Search {background-color: #FFBA99;}
#Home {background-color: #BA2D26;}
#About {background-color: #0055A5;}
#Blog {background-color: #5F6BB0;}
#Projects {background-color: #158DA9;}
#Contact {background-color: #8F2054;}
#Matematica {background-color:#B1BB36;}
#Sheatsheet {background-color:#B80c00;}
#PostsPolulares {background-color:#420085;}
#Arquivos {background-color:#963c00;}
#Contato {background-color:#8a0a83;}
#Sobre {background-color:#006b54;}
#Repositorio {background-color:#000000;}
#Calendario {background-color:#0F89BA;}
#Media {background-color:#EC7650;}
#Books {background-color:#49497F;}
#Rss {background-color:#D38094;}
/*#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}*/
/*FIm DO NOVO ESTILO*/
</style>
<div id="mySidenav" class="sidenav">
<a href="https://www.steamizando.com/p/busca.html" id="search" class="tablink" onclick="openPage('Search', this, '#FFBA99')">Pesquisar <i class="fas fa-search"></i></a>
<a href="https://www.steamizando.com/p/home.html" id="home" class="tablink" onclick="openPage('Home', this, '#BA2D26')">Home <i class="fas fa-home"></i></a>
<a href="https://www.steamizando.com/p/ciencia.html" id="about" class="tablink" onclick="openPage('About', this, '#0055A5')"> Ciência <i class="fas fa-microscope"></i> </a>
<a href="https://www.steamizando.com/p/tecnologia.html" id="blog" class="tablink" onclick="openPage('Blog', this, '#5F6BB0')"> Tecnologia <i class="fas fa-laptop-code"></i></a>
<a href="https://www.steamizando.com/p/engenharia.html" id="projects" class="tablink" onclick="openPage('Projects', this, '#158DA9')"> Engenharia <i class="fas fa-tools"></i></a>
<a href="https://www.steamizando.com/p/artes.html" id="contact" class="tablink" onclick="openPage('Contact', this, '#8F2054')"> Artes <i class="fas fa-palette"></i></a>
<a href="https://www.steamizando.com/search/label/Matematica" id="matematica" class="tablink" onclick="openPage('Matematica', this, '#B1BB36')"> Matematica <i class="fas fa-square-root-alt"></i></a>
<a href="https://www.steamizando.com/p/cheatsheet.html" id="sheatsheet" class="tablink" onclick="openPage('Sheatsheet', this, '#b80c00')" >Sheatsheet <i class="fas fa-table"></i></a>
<a href="https://www.steamizando.com/p/populares.html" id="postsPolulares" class="tablink" onclick="openPage('PostsPolulares', this, '#420085')" > Polulares <i class="fas fa-fire"></i></a>
<a href="https://www.steamizando.com/p/arquivos.html" id="arquivos" class="tablink" onclick="openPage('Arquivos', this, '#963c00')" >Arquivos <i class="fas fa-folder"></i></a>
<a href="https://www.steamizando.com/p/contato.html" id="contato" class="tablink" onclick="openPage('Contato', this, '#8a0a83')" >Contato <i class="fas fa-at"></i></a>
<a href="https://www.steamizando.com/p/sobre.html" id="sobre" class="tablink" onclick="openPage('Sobre', this, '#006b54')" >Sobre <i class="fas fa-address-card"></i></a>
<a href="https://www.steamizando.com/p/repositorio.html" id="repositorio" class="tablink" onclick="openPage('Repositorio', this, '#000000')" >Repositorio <i class="fab fa-github-alt"></i></a>
<a href="https://www.steamizando.com/p/calendario.html" id="calendario" class="tablink" onclick="openPage('Calendario', this, '#0F89BA')" >Calendario <i class="fas fa-calendar-alt"></i></a>
<a href="https://www.steamizando.com/p/media.html" id="media" class="tablink" onclick="openPage('Media', this, '#EC7650')">Media <i class="fas fa-photo-video"></i></a>
<a href="https://www.steamizando.com/p/livros.html" id="books" class="tablink" onclick="openPage('Books', this, '#49497F')"> Books <i class="fas fa-book"></i></a>
<a href="https://www.steamizando.com/p/rss.html#" id="rss" class="tablink" onclick="openPage('Rss', this, '#D38094')" >Rss <i class="fas fa-rss"></i></a>
</div>
<!-- <button class="tablink" onclick="openPage('About', this, '#0055A5')">Home</button> -->
<div id="Search" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="About" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Blog" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Projects" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Contact" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Matematica" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Sheatsheet" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="PostsPolulares" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Sheatsheet" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Arquivos" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Contato" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Repositorio" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Sobre" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Media" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Calendario" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Books" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="Rss" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = color;
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</!doctype>
I've putted it in the script gadget in the blogger. But part of the code above doesn't appears there anymore when I open the gadget to edit it. But the issue that I'm facing is the following, for each Tab would be a searh link to a label like enter link description here . So I would like to click in the tab and all the posts that have the label matematica will apper in a background with the same color of the tab. And the same thing will happen to all other tabs. But when the main page there are all the posts, that is, when the colection of the posts (the union operation above the tags) the background should be white.
The code to change the background is the following:
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = color;
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
The one that I've found in Change color by Blogger Tag
I think that the problem is in this part of the code:
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = color;
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
Thanks again for the help:)
1 answers
solution1
0 2021-03-16 22:35:59
I have solved part of the problem replacing the tablinks[i].style.backgroundColor = color;to document.body.style.backgroundColor = color; But it just changed the color for in the moment of the click. I would like it that the background could stay with color until I click into another tab. If someone knows how to do it:) Thanks a lot
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.