Tools Gradient Warna Warni untuk Blog dengan CSS

TOOLS Gradient Warna ini sangat mudah digunakan bahkan oleh orang awam sekalipun. Karena kita tinggal mengklik saja arahan pointer yang ada disitu, tanpa kita harus paham dengan bahasa HTML, CSS maupun Javascript. Dengan begitu, utak-atik warna untuk kebutuhan display blog yang beraneka warna menjadi sangat mudah dilakukan saat ini. Mau coba, silakan baca artikel ini sampai habis ya teman-teman.

Gradient tool merupakan Tools yang biasa digunakan untuk mengkombinasikan warna warna dasar. Pada tutorial kali ini kita akan belajar mengenal Gradient tool pada APP pengubah warna menjadi gradient di Blogspot. Sebetulnya pada software desain seperti Coreldraw dan Photosop, gradient warna ini sudah digunakan dan terdapat tools di dalamnya. Dengan adanya Gradient Tool akan memudahkan kita dalam memberikan warna pada background blog.

Sedangkan Gradient tool merupakan tool yang digunakan untuk mengisi objek dengan gradiasi warna. Ada banyak tipe Gradiasi yang disediakan oleh Tools ini untuk kita gunakan. Tipe gradiasi warna yang dapat kita digunakan antara lain yakni:

LINEAR gradient = Untuk membertuk gradiasi warna dengan pola gradiasi berbentuk garis lurus.
RADIANT Gradient = Untuk membetuk gradiasi warna dengan pola gradiasi berbentuk sebaran warna melingkar.
ANGULAR Gradient = untuk menbentuk gradiasi warna dengan pola gradiasi berbentuk melingkar.
REFLECTED Gradient = Untuk membentuk gradiasi warna dengan pola gradiasi berbentuk garis lurus yang terefleksi / dicerminkan.
DIAMOND Gradient = untuk membentuk gradiasi warna dengan pola gradiasi yang memusat berbentuk segi empat.

Memasang Gradient Tools Warna di Blog dengan Mudah

Berikut ini tutorial memasang Gradient Toolsnya :

1. Buka BLOGGER.COM
2. Silahkan SIGN IN menggunakan AKUN GOOGLE kalian
3. Masuk ke DASHBOARD Blogger
4. Pilih menu TEMA
5. Klik EDIT HTML
6. Lalu cari kode ]]></b:skin>
7. COPY CSS dibawah ini tepat di atasnya :

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
}
body{
    height: 100vh;
}
.container{
    background-color: #ffffff;
    width: 400px;
    padding: 50px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 20px 25px rgba(0,0,0,0.25);
}
.container *:not(i){
    font-family: "Rubik",sans-serif;
}
.colors{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
input[type="color"]{
    -webkit-appearance: none;
    background-color: transparent;
    width: 100px;
    height: 45px;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch{
    border-radius: 20px;
    border: none;
}
.buttons{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
}
.buttons button{
    height: 35px;
    width: 35px;
    background-color: transparent;
    border: 2px solid #d5d5dc;
    color: #d5d5dc;
    border-radius: 5px;
    cursor: pointer;
}
.rotate-icon i{
    transform: rotate(45deg);
}
.buttons .active{
    border: none;
    background-color: #4a6ee0;
    color: #ffffff;
}
#submit{
    display: block;
    background-color: #4a6ee0;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 70px;
    border-radius: 25px;
    margin: 0 auto 30px auto;
    cursor: pointer;
}
.output{
    background-color: #f0f2fc;
}
#code{
    width: 100%;
    resize: none;
    color: #30304a;
    padding: 10px 20px;
    background-color: transparent;
}
#copy{
    font-size: 14px;
    background-color: #4a6ee0;
    color: #ffffff;
    position: relative;
    left: 85%;
    bottom: 10px;
    border-radius: 3px;
    padding: 5px;
    cursor: pointer;
}

8. Masih di template. Temukan kode </body>. Tempelkan SCRIPT dibawah ini tepat diatasnya :

let colorOne = document.getElementById('color-a');
let colorTwo = document.getElementById('color-b');
let currentDirection = 'to bottom';
let outputCode = document.getElementById('code');

function setDirection(value,_this){
    let directions = document.querySelectorAll(".buttons button");
    for(let i of directions){
        i.classList.remove('active');
    }
    _this.classList.add('active');
    currentDirection = value;
}
function generateCode(){
    outputCode.value = `background-image: linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value});`

    document.getElementsByTagName("BODY")[0].style.backgroundImage = `linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value})`;
}
function copyText(){
    outputCode.select();
    document.execCommand('copy');
    alert('Gradient Copied!');
}
generateCode();

9. Terakhir, menampilkan HTML di tempat yang sudah kamu sediakan di blog kamu. Seperti ini kode HTMLnya. Silakan ditempelkan.

<head>
    <title>Gradient Tools</title>
    <!--Font Awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="colors">
            <input type="color" id="color-a" value="#1488cc">
            <input type="color" id="color-b" value="#2b32b2">
        </div>
        <div class="buttons">
            <button onclick="setDirection('to top',this)">
                <i class="fas fa-arrow-up"></i>
            </button>
            <button class="active" onclick="setDirection('to bottom',this)">
                <i class="fas fa-arrow-down"></i>
            </button>
            <button onclick="setDirection('to right',this)">
                <i class="fas fa-arrow-right"></i>
            </button>
            <button onclick="setDirection('to left',this)">
                <i class="fas fa-arrow-left"></i>
            </button>
            <button class="rotate-icon" onclick="setDirection('to top right',this)">
                <i class="fas fa-arrow-up"></i>
            </button>
            <button class="rotate-icon" onclick="setDirection('to bottom left',this)">
                <i class="fas fa-arrow-down"></i>
            </button>
            <button class="rotate-icon" onclick="setDirection('to bottom right',this)">
                <i class="fas fa-arrow-right"></i>
            </button>
            <button class="rotate-icon" onclick="setDirection('to top left',this)">
                <i class="fas fa-arrow-left"></i>
            </button>
        </div>
        <button id="submit" onclick="generateCode()">Generate</button>
        <div class="output">
            <textarea id="code" rows="2"></textarea>
            <button id="copy" onclick="copyText()">Copy</button>
        </div>
    </div>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

Tools akan saya sertakan dibawah ini :

GRADIENT

Nah silakan teman-teman pick gradient warnanya. Warnanya banyak banget kok disitu, tinggal geser aja warna apa yang disukai, kemudian klik Generate. Minggu ini fokus buat artikel ini setelah pagi tadi Jalan Santai dalam Rangka HUT RSI ke 26. Berlangsung meriah kali pagi tadi, seluruh jajaran di RSI ikut berpartisipasi di dalamnya. Selamat deh. "Perbaikilah dirimu, maka orang akan memaafkanmu dengan sendirinya. Kita selalu bisa memaafkan, namun tidak harus melupakan. Sebelum meminta maaf pada orang lain, cobalah memaafkan dirimu sendiri. Mengucapkan maaf memang terasa mudah, tapi sangat sulit dilakukan. Meminta maaf bukan berarti salah, itu adalah pertanda sudah dewasa." Tetap semangat teman-teman. Salam Blogger.

Bagikan ke teman-teman kamu