November 11, 2019

BAGAIMANA CARA MEMBUAT GRADASI WARNA PADA BLOGGER

gradasi warna
gradasi warna
Warna gradasi yang di visualkan melalui halaman web adalah trik CSS yang mengagumkan. Kode warna itu sendiri adalah model perintah CSS yang membentuk HTML untuk memvisualisasikan dirinya di halaman web. Contohnya adalah bingkai atau batangan berwarna gradasi di kiri dan kanan halaman konten ini (hanya untuk konten ini, konten konten editblogtema yang lain NORMAL).

Jika kalian melihat di kiri kanan ada batangan warna pada halaman konten ini, itulah yang saya maksud dengan efek gradasi. Cobalah scroll halaman ini keatas dan kebawah perhatikan bagaimana warna berubah bak pelangi. Khusus hanya pada halaman konten yang saya tulis ini.

Namun pada tampilan layar kecil smartphone batangan warna tidak bisa ditampilan. Kalian hanya bisa melihat warna biru di bawah footer blog pada halaman ini.

Membuat efek ini ternyata sederhana sekali: Dasar pembuatan efek gradasi CSS pada halaman HTML blogger adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<style>body {height: 3000px;background: linear-gradient(141deg, #0fb8ad 0%, #FF0000 51%, #0000FF 75%);
}</style></head>
<body>
<p>ini adalah bagian konten</p>
</body>
</html>
Saya ingin mengggaris bawahi baris kode CSS berwarna merah, itu adalah untaian kode CSS yang terikat dengan perintah ke HTML, namun sesungguhnya kode warna gradasi terbentuk pada baris kode yang saya sorot dengan warna kuning saja.

Tentu saja untuk menerapkannya ke dalam template kalian cukup melakukan langkah sebagai berikut:
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Pada pengaturan template terbaru klik titik tiga 
  4. Akan muncul menu seperti pada gambar:
  5. Klik atau pilih "Edit HTML" 
  6. Pada halaman editor HTML yang telah terbuka cari kode penutup </head>  dan letakan kode CSS berikut tepat diatasnya:
<style>body {height: 3000px;background: linear-gradient(141deg, #0fb8ad 0%, #FF0000 51%, #0000FF 75%);}</style>
Cukup hanya itu dan SAVE template.
Kalian dapat merobah kode kode warna berikut dengan kode kode warna CSS yang kalian inginkan:
 #0fb8ad 0%, #FF0000 51%, #0000FF 75%);
Atau (ini cara paling mudah dan paling aman:
  1. Pada menu Blogger Theme Designer yang muncul dengan beberapa pilihan, scroll keatas hingga bagian paling bawah yakni menu "Add CSS" atau "Tambahkan CSS" klik dan setelah itu akan muncul kotak CSS.
  2. Copy kode CSS yang di inginkan untuk membentuk HTML, pastekan ke dalam kotak tadi. Kalian harus tahu dengan mempastekan kode CSS ke dalam kotak CSS, sama saja kalian menempatkan kode CSS di atas ]]></b:skin> melalui Edit HTML.
  3. Save template.
Yang kalian butuhkan untuk memahami ini adalah teruslah belajar. Ingat ya di masa depan kriteria buta huruf bagi generasi muda adalah jika ia tidak bisa membaca coding...he he he...dan maaf, sample warna terpaksa saya letakan di kiri dan kanan konten ini demi kenyamanan saat membaca konten.

Born in 29 Jan 2002 in Batam. I am a student of Senior High School (SMA) Now I am living in Bandar Lampung, Love HTML, Javascript, python and C++

2 comments:

  1. Biasanya setelah tau kita bilang ooo ternyata mudah yah heheh.
    Nice inpoh mba

    ReplyDelete
    Replies
    1. memang mudah sebenarnya, cuma orang suah terlanjur mengangap sulit

      Delete