 |
| gradasi warna |
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>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.
<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>
Tentu saja untuk menerapkannya ke dalam template kalian cukup melakukan langkah sebagai berikut:
- Masuk ke pengaturan blogger
- Pilih Tema
- Pada pengaturan template terbaru klik titik tiga ⋮
- Akan muncul menu seperti pada gambar:
- Klik atau pilih "Edit HTML"
- 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:
- 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.
- 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.
- Save template.
Biasanya setelah tau kita bilang ooo ternyata mudah yah heheh.
BalasHapusNice inpoh mba
memang mudah sebenarnya, cuma orang suah terlanjur mengangap sulit
Hapus