×

Owner / Author / Admin / etc

    Muhamad Arsad    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Blogger, Template, Widget, Internet, dan juga berbagai tips-tips menarik lainnya."

2 Cara Membuat Mode Malam Di Blogger


Beberapa waktu ini mode dark atau mode malam sangat populer di dunia blogger dan banyak sekali yang memasang nya di template mereka, nah disini saya akan memberikan 2 Cara Memasang Dark Mode atau Mode Malam di Blogger

Secara fungsi mode malam ini bertujuan untuk memberikan kenyamanan bagi pengunjung untuk membaca di malam hari

Mode malam yang saya berikan tutorial nya ini sudah menggunakan chookies jadi jika pengunjung sudah mengaktifkan mode malam maka jika membuka artikel berikut nya akan otomatis masih menggunakan mode malam.

Cara Memasang Dark Mode Versi 1

1. Seperti biasa masuk ke settingan template sahabat kemudian " Edit HTML "
2. Kemudian cari kode </header> lalu pastekan kode dibawah ini di atasnya

<div class="googlebtn">
<input class="togglenight togglenight-switch" id="modedark" type="checkbox" />
<label class="togglenight-btn" for="modedark" title="Mode Dark"></label></div>

3. Kemudian letakan kode CSS dibawah ini di atas kode ]]></b:skin> atau </style>

