Skip to content Skip to sidebar Skip to footer

Cara Membuat Mode Dark Ala Template Blogger Invert Pro


Mode dark pada sekarang ini sangat populer, banyak situs besar yang sudah menggunakan mode dark disitus mereka seperti Facebook, Twitter, YouTube dan Whatsaap. Pada artikel kali ini saya akan share tutorial Cara Membuat Mode Dark Ala Template Invert Pro (IDNTheme).

Dengan memiliki fitur mode dark ini tentu akan membuat para pembaca nyaman di apalagi untuk pembaca pengguna mobile. Dengan mengaktifkan mode dark yang ada pada blog kita maka akan membuat baterai pada smartphone menjadi lebih hemat juga.

Mode Dark ini sebenarnya sudah lama ada semenjak awal membuat blog itu sudah ada tutorial membuat mode dark ini namun karena banyak situs besar yang menggunakan fitur ini akhirnya menjadi populer jadi banyak para developer template Blogger yang membuat tutorial seperti ini.

Cara Membuat Mode Dark Ala Template Blogger Invert Pro

Bagaimana caranya membuat mode Dark ini ala template Blogger Invert Pro ini jika kalian penasaran bisa simak tutorial berikut ini :

Langkah Pertama

Langkah pertama yang harus dilakukan adalah kalian masuk ke akun blogger kalian kemudian pilih menu Tema, kemudian klik Edit HTML. Masukkan kode CSS ini di atas </style> atau ]]></b:skin> pada template kalian

/* Dark Mode */ .modedark{display:inline-block;float:right;position:absolute;right:65px;top:16px;z-index:99} 
.modedark svg{content:'';width:22px;height:22px;vertical-align:-5px;background-repeat:no-repeat}
.modedark svg path{fill:#222}.modedark .check:checked ~ .NavMenu{opacity:1;visibility:visible;top:45px;min-width:200px;transition:all .3s ease;z-index:2}
.iconmode{cursor:pointer;display:block;padding:0;background-position:center;transition:all .5s linear}.iconmode:hover{border-radius:100px;background:rgba(0,0,0,.1) radial-gradient(circle,transparent 2%,rgba(0,0,0,.1) 2%) center/15000%}.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} body.Night{background:#1c2733;color:rgba(255,255,255,.7)}.Night .post,.Night .post-thumbnail,
.Night .sidebar .widget,.Night .menuheadx,
.Night #footer-wrapper,.Night #blog-pager,
.Night #subscribe-box .emailfield input,
.Night .post-share-wrap{background:#263545;color:rgba(255,255,255,.85)}.Night #csxmenus ul ul li a,.Night h1,.Night h2,.Night h3,.Night h4,
.Night h5,.Night h6,
.Night #searchla input[type="search"],.Night a,
.Night .related-post-style-2 .related-post-item-title,
.Night .sidebar12:hover a,.Night .card-author a,
.Night #bp_toc td a,
.Night #bp_toc td a:hover,.Night .breadcrumbs a:hover,.Night .related-post-style-2 .related-post-item-title:hover,.Night #subscribe-box .emailfield input:focus{color:#fff}.Night #csxmenus > ul > li > a:before{background:#f39c12}.Night #subscribe-box 
.emailfield .submitbutton,.Night #subscribe-box .emailfield 
.submitbutton:active,.Night #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#263545}.Night #subscribe-box 
.emailfield input{background:rgba(28,39,51,0.85);border-color:transparent}
.Night #first-invertpro{background:#1c2733}.Night #csxmenus ul ul{background:rgba(38,53,69,.95)}.Night #HTML98{border:1px double #263545}.Night #subscribe-box p{color:rgba(255,255,255,.7)}
.Night .post h2.post-title.entry-title a,.Night 
.post-infoku a.author-meta.g-profile,.Night .post-timestamp i,
.Night .post-infoku a,.Night #csxmenus > ul > li > a,
.Night .sidebar h2,.Night .sidebar h3,.Night .sidebar h4,
.Night #PopularPosts1 li a,.Night .sidebar512 a,.Night #footer a,
.Night .list-label-widget-content ul li a,.Night .search-icon a,
.Night span.toc-note,
.Night .post-body table td,.Night .post-body table caption,
.Night #csxmenus a:hover,.Night #csxmenus .notif-show:hover,
.Night #csxmenus > ul > li:hover > a,.Night #csxmenus ul li.active a{color:#fff}.Night 
.sidebar512,.Night .related-post h4:hover{background-color:transparent;color:#fff}.Night .sidebar12{background-color:transparent;color:#fff;border:2px solid rgba(255,255,255,.15);line-height:31px}.Night .sidebar12:hover,.Night #footer .footer-nav li a:hover{background-color:#1c2733;color:#fff}.Night #footer .footer-nav li a,.Night .related-post h4{background-color:transparent;color:#fff;border:2px solid rgba(255,255,255,.15)}.Night .post h2.post-title.entry-title a:hover,.Night #PopularPosts1 ul li a:hover{color:#fff;text-decoration:underline}.Night .post-body .hljs{background:#1c2733}.Night #searchla input[type="search"]::placeholder{color:#fff}.Night #searchla input[type="search"]:-ms-input-placeholder{color:#fff}.Night #searchla input[type="search"]::-ms-input-placeholder{color:#fff}body.Night svg.openmode path,.Night svg path{fill:#fff}.Night a:hover,.Night .post-infoku a:hover{color:#fdcb6e}.Night #searchla.open{background:rgba(46,65,84,.95);border-color:transparent}.Night #ContactForm1_contact-form-name,.Night #ContactForm1_contact-form-email,.Night #ContactForm1_contact-form-email-message{background:#1c2733;color:#fff}.Night #bp_toc td.toc-header-col1,.Night #bp_toc td.toc-header-col2,.Night #bp_toc td.toc-header-col3{border:1px solid rgba(255,255,255,0.05);background:#1c2733}.Night .post-body table tr:nth-of-type(odd) td,.Night .disqusshows,.Night #disqus_thread,.Night #disqusshow:hover,.Night #disqusshow:active{background-color:#263545;color:#fff;border-color:rgba(255,255,255,0.03)}.Night .post-body table tr:nth-of-type(even) td{background-color:#1c2733}.Night #bp_toc table{background:transparent;border-color:transparent}.Night .post-shareku,.Night .sidebar ul li,.Night #csxmenus ul ul li a{border-color:rgba(255,255,255,.05)}.Night #disqusshow:hover{border-color:rgba(255,255,255,.15)}.Night .post-body blockquote{background:#0984e3;border-color:transparent;color:#fff}.Night #socialcounterd ul li a.social_item.social_codepen{background:#e84393}.Night .post-body blockquote kbd{background:#fff;color:#0984e3}.Night #related-post li:hover:after{color:#fdcb6e}.Night kbd{background:#1c2733;color:rgba(255,255,255,.85)}.Night #csxmenus .notif-code a{color:#fff}.Night #csxmenus .notif-show .sindicat{background:#fdcb6e}.Night .related-post-style-2 .related-post-item-thumbnail{border:2px solid rgba(0,0,0,.25)}.Night kbd:before{background:linear-gradient(45deg,rgba(255,101,165,1) 0,rgba(255,101,165,1) 13%,rgba(255,107,154,1) 35%,rgba(255,134,106,1) 100%)}.Night .post-body .hljs mark{background-color:#2e86de}.Night .post-body table th{background:#1c2733;color:#fff;border:1px solid rgba(255,255,255,0.03)}.Night .post-body table{border-radius:8px}.Night .breadcrumbs{background:#263545;color:rgba(255,255,255,.85)}.Night .breadcrumbs,.Night .breadcrumbs a,.Night .breadcrumbs svg path{fill:rgba(255,255,255,.85);color:rgba(255,255,255,.85)}.Night .nubie-credit i.fa.fa-heart{color:rgba(255,255,255,.85)}.Night #searchla .close,.Night #searchla .close:hover{background:rgba(0,0,0,0.25);color:#fff}.Night .head-text.onex h3{color:#f39c12}

Setelah itu cari kode </header> kemudian paste kode HTML di bawah ini tepat diatasnya

<div class='modedark' title='Switch Mode'> <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'></path> </svg>
<svg class='closemode' 
viewBox='0 0 24 24'> <path d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z'><
/path>
</svg>
</label>
</div>

Selanjutnya masukan kode Java Script ini diatas kode </body> pada template kalian 

<script>// Night Mode $("#modedark").click(function(){$("body").toggleClass("Night")})
,$("body").
toggleClass(localStorage.toggled),
$("#modedark").click(function(){"Night"!=localStorage.
toggled?($("body")
.toggleClass("Night",!0)
,localStorage.toggled="Night"):($("body").toggleClass
("Night",!1),localStorage.toggled="")}); //]]> </script>

Kemudian klik Simpan Template. Tutorial ini saya ambil script nya melalui template arlinacode, dan mungkin akan saya terapkan juga di blog saya ini. 

Demikian tutorial Cara Membuat Mode Dark Ala Template Blogger Invert Pro, selamat mencoba. 


Post a Comment for "Cara Membuat Mode Dark Ala Template Blogger Invert Pro"