Home
Blogging

Cara Membuat Shadow atau Garis Header Blog Template Viomagz

Cara Membuat Bayangan atau Garis di Header Blog Template Viomagz

Template merupakan salah satu faktor penting untuk menunjang penampilan blog. Customisasi pada template dirasa penting untuk mengubah template bawaan yang tampilannya kurang srek di mata Anda.

Pada artikel kali ini saya akan memberikan panduan singkat dan padat cara membuat bayangan atau garis pada header blog khusus template Viomagz.

Seperti yang Anda lihat pada header blog ini, ada garis atau bayangan yang memisahkan antara header dan body.

Sebenarnya ini cara ini hanya diperlukan jika Anda ingin mengubah warna header menjadi putih agar kesannya lebih simple tanpa banyak warna.

Perlu diingat cara ini hanya berlaku untuk template Viomagz saja, sedangkan untuk template lain saya belum pernah mencobanya.

Cara Membuat Bayangan di Header Blog

Sedikit cerita tentang template Viomagz yang dikembangkan oleh Mas Sugeng ini. Dari awal template ini hadir, saya langsung jatuh hati dengan tampilannya yang simple namun tetap berkelas.

Selain itu kecepatan dan fitur lainnya juga mendukung untuk bersaing di pencarian Google.

Ya meskipun banyak yang bilang Viomagz adalah template seribu umat, saking banyaknya orang yang memakai template ini. Baiklah langsung saja simak cara membuat garis di header blog berikut.

  • Setelah Anda masuk ke dashboard blog, klik Theme atau Tema
  • Edit Tema
  • Salin semua script terlebih dahulu dan paste-kan ke Notepad, tujuannya untuk jaga-jaga andai Anda tidak sengaja menghapus salah satu kode
  • Selanjutnya cari kode /* HEADER */ dengan cara Ctrl + F - ketik /* HEADER */ dan tekan Enter
  • Pasang script 
-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); tepat DI BAWAH background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
  • Setelah itu maka tampilannya akan 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;
}
  • Langkah terakhir klik Simpan

Nah, sangat mudah kan? Hanya menambahkan dua baris script saja Anda sudah berhasil membuat bayangan pada header blog template Viomagz.

Baca juga cara membuat Halaman Kontak blog agar artikel Anda cepat terindeks Google. Sekian panduan singkat ini semoga bermanfaat!

Post a Comment