Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blog / Template / Tutorial

Cara Menambahkan Fitur Dark Mode Pada Template Blogger VioMagz v.4.4.0

Oleh Dicky Imansyah Posting Komentar
Selamat datang para pembaca setia it-ilmu.com, pada artikel kali ini penulis akan membahas sedikit apa itu VioMagz? VioMagz merupakan salah satu template atau tema buatan Mas Sugeng (admin sugeng.id) yang sangat terkenal di kalangan blogger indonesia. Kenapa penulis hanya membahas template ini? karena menurut penulis template VioMagz memiliki fitur/kelebihan yang keren. 
Berikut fitur/kelebihan yang diberikan oleh template VioMagz :

Fitur/Kelebihan dari Template VioMagz

  • 100% Responsive di semua ukuran layar perangkat (komputer, laptop, tablet, handphone)
  • Loading halaman cepat tanpa menghilangkan salah satu elemen yang ada di template
  • Template VioMagz telah dioptimalkan ke SEO
  • Desain tampilan template mobile friendly, rapih dan terlihat modern menyesuaikan trend saat ini
  • Terdapat fitur Ads Optimized yang berguna untuk meletakkan iklan di bagian tengah atau bawah artikel
  • Anda dapat mengubah tampilan default template dengan mudah
  • Schema Markup berguna untuk membantu mesin pencarian memahami blog anda
  • Auto Readmore (Baca selengkapnya) untuk melanjutkan membaca artikel
  • Pop-up Search Form membantu anda mencari artikel yang dibutuhkan secara cepat
  • Widget Sticky
  • Widget Related Posts
  • Tombol Back To Top berfungsi untuk kembali ke halaman paling atas tanpa scroll manual
  • Tombol Share Responsive Keren
  • Numbered Page Navigation bertujuan agar tampilan artikel lebih sistematis
  • Custom Error page
  • Tanpa Link Credit
Dari fitur/kelebihan diatas, ada satu fitur yang menurut penulis wajib di masukkan atau ditambah yaitu fitur Dark Mode. Apa itu fitur dark mode? fitur dark mode merupakan fitur yang dapat membuat seluruh tampilan template menjadi gelap. keunggulan dari fitur dark mode yaitu meminimalisir kerusakan mata para pembaca dari terang nya kontras sebuah blog atau web yang dikunjungi.

Bagaimana cara menambahkannya? Langsung saja simak tutorial Cara Menambahkan Fitur Dark Mode Pada Template Blogger VioMagz v.4.4.0 :

Pertama - Buka browser anda kemudian ketikkan dikolom pencarian blogger.com

Kedua - Lalu pergi ke Tema >> Custom (Diubah) >> Edit HTML
Ketiga - Salin kode CSS dibawah ini kemudian tekan CTRL+F ketikkan ]]></b:skin> lalu tekan enter. langkah selanjutnya pastekan kode dibawah ini sebelum atau tepat diatas kode ]]></b:skin>

/* dark-mode */
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:45px;top:0;z-index:999;}
.modedark svg{width:25px;height:25px;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{background:#0a0a0a;color:#fff;}
.Night #wrapper{background:#121212;color:#fff;}
.Night #header-container{background:#000;color:#fff;}
.Night #cssmenu ul ul li{background:#121212;}
.Night #cssmenu ul ul li a{color:#fff;background:#121212;}
.Night #cssmenu ul li{background:#000;}
.Night #cssmenu ul li a:hover{color:#B8860B;}
.Night #cssmenu ul li a,#cssmenu ul ul li a{color:#fff;}
.Night .featured-post-info{background:rgba(0,0,0,0.8);}
.Night .featured-post-info h3 a{color:#fff;}
.Night .FeaturedPost h3 a:hover{color:#B8860B;}
.Night .label-info-th{background:rgba(195,195,195);border-radius:4px;}
.Night .label-info-th a{color:#000;}
.Night .label-info-th a:hover{color:#B8860B;}
.Night .social-icon{background:#B8860B;}
.Night .above-post-widget h2{color:#fff;}
.Night .latest-post-title h2{color:#fff;}
.Night h2.post-title a{color:#fff;}
.Night h2.post-title a:hover{color:#B8860B;}
.Night h1.post-title{color:#fff;}
.Night .sidebar h2{color:#fff;}
.Night .sidebar-sticky h2{color:#fff;}
.Night .sidebar h2,.Night .sidebar-sticky h2{border-bottom:2px solid #fff;}
.Night .sidebar h2::before,.Night .sidebar-sticky h2::before{background-color:#fff;}
.Night .artikel-terbaru a{color:#fff;}
.Night .artikel-terbaru a:hover{color:#0078d4;}
.Night .artikel-terbaru ul li::before{color:#fff;}
.Night .PopularPosts ul li a{color:#fff;}
.Night .author-profile >span{color:#595959;}
.Night .tableOfContent{border-color:rgba(255,255,255,.1);background-color:#15202b;}
.Night .tableOfContent #tocContent a{color:#fff;}
.Night .tableOfContent #tocContent ol ul:before,.post-body .tableOfContent ol ol:before,.post-body .tableOfContent #tocContent ul ol:before,.post-body .tableOfContent ul ul:before{border-left:1px dashed rgba(234,228,228,0.2);}
.Night .comments h3{color:#fff;}
.Night #Related ul li a.judul{color:#fff;}
.Night #Related ul li a.judul:hover,#Related ul li:hover a.judul{color:#fff;}
.Night #comments .comment .comment-content,.comment .comment-body{color:#fff;}
.Night #footer-wrapperx{background:#000;}
.Night #HTML637.widget.HTML{background:#0a0a0a;}
.Night #sidebar-wrapper .Profile .individual .profile-info a.profile-link{background:#B8860B;}
.Night #back-to-top{background:#B8860B;color:#fff;}
.Night #footer-navmenu.footer-navmenu.section{background:#0f0f0f;}
.Night #footbawah{background:#121212;color:#fff;}
.Night #footbawah a,.Night .Profile .profile-link,.Night .Profile .profile-name-link,.Night .related-post-style-3 .related-post-item-title{color:#fff;}

Keempat - Berikutnya salin kode HTML dibawah ini dan pastekan diatas kode </header>

<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='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg>
<svg class='closemode' viewbox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg></label></div>

Kelima - Selanjutnya salin kode JavaScript dibawah ini dan pastekan sebelum kode </body>

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

Keenam - Langkah terakhir anda tinggal klik Simpan dan Selesai!

Sekarang anda sudah bisa menambahkan fitur dark mode pada template VioMagz v.4.4.0, Bagaimana mudah bukan? Jika anda belum berhasil ikuti langkah-langkahnya dengan detail. Semoga berhasil dan bermanfaat untuk anda. Sekian pembahasan artikel Cara Menambahkan Fitur Dark Mode Pada Template VioMagz v.4.4.0 dan sampai jumpa di artikel selanjutnya.

Note : Untuk membeli template VioMagz v.4.4.0 bisa klik (Beli Template)

Referensi Source Code : DewaPlokis.Com

Posting Komentar untuk "Cara Menambahkan Fitur Dark Mode Pada Template Blogger VioMagz v.4.4.0"