How To Add Gradient Color Code Generator Tool in Blogger
Simple Gradient Color Code Generator Script which can be used in blogger. We are again back with a new blogger script or we can say with a new tool for a blogger. Adding gradient color to any website background attracts more than a simple one Right!.
So Stay with me in this article as we are going to talk about Gradient Color Code Generator Tool Script for Blogger. To be more precise How to create Viral Gradient Color Code Generator Tool? nowadays making tool websites are in a trend many bloggers are making such kinds of websites.
So we will know all these things in this article. So stay in this article and know more in full detail.
 |
| Create Gradient Color Code Generator Tool blogger script |
What is a Color gradient?
According to Wikipedia - In computer graphics, a color gradient specifies a range of position-dependent colors, usually used to fill a region. For example, many window managers allow the screen background to be specified as a gradient. The colors produced by a gradient vary continuously with position, producing smooth color transitions.
In simple language combination of two or more colors continuously with position, producing smooth color transitions effect.
For more information visit the Wikipedia page.
And this Gradient Color is used in web development. If you do Coding then you must know about it. So now let's directly jump into proper steps to make our own Color Gradient code generator tool.
Very useful script: Automatically Add Related Articles in the Middle of the Post
Create Gradient Color Code Generator Tool in Blogger
Nowadays even many blog users need to get a color code when changing their template or widget color And blog designers also need a color code generator for best color matching. So let's make our own tool for this.
Step – 1: Change to First-generation classic theme
Click on Theme. You’ll get to see Blogger Default Template, click on the three-dot, and from there click on “Switch to the first-generation classic theme”. And then click “switch without backup”. For more watch the below video.
2: Change 3: Remove all and Upload/Add provided Script
4: Preview your Website Final Look
5: Congrats your website is ready to Play
That’s the final look you will get. Now your linear gradient color code generator tools are ready to use.
More Useful Script: Lazy Load Google Adsense Ads
Add Tool in Blog Page
For adding Color Gradient Generator tool into your blog page then just add the below code.
Copy below complete code and paste in blog page HTML view.
Complete Code of our Tool
<style type="text/css">
/*
-----------------------------------------------------------------------------------
This Script was founded & Modify by Technical Arp Team
----------------------------------------------------------------------------------- */
body {
background: linear-gradient(to right, rgb(177, 56, 168), rgb(250, 116, 5));
}
.title {
background-color: #192B3A;
border-left: 12px solid #00FF0D;
border-right: 12px solid #00FF0D;
border-radius: 50px 117px 50px 117px;
color: #fdfdfd;
padding: 8px;
font-size: 22px;
text-align: center;
}
.subtitle {
font-family: "Kanit", sans-serif;
color: black;
}
.title {
letter-spacing: 0.4em;
}
.subtitle {
letter-spacing: 0.2em;
}
.color1,
.color2 {
width: 3em;
height: 3em;
cursor: pointer;
}
.current-bg {
font-family: "Source Code Pro", monospace;
color: white;
}
.copy-property {
color: black;
cursor: grab;
}
.copy-property:active {
cursor: grabbing;
}
.random-btn {
color: black;
border-radius: 1rem;
transition: all 0.3s ease-in-out;
}
.random-btn:hover {
background: steelblue;
border: 1px solid steelblue;
color: white;
transform: scale(1.1);
}
.adspacebytechnicalarp {
padding: 2em;
box-shadow: 0 5px 15px rgba(0,0,0,.16);
border-radius: 5px;
margin-top: 1em;
background: #fff;
text-align: left;
}
</style>
<center>
<!--main section-->
<section class="mt-3" id="main">
<div class="container mainbox">
<div class="row">
<div class="col text-center">
<h2 class="title text-uppercase font-weight-bold">
Gradient Color Code Generator
</h2>
<div class="adspacebytechnicalarp container">
Place you Ad Code 1
</div>
<br />
<input class="color1 my-4 mr-4" name="color1" type="color" value="#B138A8" />
<input class="color2" name="color2" type="color" value="#FA7405" />
<h4 class="subtitle text-uppercase font-weight-bold">
Current CSS Background
</h4>
<h5 class="current-bg font-weight-bold my-4"></h5>
<p class="copy-property lead font-italic">Click here to copy!</p>
<br />
<button class="random-btn btn btn-light btn-lg mt-3 p-3">
Generate random
</button>
<div class="adspacebytechnicalarp container">
Place you Ad Code 2
</div>
</div>
</div>
</div>
</section>
<!--end of main section-->
</center>
<script language="Javascript">
const htmlBody = document.querySelector(".mainbox");
const color1 = document.querySelector(".color1");
const color2 = document.querySelector(".color2");
const currentSelection = document.querySelector(".current-bg");
const copyProperty = document.querySelector(".copy-property");
const randomButton = document.querySelector(".random-btn");
function setGradient() {
htmlBody.style.background = `linear-gradient(to right, ${color1.value}, ${color2.value})`;
currentSelection.textContent = `${htmlBody.style.background};`;
}
function generateRandom() {
const randomColor1 = Math.random().toString(16).slice(2, 8).toUpperCase();
const randomColor2 = Math.random().toString(16).slice(2, 8).toUpperCase();
color1.value = `#${randomColor1}`;
color2.value = `#${randomColor2}`;
setGradient();
}
function copyText() {
const text = currentSelection.innerText;
let temp_element = document.createElement("textarea");
document.body.appendChild(temp_element);
temp_element.value = text;
temp_element.select();
document.execCommand("copy");
document.body.removeChild(temp_element);
}
window.addEventListener("load", setGradient);
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
copyProperty.addEventListener("click", copyText);
randomButton.addEventListener("click", generateRandom);
</script>
If you know how to play with HTML, CSS, and Javascript then you can even customize it in your preferable way.
Also read: Defer google tag manager script to Increase Website Speed
Read more: Create Meme Generator website in blogger script
For a complete demo of the script with a proper installation and usage guide please watch the complete video.
Linear Gradient Code generator using JavaScript
In Conclusion of Free Gradient Color Code Generator Script Blogger
Using these scripts, you can easily create a tool in your own blogger website. By the way, a lot of people want to create their own tools and do online earning. And I am going to make this dream come true.
How did you like this article of Gradient Color Code Generator Tool Script for Blogger Download? You must definitely comment by commenting in the comment box below. Or you also want to give some kind of Suggestion, then you can share your opinion with us in the Comment Box below.
ConversionConversion EmoticonEmoticon