Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara Menciptakan Shadow/Bayangan Di Header Viomagz V.3



Cara Membuat Shadow/Bayangan di Header VioMagz


Halo sobat blogger,masih seputar VioMagz nih,seperti yang kalian tahu bahwa kini template VioMagz sudah mempunyai versi terbaru yaitu VioMagz v3.1,banyak perubahan baik dari segi fitur maupun desainnya. Namun ada beberapa tampilan yang dirasa kurang memuaskan oleh beberapa blogger yang memakai template ini.

Seperti ukuran banner adsense yang terlalu kecil di beberapa daerah hingga desain header yang sudah tidak ada shadow/bayangannya sehingga terlihat flat. Oleh alasannya itu,disini aku akan memebrikan tutorial Cara Membuat Shadow/Bayangan di Header VioMagz v.3.

Tapi sebelum kita menuju tutorial untuk menampilkan bayangan header,kita berkenalan terlebih dahulu dengan fitur/tampilan apa saja yang gres dari template ini,berikut daftar perubahannya.

Tampilan dan Fitur Baru Template Blogger VioMagz v.3


Berikut ini daftar perubahan baik dari segi tampilan maupun fitur-fitur yang ada di VioMagz v.3 :

1. Tampilan dan Fitur Baru Template Blogger VioMagz v.3




Ini yaitu bab yang paling banyak tidak disukai dari update terbarunya,yaitu desain header yang terlihat flat/datar alasannya hilangnya dampak shadow/bayangan yang ada di bawah header. Perbedaan ini akan sangat terlihat saat anda memakai warna putih sebagai warna dasar di template VioMagz v.3 ini. Bagian Header dengan Wrapper/Isi akan terlihat menyatu sehingga terlihat menyerupai menumpuk.

2. Tampilan Numbered Page Navigation




Pada versi terbaru desain Numbered Page Navigation juga berubah,bila sebelumnya hanya ada kotak bernomor sebagai identifikasi jumlah halaman,kini ada suplemen kontak Selanjutnya dan Terkahir .

3. Tampilan Numbered Popular Post




Pada versi terbaru bab Numbered Popular Post juga berubah,dari yang sebelumnya berbetuk bulatan dengan nomor di tengahnya kini bermetamorfosis tanpa bulatan,hanya nomor saja dan ukurannya dibentuk lebih besar dari yang sebelumnya.

4. Komentar Blogger Versi Baru




Pada kolom komentar juga sudah dirubah menjadi versi yang terbaru,hal ini selain untuk menghadurkan desain yang lebih modern dan elegan juga untuk mengatasi error yang terjadi pada komentar blogger,dan memang merupakan kasus yang sedang banyak terjadi di banyak blog.

Baca Juga : Cara Membuat Warna Address Bar Berubah Mengikuti Warna Blog di Browser Mobile

Cara Memasang Bayangan/Shadow Box di bawah Header VioMagz v.3 Terbaru


Berikut ini cara menciptakan bayangan di bawah header VioMagz v.3 semoga tampilannya menyerupai versi 2.9 ke bawah :


  • Buka Blogger.com
  • Sign In dengan Akun anda
  • Masuk ke Dahsboard Blogger
  • Pilih Menu Tema
  • Klik Edit HTML
  • Cari arahan berikut :


/* 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;
}
#header-wrapper {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.header {
max-width: 400px;
float: left;
margin-right: 28px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.header h1.title, .header p.title {
font: $(header.font);
color: $(header.title.color);
margin: 0;
text-transform: uppercase;
line-height: 50px;
}
.header .description {
color: $(header.title.color);
margin: -10px 0 4px 0;
padding: 0;
font-size: 0.7em;
display: none;
}
.header a, .header a:hover {
color: $(header.title.color);
}
.header img {
display: block;
width: auto;
margin: 10px 0;
max-height: 28px;
}


  • Lalu Copy arahan ini :


-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);


  • Tempelkan sempurna di bawah arahan :


$(header.background.kanan));


  • Nanti jadinya menyerupai 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;
}
#header-wrapper {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.header {
max-width: 400px;
float: left;
margin-right: 28px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.header h1.title, .header p.title {
font: $(header.font);
color: $(header.title.color);
margin: 0;
text-transform: uppercase;
line-height: 50px;
}
.header .description {
color: $(header.title.color);
margin: -10px 0 4px 0;
padding: 0;
font-size: 0.7em;
display: none;
}
.header a, .header a:hover {
color: $(header.title.color);
}
.header img {
display: block;
width: auto;
margin: 10px 0;
max-height: 28px;
}


  • Bila sudah silahkan klik Simpan Tema


Penutup


Itulah cara menciptakan shadow/bayangan di bawah header VioMagz v.3 semoga tidak flat menyerupai versi 2.9 dan yang sebelumnya. Karena memang tampilan header pada versi yang terbaru terasa terlalu datar. Entah memang Mas Sugeng sengaja untuk mengubah desainnya hingga update-update yang selanjutnya. Atau mungkin ini hanya kesalahan yang tidak disengaja dan mungkin akan di buat Fix pada update versi terbaru yang selanjutnya.
Sumber https://www.dirga.id/