Dynamic background of labels or tags - CSS tutorial
In the blogger website, there is a section which contains a keyword of blog post as a label. Label can group same type of blog if keywords are written intelligently. Generally, in many blogger templates The label has static background. Yet, Some blogger template provide dynamic background of labels and refreshes every time when webpage loads. So here we will understand how can we apply dynamic background to the labels and how will we use CSS and JavaScript for this task. Let's learn, it would be interesting.
The changing background color of labels or tags on a Blogger website can be achieved through various methods involving JavaScript and CSS. Here's a basic example of how you can implement this:
Step-by-Step Guide
1. HTML Structure
First, make sure your labels or tags have a specific class or ID you can target with your JavaScript and CSS. For example:
html
<div class="tag">Label 1</div>
<div class="tag">Label 2</div>
<div class="tag">Label 3</div>
2. CSS
Define a default style for your tags:
.tag {
padding: 10px;
color: white;
border-radius: 5px;
}
3. JavaScript
Use JavaScript to assign a random background color to each tag whenever the page loads. You can place this script either in the head of your HTML document or in a separate JavaScript file.
<script>
document.addEventListener("DOMContentLoaded", function() {
// Array of colors
var colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A8", "#A833FF", "#33FFF5"];
// Get all elements with the class "tag"
var tags = document.querySelectorAll(".tag");
// Loop through each tag and set a random background color
tags.forEach(function(tag) {
var randomColor = colors[Math.floor(Math.random() * colors.length)];
tag.style.backgroundColor = randomColor;
});
});
</script>
Explanation
1. HTML Structure: This step ensures that your labels or tags can be targeted by the script. Using a class like `.tag` is a common practice.
2. CSS: Defines the default appearance of the tags. This can be expanded with more styles as needed.
3. JavaScript: This script runs when the DOM is fully loaded (`DOMContentLoaded` event). It selects all elements with the class `.tag`, then loops through each element to assign a random background color from the `colors` array.
Implementation on Blogger
To implement this on your Blogger site, you will need to:
1. Edit HTML:
- Go to the Blogger dashboard.
- Navigate to `Theme`.
- Click on `Edit HTML`.
2. Insert CSS and JavaScript:
- Insert the CSS into the `<head>` section of your template.
- Insert the JavaScript before the closing `</body>` tag or in the `<head>` section if wrapped in a `DOMContentLoaded` event as shown.
3. Apply to Labels:
- Make sure your Blogger labels/tags are given the appropriate class (`.tag` in this example).
Here's how it might look in your Blogger template:
html
<head>
<!-- Other head elements -->
<style>
.tag {
padding: 10px;
color: white;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- Other body elements -->
<div class="tag">Label 1</div>
<div class="tag">Label 2</div>
<div class="tag">Label 3</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A8", "#A833FF", "#33FFF5"];
var tags = document.querySelectorAll(".tag");
tags.forEach(function(tag) {
var randomColor = colors[Math.floor(Math.random() * colors.length)];
tag.style.backgroundColor = randomColor;
});
});
</script>
</body>
</HTML>
This will ensure that every time you load your Blogger webpage, the labels or tags will have different background colors chosen randomly from the predefined set of colors.
Post a Comment