/* Warna Mode Malam */
.Night body {background:#202125} .Night #wrapper{background:#202125}.Night #HTML3{background:#202125}.Night .share-this-pleaseeeee{background:#202125}.Night .related-post h4{background:#202125}.Night #label-info-th{background:#202125}.Night .post-body{color:#ccc}.Night #baca-juga h2{color:#ccc;background:#202125}.Night .label-info-th a{color:#ccc;background:#3d4658}.Night li.recent-posts a{color:#ccc}.Night .recent-posts-title h2{color:#ccc}.Night .widget-content{color:#ccc;background:#202125}.Night .post-info{color:#ccc}.Night h2.post-title a{color:#9e9e9e}.Night h2.post-title a:hover{color:#eee}.Night .post-title{color:#9e9e9e}.Night ul.nav-social{color:#202125}.Night .post-snippet{color:#ccc}.Night #Label1{background:#202125}.Night .blog-posts .post-outer .post{background:#202125;border-bottom-color:#252a33}.Night .PopularPosts h2{background:#202125}.Night .latest-post-title h2{background:#202125;border-bottom-color:#313640}.Night .newspaptext{color:#9e9e9e}.Night .PopularPosts h2 span{color:#9e9e9e}.Night .list-label-widget-content ul li{border-bottom-color:#313640}.Night .img-thumbnail img{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,#313640 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}.Night .comments .comment-block {background:#12161f}.Night #header-container{background:rgba(32, 33, 36,.95);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2)}.Night .comments .comment-block{background:#12161f}.Night #header-wrapper{background:rgba(32, 33, 36,.95);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2)}.Night .sidebar h2{color:#b7b7b7}.Night .sidebar-sticky h2{color:#b7b7b7}.Night .latest-post-title h2{color:#b7b7b7}.Night .above-post-widget h2{color:#b7b7b7;border-bottom-color:#313640}.Night .comments h3{color:#b7b7b7;}.Night .breadcrumbs a{color:#eee}.Night .btnsocialshare{background:#383c44}.Night .label-line::before{background:#202125}.Night .label-line-c::before{background:#333740}.Night a.showcontent:hover{background:#373a42}.Night a.showcontent{background:#202125} .Night .comments .comments-content .comment-content{color:#fff}.Night div#Label1 h2{border-bottom:1px solid #eee;background:#202125}.Night .related-post-style-3 .related-post-item-title{color:#bbb}.Night #baca-juga ul{border:2px solid #eee}.Night #comments a.hiddencontent{background:#424854}.Night .comments .comments-content .comment-thread ol{background:#202125}.Night .comments .comments-content .inline-thread{background:#202125}.Night.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a {color:#eee;background:transparent;border:1px solid #eee}
.Night .label-size{color:#eee;border:1px solid #eee}
.Night .post-bottom a,.post-label a{color:#eee}
/* Toggel */
.googlebtn{position:absolute;right:50px;top:4px;height:40px;line-height:40px;text-align:center;display:inline-block;align-items:center;z-index:10}
.togglenight{display:none;} .togglenight + .togglenight-btn{outline:0;display:inline-block;width:35px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%} .togglenight-switch + .togglenight-btn{background:#888;border-radius:99em;transition:all .4s ease} .togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);background-color: #333;}
.togglenight-switch:checked + .togglenight-btn{background:#888} .togglenight:checked + .togglenight-btn:after{content:'';left:50%;background:#222 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;background-color:#333;}

4. Kemudian tambahkan kode Javascript dibawah ini di atas kode </body>

<script>
//<![CDATA[
// Google Toggle
toggleClass("modedark")}),$("body").toggleClass(localStorage.toggled),$("#modedark").click(function(){"modedark"!=localStorage.toggled?($("body").toggleClass("modedark",!0),localStorage.toggled="modedark"):($("body").toggleClass("modedark",!1),localStorage.toggled="")});
//]]>
</script>
<script>
//<![CDATA[
// Malam Kelabu
$(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>

5. Kemudian simpan dan lihat hasil nya.

Cara Memasang Mode Malam Versi 2

1. Silahkan login di blogger buka menu Template kemudian " Edit HTML "
2. Silhkan Copy kode dibawah ini dan tatuh tempat diatas kode </sytle> atau ]]></b:skin>

/* Button Dark Mode */
.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:90px;top: 0;z-index:999;}
.modedark svg{
width:24px;
height:24px;
vertical-align: -5px;
background-repeat: no-repeat !important;
content: '';
}
.modedark svg path{
fill:#fff;
}
.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: 8px;
background-position: center;
transition: all .5s linear;
}
.iconmode:hover{
border-radius: 100px;
background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 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;
}
/* Warna Dark Mode */
.Night #wrapper {background:#1d2129;}
.Night body {background:#1d2129;}
.Night #HTML3 {background:#1d2129;}
.Night {background:#1d2129;}
.Night .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;}
.Night .post{background:#292e38;border-bottom-color: #252a33;}
.Night h2.post-title a {color:#fff;}
.Night h2.post-title a:hover {color:#17a2b8}
.Night .post-snippet {color:#b7b7b7;}
.Night .post-info {color:#b7b7b7;}
.Night .post-body {color:#cccccc;}
.Night .author-profile .writer-name {color:#17a2b8;}
.Night .writer > span {color:#fff;}
.Night .breadcrumbs {background:#292e38;color:#fff;}
.Night .breadcrumbs a:hover {color:#17a2b8;}
.Night .latest-post-title h2 {background:#292e38;color:#fff;}
.Night .PopularPosts h2 {background:#292e38;color:#fff;}
.Night .sidebar h2 {background:#292e38;color:#fff;}
.Night .comments h3 {background:#292e38;color:#fff;}
.Night h1.post-title {color:#17a2b8;}
.Night .contact-form-error-message-with-border {color: #b7b7b7;}
.Night .contact-form-email {border: 1px solid #b7b7b7;}
.Night .contact-form-name {border: 1px solid #b7b7b7;}
.Night .contact-form-email-message {border: 1px solid #b7b7b7;}
.Night div.Label h2 {border-bottom: 1px solid rgba(255,255,255,0.12);}
.Night div.Label {background:#292e38}
.Night .list-label-widget-content ul li a {background:#292e38}
.Night .list-label-widget-content ul li a:hover{background:#3d4658}
.Night .related-post-style-3 .related-post-item-title {color:#b7b7b7;}
.Night .comments .comments-content .icon.blog-author::after {color: #b7b7b7}
.Night .comments .comments-content .user {color: #b7b7b7}
.Night .comments .comment-block {background: #292e38;}
.Night .comments .thread-toggle {background: #292e38;}
.Night .comments .comment .comment-actions a {background: #292e38;}
.Night .comments .continue a {background: #292e38;}
.Night .comments .comments-content .comment-content {color: #b7b7b7}
.section-center{
position: fixed;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
display: none;
overflow: hidden;
z-index: 5;
pointer-events: none;
box-shadow: 0 0 50px 5px rgba(255,148,0,.1);
transform: translate(-50%, -50%);
}
.section-center {
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}
.shooting-star {
z-index: 2;
width: 1px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
position: absolute;
top: 0;
left: -70px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
animation: animShootingStar 6s linear infinite;
-webkit-transition: all 2000ms linear;
transition: all 2000ms linear;
}
.shooting-star-2 {
z-index: 2;
width: 1px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
position: absolute;
top: 0;
left: 200px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
animation: animShootingStar-2 9s linear infinite;
-webkit-transition: all 2000ms linear;
transition: all 2000ms linear;
}
.star {
z-index: 2;
position: absolute;
top: 185px;
left: 25px;
background-image: url('https://ivang-design.com//svg-load/air/star.png');
background-size: 15px 15px;
width: 15px;
height: 15px;
opacity: 0.4;
animation: starShine 3.5s linear infinite;
-webkit-transition: all 1200ms linear;
transition: all 1200ms linear;
}
.star.snd {
top: 100px;
left: 310px;
animation-delay: 1s;
}
.star.trd {
top: 130px;
left: 100px;
animation-delay: 1.4s;
}
.star.fth {
top: 190px;
left: 200px;
animation-delay: 1.8s;
}
.star.fith {
top: 85px;
left: 1080px;
animation-delay: 2.2s;
}
@keyframes animShootingStar {
from {
transform: translateY(0px) translateX(0px) rotate(-45deg);
opacity: 1;
height: 5px;
}
to {
transform: translateY(1280px) translateX(1280px) rotate(-45deg);
opacity: 1;
height: 800px;
}
}
@keyframes animShootingStar-2 {
from {
transform: translateY(0px) translateX(0px) rotate(-45deg);
opacity: 1;
height: 5px;
}
to {
transform: translateY(1920px) translateX(1920px) rotate(-45deg);
opacity: 1;
height: 800px;
}
}
@keyframes starShine {
0% {
transform: scale(0.3) rotate(0deg);
opacity: 0.4;
}
25% {
transform: scale(1) rotate(360deg);
opacity: 1;
}
50% {
transform: scale(0.3) rotate(720deg);
opacity: 0.4;
}
100% {
transform: scale(0.3) rotate(0deg);
opacity: 0.4;
}
}

2. Kemudian cari kode </header> dan taruh kode dibawah ini tepat di atas kode diatas
<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='M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'></path></svg>
<svg class='closemode' viewBox='0 0 24 24'><path d='M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'></path></svg>
</label>
</div>

3. Kemudian cari kode </body> kemudian pastekan kode dibawah ini tepat diatas nya

4. Kemudian simpan tema dan lihat hasilnya.

Penutup

Nah itulah 2 cara membuat atau memasang mode malam di blogger sekian dari saya semoga bermanfaat bagi teman - teman blogger semua.
Admin Ganteng Tapi Jomlo :v
  • Facebook
  • Twitter
  • Instagram
  • 0 Response to "2 Cara Membuat Mode Malam Di Blogger"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel