Skip to main content

Cara Menambahkan Efek Shadow / Bayangan Pada Header Viomagz

Cara menambahkan box shadow / bayangan pada template viomagz. Seperti judulnya disini saya akan membagikan tutorial cara menambahkan efek shadow / bayangan tepatnya di template seribu umat (viomagz), sebenarnya menambahkan efek shadow ini bisa dilakukan di semua header template lain, dengan syarat paham CSS dasar.

Namun kali ini saya akan berfokus hanya pada template karya mas sugeng, apa lagi kalau bukan viomagz. Tutotial yang satu ini sebenarnya sudah saya bagikan di blog saya yang dulu yaitu giochanel.xyz, karena blognya sudah tidak ada, jadi saya bagikan di sini.

BACA JUGA : Cara Membuat Codes Parser Tools

Nah yang menarik pada template viomagz adalah di bagian header, dimana tidak terdapat efek bayangan sehingga menimbulkan kesan yang monoton, apalagi jika background headernya di bikin warna putih, kesannya seperti menyatu pada latar. Jika anda merasa sama seperti saya, silahkan ikuti tutorial berikut ini dengan baik baik agar bisa work 100%

Cara Menasang Shadow / Bayangan di Template Viomagz

Untuk menambahkan bayangan pada header viomagz cukup mudah anda hanya perlu menambahkan CSS box shadow di headernya, untuk lebih jelas perhatikan di bawah ini.

Pertama, masuk ke dashboard blogger anda masing masing, kemudian pilih Tema >> edit HTML dan cari kode seperti di bawah ini.

/* HEADER */
#header-container {
background: $(header.background.kiri);
background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}

Jika sudah ketemu, maka paste kode berikut tepat di bawah $(header.background.kanan));

-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);

Sehingga hasilnya menjadi seperti ini

/* HEADER */
#header-container {
background: $(header.background.kiri);
background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}

Terakhir, silahkan anda save atau simpan tema dan lihat hasilnya, pada bagian header anda sudah terpasang shadow yang membuat header menjadi lebih hidup.

www.repick.net

NOTE : Konten yang ada di blog ini asli karya Gio Lesmana. Tidak diperkenankan mengambil isi konten tanpa izin. Traktir saya kopi melalui: Paypal.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar