Cara Membuat Background Gradient di Blog dengan CSS

Cara Membuat Background Gradient di Blog dengan CSS

Blogging Script Template

Maret 27, 2018 Add Comment

PrazMedia - Akhir-akhir ini banyak sekali pemilik web atau blog yang merombak tampilan web mereka. Diantara rombakan yang paling ramai dan kompak dilakukan adalah penggunaan gradient warna untuk background elemen tertentu, seperti Navbar dan Footer. Tren background warna gradient ini dapat dibuat dengan bahasa stylesheet (CSS) yang memang fungsi utamanya ialah untuk style atau penggaya tampilan (pembungkus dari HTML). Untuk itu, kali ini saya coba bahas cara membuat background gradien warna ini dan diaplikasikan untuk blogger.

Beberapa situs yang sudah menggunakan gradien warna sebagai background elemennya ialah Jalantikus.com, dan beberapa situs yang dikelola google. Untuk membuatnyapun tidak diperlukan banyak kode. Hanya bermodalkan kode CSS Gradient, Animation, Background Linear saja. Dan untuk merapikan tulisan atau textnya kita cukup gunakan CSS Display, Font Weight, dan Color saja. Baik langsung saja ke Tutorialnya.

CARA MEMBUAT BACKGROUND GRADIEN DI BLOGGER

Langkah yang perlu dilakukan ialah :

1. Masuk ke akun blogger kamu,
2. Klik Tema > Sesuaikan
3. Pilih Lanjutan > Tambahkan CSS
4. Salin (Copy) kode CSS dibawah artikel ini 
5. Tempel (Paste) kode tersebut di kotak Tambahkan CSS Khusus
6. Klik [Terapkan pada Blog]
7. Selesai

Kode CSS Untuk Background Gradien Warna :

[@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%}
    50% {
        background-position: 100% 50%}
    100% {
        background-position: 0% 50%}
}
@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
div.header{
 color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
display: block;
font-weight: bold;
    color: black;
}]

• [message]
• CATATAN :
• silahkan ganti hurus yang tercetak tebal berwarna merah div.header dengan tag, class atau id elemen yang mau diganti. Untuk lebih dari satu elemen gunakan tanda koma untuk memisahkan.

Untuk mencari tag, klas, dan id dari elemen kamu bisa manfaatkan webmaster tool dari browser untuk mencarinya. Sekian tutorial dari saya mengenai cara mengganti background menjadi gradien warna. Semoga membantu.