Redesign Template Blogger VioMagz
Blog Buttatoa | Redesign Template VioMagz - Viomagz adalah salah satu template platform blogger buatan dalam negeri karya seorang Blogger dan Web designer bernama Mas Sugeng. Desain template VioMagz dibuat lebih modern dan juga lebih clean menyesuaikan dengan trend web desain saat ini.
{tocify} $title={Table of Contents}
VioMagz adalah salah satu template blogger yang banyak digunakan oleh blogger asal Indonesia. Selain dari segi desain, kecepatan, serta kemudahan yang disematkan di dalamnya, template ini juga responsif terhadap semua perangkat.
Kelebihan Template VioMagz
Fitur Yang Disematkan
- Responsive 100% untuk semua ukuran layar, baik pada dekstop, tablet, dan smartphone.
- SEO sudah dioptimalkan, jadi kalian sudah tidak perlu repot lagi mengutak atik kode untuk mengoptimalkan website;
- Fast Loading, tetapi tanpa mengorbankan desain yang sudah keren. Dari pengujian Page Speed Insight, mendapatkan skor 95 untuk smartphone dan skor 100 untuk Dekstop;
- Ads Optimized dan terdapat fitur slot iklan yang sudah disediakan otomatis untuk membantu meningkatkan CTR iklan;
- Support Fitur Desainer Tema Blogger, sehingga kalian bisa menyesuaikan perubahan sesuai keinginan dengan mudah melalui menu Desainer Tema Blogger;
- Menggunakan Schema Markup untuk membantu search engine untuk lebih mudah dan cepat memahami dan menelusuri blog kalian;
- Breadcrumb Navigation yang simpel dan mudah dipahami bahkan oleh seorang pemula;
- Memiliki Wideget Sticky, widget Related Posts dibagian Sidebar;
- Memiliki Pop-up Search Form dan Back to Top Button;
- Numbered Page Navigation dan Auto Readmore;
- Tombol Share Responsive yang keren;
- Custom Error page 404, Page Not found;
- Tanpa Link Credit.
Harga Template VioMagz
Awalnya template VioMagz tersedia dalam versi gratis dan premium yang berbayar hingga pada VioMagz v4.6.0. Namun pada pembaharuan ke v4.70 hingga saat ini yang sudah ke versi 4.8.0, VioMagz hanya disediakan dalam versi premium yang dihargai sebesar Rp. 220.000,-.
Redesign Template VioMagz
Template VioMagz sudah memiliki tampilan dan fitur yang sangat keren sama. Namun karena saya suka mengutak atik, dan ingin menyesuaikan dan mendapatkan tema yang sesuai dengan keinginan, maka saya melakukan redesign dengan menambahkan beberapa fitur yaitu:
Menambahkan Fitur Dark Mode (Gelap/Malam)
Tidak seperti Linkmagz yang juga merupakan template buatan Mas Sugeng yang menyediakan fitur Dark Mode, VioMagz tidak memiliki fitur ini. Fitur Dark Mode adalah salah satu fitur yang kini makin berkembang dan banyak Web Designer yang melengkapi dan menggunakan fitur ini pada setiap desain template terbaru mereka.
Mungkin berhubung VioMagz, dilihat dari riwayatnya dirilis pertama kali pada 04 Maret 2018, dimana fitur Dark Mode belum menjadi populer seperti saat ini dan juga sampai saat ini hanya mengalami update perbaikan tentang permasalahan umum blogger, maka fitur ini tidak pernah dipasang.
Untuk itu, saya mencoba melakukan redesign pada template VioMagz ini dengan menambahkan fitur DarkMode tersebut, dengan cara sebagai berikut:
1. Copy script CSS dibawah dan pastekan atau letakkan diatas kode
/* modedark */
.modedark{display:inline-block;float:right;margin-top:11px;position:absolute;right:45px;top:0;z-index:999;}
.modedark svg{width:20px;height:20px;vertical-align:-5px;background-repeat:no-repeat!important;content:'';}
.modedark svg path{fill:#fff;}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear;}
.iconmode:hover{border-radius:100px;}
.check{display:none;}
.modedark .iconmode .openmode{display:block;}
.modedark .iconmode .closemode{display:none;}
.modedark .check:checked ~ .iconmode .openmode{display:none;}
.modedark .check:checked ~ .iconmode .closemode{display:block;}
.Night #header-container{background:#16161a;}
.Night{background:#1c1e21;}
.Night #wrapper{background:#202024;color:#fff;}
.Night h1.post-title{color:#FF8C00;}
.Night h2.post-title a{color:#d8a689;}
.Night h2.post-title a:hover{color:#DAA520;}
.Night #footer-widget-container{background:#1c1e21;}
.Night #cssmenu ul a{background:#16161a;color:#fff;}
.Night #cssmenu ul a:hover{background:#202024;}
.Night #cssmenu ul ul a{background:#1c1e21;color:#fff;}
.Night #cssmenu ul ul a:hover{background:#333333;}
.Night #cssmenu ul li{border-top:0.1px solid rgba(30, 29, 29, 0.9);}
.Night #cssmenu ul ul li a{border-bottom:0.1px solid rgba(21, 23, 24, 0.9);}
.Night .post-body pre {background:#2f2f37;}
.Night .post-body pre code {color:#BFBF90;}
.Night #wrapper .label-info-th{background:#202024;}
.Night .FeaturedPost .featured-post-info{background:rgba(21, 23, 24, 0.9)}
.Night .featured-post-summary{color:#fff;}
.Night .FeaturedPost h3 a{color:#D2691E;}
.Night .FeaturedPost h3 a:hover{color:#FFA500;}
.Night kbd{background:#20242d;}
.Night kbd{color:#BFBF90;}2. Copy script dibawah dan pastekan diatas kode
<script>
//<![CDATA[
$(document).ready(function () {
$("body").toggleClass(localStorage.toggled),
$("#modedark").on("click", function () {
"Night" != localStorage.toggled ? ($("body").toggleClass("Night", !0), localStorage.toggled = "Night", $(".section-center").css("display", "block")) : ($("body").toggleClass("Night", !1), localStorage.toggled = "", $(".section-center").css("display", ""))
}),
$("body").hasClass("Night") ? $("#modedark").prop("checked", !0) : $("#modedark").prop("checked", !1)
});
//]]>
</script>3. Copy script dibawah ini dan letakkan diatas kode
<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/><label class='iconmode' for='modedark'><svg class='openmode' viewbox='0 0 24 24'><path d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z'/></svg><svg class='closemode' viewbox='0 0 24 24'><path d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z'/></svg></label></div>
Menambahkan Fitur Grid Mode
Default dari template VioMagz, hanya memiliki tampilan page home dalam bentuk List dengan posisi vertikal dan tampilan ini membuat postingan sedikit terlihat lebih besar dan memanjang kebawah. Untuk itu saya membuat redsign dengan menambah tampilan bentuk Grid, agar lebih menarik sedikit sehingga postingan akan tampil terlihat lebih banyak.
Penambahan tampilan Grid ini tidak menghapus tampilan List yang ada, jadi kalian akan mendapatkan tampilan List dan Grid. Kalian dan pengunjung blog kalian, dapat melihat page home blog kalian sesuai keinginan. Untuk menambahkan fitur Grid ini, ikuti langkah-langkah berikut:
1. Copy script CSS dibawah dan pastekan atau letakkan diatas kode
/* gridmode */
.menu-gridmode {position:relative;}
.gridmode-switch .switch-title{color:#4169E1}
.gridmode-switch .slider{border:2px solid #4169E1}
.gridmode-switch .slider:before{background:#4169E1}
.gridmode-switch{position:absolute;top:0;right:10px;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}
.gridmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:7px;text-transform:uppercase}
.gridmode-switch .switch-title:before{content:"List Mode"}
.gridmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle}
.gridmode-switch .switch input{opacity:0;width:0;height:0}
.gridmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.gridmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s}
.gridmode-switch input:checked+.slider{background-color:#97230a;border:2px solid #4169E1}
.gridmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)}
body.gridmode .gridmode-switch .switch-title:before{content:"Grid Mode"}
body.gridmode .post-outer {width: calc(50% - 10px);float:left;margin: 0 5px 10px 0px;}
body.gridmode .post {margin-bottom: 10px;height: 400px;}
body.gridmode .img-thumbnail-wrap{width: 95%!important;margin-bottom: 10px;margin-right: 15px}
body.gridmode h2.post-title {text-align:left;margin-left:0}
body.gridmode #blog-pager{padding:40px 0}
@media screen and (max-width: 480px){
.post-snippet{margin-left: 0;margin-right: 0}
body.gridmode .post-outer{width:100%}
body.gridmode .post{height:auto}
body.gridmode .img-thumbnail-wrap{width: 100%!important;margin:0 0 5px 0}
}2. Cari kode
<b:if cond='data:view.isMultipleItems'>
<div class='menu-gridmode'>
<div class='gridmode-switch'><span class='switch-title'/><label class='switch'><input aria-label='checkbox' class='gridcheckbox' onclick='gridMode()' type='checkbox'/><span class='slider'/></label>
</div>
</div>
</b:if>3. Copy script dibawah dan pastekan dibawah atau setelah kode
<b:if cond='data:view.isMultipleItems'>
<script>
(localStorage.getItem('modegrid')) === 'gridmode' ? document.querySelector('body').classList.add('gridmode') : document.querySelector('body').classList.remove('gridmode')
</script>
</b:if>4. Copy script dibawah dan pastekan diatas atau sebelum kode
<b:if cond='data:view.isMultipleItems'>
<script>//<![CDATA[
function LMcheckCheckbox(){document.querySelectorAll(".gridcheckbox").forEach(function(e){"gridmode"===localStorage.getItem("modegrid")?e.checked=!0:e.checked=!1})}function gridMode(){localStorage.setItem("modegrid","gridmode"===localStorage.getItem("modegrid")?"light":"gridmode"),"gridmode"===localStorage.getItem("modegrid")?document.querySelector("body").classList.add("gridmode"):document.querySelector("body").classList.remove("gridmode"),LMcheckCheckbox()}function gridModeHide(){document.querySelectorAll(".gridmode-switch").forEach(function(e){e.parentNode.removeChild(e)})}LMcheckCheckbox(),"undefined"==typeof AzidBloggerSetting&&(AzidBloggerSetting={tombolGridmode:!0}),0==AzidBloggerSetting.tombolGridmode&&gridModeHide();
//]]></script>
</b:if>5. Selanjutnya cari kode
.img-thumbnail-wrap{position:relative;float:left;width:39%;margin-top:3px;margin-right:16px;overflow:hidden}6. Cari kode
.post-snippet{margin-left:0%;margin-right:10px} 
Menampilkan First Image Artikel Diatas Judul
Hampir sama dengan redesign template JetTheme👀 yang sudah saya posting sebelumnya, kali ini akan membuat first image dalam artikel untuk diletakkan diatas judul artikel. Caranya pun cukup mudah, yaitu:
1. Copy script CSS dibawah dan pastekan atau letakkan diatas kode
/* First Image */
.img-post {
width:100%;
height:auto;
margin:0 auto;
padding:0;
border-radius:10px;
margin-bottom:15px;
position:relative;
}
.img-post img {
width:100%;
max-width:100%;
height:auto;
max-height:405px;
margin:0;
}
.post-body .separator:nth-child(1) {display:none}2. Cari kode
<b:if cond='data:view.isPost'><div class='img-post'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,675)' expr:title='data:post.title'/>
</div></b:if>3. Copy script dibawah dan pastekan diatas atau sebelum kode
<script>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>
Menambahkan Syntax Highlighter
Syntax Highlighter biasanya digunakan untuk menyematkan suatu kode script, makro dan lainnya. Kali ini saya akan menambahkan fitur tersebut dengan memberikan efek scrool left right dan drop down, double klik to select and copy. Adapaun cara menambahkannya sebagai berikut:
1. Copy script CSS dibawah dan pastekan atau letakkan diatas kode
.post-body pre {background-color: #f2f2f2; border-left: 5px solid #008c5f;
padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none;
}
.post-body pre code {color: #333333;font-size: 13px;
max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}
pre:before{position: absolute;content:'Double click to select & copy';
background: linear-gradient(to bottom, #0033cc 0%, #993300 100%);
display:blok;top:10px;right:10px;color:#fff;font-family:Google Sans;
font-size:80%;text-align:center;width:160px;border-radius:22px;
padding:6px;line-height:1;visibility:hidden;}
pre:hover:before{visibility:visible; transition:all .3s}2. Copy script dibawah dan pastekan diatas atau sebelum kode
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('kbd,pre');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
alert("Teks Berhasil Disalin Ke Clipboard.");
}, false);
}
//]]>
</script>3. Untuk menggunakan syntax highlighter diatas, kalian masuk kedalam editor postingan lalu pilih Tampilan HTML lalu tambahkan kode script berikut ini :
<pre><code>Ganti Text Ini</code></pre>
Kesimpulan
Nah itulah beberapa modifikasi yang saya lakukan pada template VioMagz v4.8.0. Fitur yang ditambahkan adalah Dark Mode (Gelap/Malam), tampilan Grid Mode, First Image diatas judul, dan Syntax Highlighter. Adapun redesign dan penambahan fitur lainnya kalian bisa cek di Label Redesign Template👀.
Update
Saat ini VioMagz sudah diperbarui ke versi 4.9.0. Di versi ini, JQuery dihapus, sehingga untuk mengaktifkan fitur redesign Dark Mode diatas, kalian harus menambahkan JQuery dibawah ini kedalam template dan letakkan di bawah kode
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Post a Comment for "Redesign Template Blogger VioMagz"