-->

Tutorial Lengkap Merubah Tampilan Template Blog Viomagz

 Buat anda yang saat ini sedang mencari cara merubah tampilan template blog viomagz, kali ini akan saya share beberapa tutorialnya seperti mengedit header blog, memasang tombol share sticky, menghilangkan thumbnail homepage, dll.

Tutorial Lengkap Merubah Tampilan Template Blog Viomagz

Template viomagz buatan dari Mas Sugeng ini memang sangat populer dipakai oleh para blogger termasuk saya sendiri yang menggunakan viomagz versi V.4.3.0 namun yang free version nya hehe.

Tak heran template ini banyak digunakan, karena template ini sangat ringan, responsive, dan tampilannya yang simple sehingga terlihat rapi. Saking populernya template ini sampai banyak blogger yang menulis artikel tentang viomagz ini.

Namun bagi anda yang ingin merubah beberapa tampilan dari viomagz ini biar terlihat beda dengan versi defaultnya bisa dipilih dibawah ini:


1. Setting Widget Baca Juga, Related Post, Dan Number Pagination

Defaultnya, widget baca juga, related post, dan number pagination ini aktif. Jika anda ingin menghilangkan salah satunya:

  1. Buka dashboard blogger anda
  2. Pilih menu tema
  3. Klik sesuaikan > edit html
  4. Cari kode dibawah ini:


Jika sudah ketemu, tinggal ubah saja. true untuk mengaktifkan dan false untuk menonaktifkan.

Setting Widget Baca Juga, Related Post, Dan Number Pagination

2. Membuat Header Navigasi Tidak Sticky

Pada awalnya, header navigasi dari template viomagz ini melayang atau mengikuti dibagian atas layar saat di scroll.

Membuat Header Navigasi Tidak Sticky

Untuk membuatnya tidak sticky lagi atau tidak mengikuti, tinggal cari dan hapus kode <b:include name='stickyheaderstyle'/> di menu edit html. posisi kode tersebut berada diatas dekat kode </head>.

Setelah kode <b:include name='stickyheaderstyle'/> dihapus, header navigasi anda tidak akan sticky lagi.


3. Menghilangkan Thumbnail Homepage

Menghilangkan Thumbnail Homepage

Untuk menghilangkan gambar thumbnail di bagian homepage seperti gambar diatas, tinggal masuk ke mode edit html, lalu cari (CTRL+ F) dan hapus kode:



4. Menambahkan Fitur Dark Mode

Menambahkan Fitur Dark Mode

Fitur dark mode seperti yang saya gunakan di blog ini adalah milik template Linkmagz yang saya tambahkan ke template viomagz ini. Dengan adanya fitur dark mode tersebut, tampilan  blog saya jadi terlihat lebih kekinian hehe.

Menambahkan fitur dark mode ini tidak akan berpengaruh sama sekali pada speed blog anda. Jadi anda tidak usah khawatir.

Buat anda yang juga ingin memasangnya, silahkan ikuti langkahnya dibawah ini:

  1. Buka dashboard blogger anda
  2. Pilih menu tema
  3. Klik sesuaikan > edit html
Tahap pertama, copy dan pastekan script/kode dibawah ini diatas kode </head>.



Setelah itu, copy dan pastekan juga script/kode dibawah ini tepat dibawah kode <body>.



Terakhir, copy dan paste script/kode dibawah ini tepat diatas kode </body>.



Selesai. Sampai tahap ini, fitur dark mode sudah dapat aktif di template blog viomagz anda.

Jika anda ingin memasang panel on/off fitur dark modenya, tinggal tambahkan script dibawah ini dibagian kolom tata letak anda.


Tinggal ubah true untuk aktif, dan false untuk nonaktif. Script terakhir ini jika tidak dipasang juga tidak apa-apa.


5. Membuat Tombol Share Jadi Sticky

Membuat Tombol Share Jadi Sticky

Untuk membuat tombol share viomagz Anda jadi sticky atau melayang mengikuti saat di scroll dibagian bawah layar, silahkan ikuti caranya dibawah ini:

Langkah pertama, masuk ke menu edit html, lalu cari kode #wrapper (Bisa dengan menekan CTRL+F).

Kurang lebih kodenya seperti dibawah ini:

#wrapper {
background: $(posts.background.color);
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow:hidden
}

Jika sudah ketemu, ubah tulisan overflow:hidden menjadi overflow:unset. maka hasilnya akan menjadi seperti dibawah ini:

#wrapper {
background: $(posts.background.color);
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow:unset
}

Langkah selanjutnya, cari kode seperti ini: #share-container, yang nantinya akan terlihat kodenya kurang lebih seperti dibawah ini:

#share-container {
margin: 20px auto 30px;
overflow: hidden;
}

Hapus dan gantikan kode diatas dengan kode dibawah ini:


Selesai. sampai tahap ini tombol share anda bakalan jadi sticky atau melayang. Namun agar tampilan antara tombol share dan tombol back to top tidak terlihat tumpang tindih dan menjadi rapi, anda bisa sedikit menaikan tombol back to top nya keatas. Caranya:

Cari kode .back-to-top maka akan terlihat kode kurang lebih seperti dibawah ini:

.back-to-top {
position: fixed !important;
    position: absolute;
    bottom: 25px;
    right: 20px;
    z-index: 998;
}

Ubah bagian bottom: 25px; menjadi bottom: 55px; Selesai.

Semoga bisa bermanfaat untuk anda.Jika ada pertanyaan lainnya silahkan ajukan dikolom komentar.

Terima kasih sudah berkunjung..

Belum ada Komentar untuk "Tutorial Lengkap Merubah Tampilan Template Blog Viomagz"

Posting Komentar

Berkomentar menggunakan Akun Gmail agar mendapat notifikasi balasan dari Admin ^_^

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel