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.

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:

<script> var widgetBacaJuga = false; var relatedPosts = false; var numberedPagination = true; </script>

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

2. Membuat Header Navigasi Tidak Sticky

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

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

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

<b:include data='post' name='postthumbnail'/>

4. 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>.

<style> /*Darkmode*/ .nav-secondary {position:absolute;top:15px;right:70px;} .darkmode-switch .switch-title{color:#fff} .darkmode-switch .slider{border:2px solid #fff} .darkmode-switch .slider:before{background:#fff} .darkmode-switch .switch:hover .slider:before{background:#ffffff} .darkmode-switch{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:0} .darkmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:4px;text-transform:uppercase} .darkmode-switch .switch-title:before{content:"Dark Mode"} .darkmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle} .darkmode-switch .switch input{opacity:0;width:0;height:0} .darkmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s} .darkmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s} .darkmode-switch input:checked+.slider{background-color:#428c2f;border:2px solid #fff} .darkmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)} @media only screen and (max-width: 800px){ .header{right:110px!important} .nav-secondary{right:60px} } @media screen and (max-width: 480px){ .darkmode-switch .switch-title:before{display:none} } body.darkmode{background:#353535;color:#eee} body.darkmode a:link{color:#eee;-webkit-transition:all .2s;transition:all .2s} body.darkmode a:visited{color:#eee} body.darkmode a:hover{color:#fff} body.darkmode #wrapper {background: #292e38;} body.darkmode #blog-pager a,body.darkmode #Label1 a,body.darkmode .FeaturedPost h3 a{color:#353535;} body.darkmode #footer-widget-container {background:#1d2129;} body.darkmode .share-this-pleaseeeee {background:#292e38;} body.darkmode .related-post h4{background:#292e38;} body.darkmode #label-info-th {background:#1d2129;} body.darkmode body {background:#1d2129;} body.darkmode .post-body {color:#fff;background:#292e38;} body.darkmode .post-body table.tr-caption-container td{color:#fff;} body.darkmode .post-body table td{background:no-repeat;border:1px solid #f5f5f5;padding:10px;text-align:left;vertical-align:top} body.darkmode #baca-juga h2 {color:#cccccc;background:#1d2129} body.darkmode .label-info-th a {color:#cccccc;background:#3d4658} body.darkmode .post-info {color:#cccccc} body.darkmode {background:#1d2129;} body.darkmode h2.post-title a, body.darkmode .comments .comments-content .comment-content{color:#fff;} body.darkmode h2.post-title a:hover {color:#b7b2b2} body.darkmode .post-title {color:#fff} body.darkmode ul.nav-social {color:#1d2129} body.darkmode .post-snippet {color:#cccccc} body.darkmode #Label1{background:#292e38;} body.darkmode .post{background:#292e38;border-bottom-color: #252a33;} body.darkmode .item-title a{color:#fff} body.darkmode .latest-post-title h3{border-bottom-color: #313640;} body.darkmode .list-label-widget-content ul li {border-bottom-color: #313640;} body.darkmode .img-thumbnail img {background: #252931 linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;} body.darkmode #footer-container{background:#12161f;} body.darkmode #footer-navmenu{background:#171b25;} body.darkmode .sidebar-sticky h3 {color:#fff;border-bottom-color: #313640;} body.darkmode .latest-post-title h3 {color:#fff;border-bottom-color: #313640;} body.darkmode .above-post-widget h3 {color:#b7b7b7;border-bottom-color: #313640;} body.darkmode .sidebar h2,body.darkmode .sidebar-sticky h2, body.darkmode .latest-post-title h2, body.darkmode .above-post-widget h2, body.darkmode .comments h3{color:#fff;border-bottom-color: #313640;} body.darkmode .breadcrumbs {color:#fff;border-bottom-color: #313640;} body.darkmode .btnsocialshare {background:#383c44;} body.darkmode .label-line::before{background: #1d2129;} body.darkmode .label-line-c::before {background: #333740;} body.darkmode a.showcontent:hover {background: #373a42;} body.darkmode a.showcontent{background: #292e38} body.darkmode .related-post-style-3 .related-post-item-title {color: #bbb;} body.darkmode #baca-juga ul {border: 2px solid #333740;} body.darkmode #baca-juga h2 {border: 2px solid #292e38;} body.darkmode #comments a.hiddencontent {background: #424854;} body.darkmode .comments .comments-content .comment-thread ol {background: #292e38;} body.darkmode .comments .comments-content .inline-thread {background: #292e38;} </style>

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

<!-- tampilkan script darkmode tepat di bawah tag body --> <script> (localStorage.getItem('mode')) === 'darkmode' ? document.querySelector('body').classList.add('darkmode') : document.querySelector('body').classList.remove('darkmode') </script>

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

<script>//<![CDATA[ function LMcheckCheckbox(){document.querySelectorAll(".checkbox").forEach(function(e){"darkmode"===localStorage.getItem("mode")?e.checked=!0:e.checked=!1})}function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("body").classList.add("darkmode"):document.querySelector("body").classList.remove("darkmode"),LMcheckCheckbox()}function darkModeHide(){document.querySelectorAll(".darkmode-switch").forEach(function(e){e.parentNode.removeChild(e)})}LMcheckCheckbox(),"undefined"==typeof AzidBloggerSetting&&(AzidBloggerSetting={tombolDarkmode:!0}),0==AzidBloggerSetting.tombolDarkmode&&darkModeHide(); //]]></script>

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.

<script> var AzidBloggerSetting = {//True or False tombolDarkmode : true, }; </script>

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

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:

#share-container { width:100%; display: inline-block; flex-wrap: nowrap; align-items: center; background-color: #ffffff; margin-top: 30px; padding: 10px 0px 0px; position: sticky; position: -webkit-sticky; bottom: 0px; z-index: 1; }

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..

Berbagi :