Cara membuat Fitur Dark Mode (Mode Malam) di Blogger
Cara membuat Fitur Dark Mode (Mode Malam) di Blogger - Perkembangan template blog seiring berkembangnya trend desain yang elegant dan enak untuk di pandang,mengharuskan bagi para pembuat template terus mengikuti trend yang berkembang dan menghadirkan template blogger baru yang lebih kaya fitur dan desain responsive.
Salah satu fitur yang belakangan ini menjadi trend dikalangan blogger yaitu adanya fitur mode malam atau Dark mode.Tahu kan,apa itu dark mode.Jika kalian kebanyakan menemukan website atau blog dengan tampilan yang cerah pasti sudah tidak asing lagi.Namun kalau kalian seorang yang suka ngulik dan membaca hal hal menarik seperti contoh tips and trick pasti kalian akan membacanya dengan teliti agar berhasil.
Nah terlalu sering memandang layar ponsel dengan intensitas cahaya pada layar ponsel yang begitu terang dapat berdampak pula pada penglihatan kalian,maka dari itu dengan adanya fitur dark mode atau kode malam pada template blog diharapkan bisa membuat kalian sebagai pembaca merasa nyaman saat membaca artikel pada malam hari atau pada saat kalian berada pada tempat yang kurang cahaya.
Namun sayang masih banyak template blogger premium yang belum menyediakan fitur dark mode atau mode malam,adapun template premium yang sudah menyediakan fitur dark mode atau kode malam salah satunya yaitu template LinkMagz buatan mas Sugeng.Tapi tenang saja karena kalian bisa menambahkan fitur dark mode ini tampa harus membeli template premium baru yang menyediakan fitur tersebut.
Bagaimana caranya ? kalian bisa menyimak artikel ini,dalam artikel ini syatemauni akan membagikan cara memasang mode malam pada tempkate blogger yang kalian gunakan.Tanpa basa basinlagi langsung saja ke langkah langkahnya.
Cara membuat Fitur Dark Mode (Mode Malam) di Blogger
</* Button Dark Mode systemauni */ .modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:75px;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 systemauni */ .Night #wrapper {background: #292e38;} .Night #HTML3 {background:#1d2129;} .Night #footer-widget-container {background:#1d2129;} .Night .share-this-pleaseeeee {background:#292e38;} .Night .related-post h4{background:#292e38;} .Night #label-info-th {background:#1d2129;} .Night body {background:#1d2129;} .Night .post-body {color:#cccccc} .Night #baca-juga h2 {color:#cccccc;background:#1d2129} .Night .label-info-th a {color:#cccccc;background:#3d4658} .Night li.recent-posts a{color:#cccccc} .Night .recent-posts-title h2{color:#cccccc} .Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc} .Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129} .Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129} .Night .post-info {color:#cccccc} .Night {background:#1d2129;} .Night h2.post-title a {color:#9e9e9e;} .Night h2.post-title a:hover {color:#f17f43} .Night .post-title {color:#1e90ff} .Night ul.nav-social {color:#1d2129} .Night .post-snippet {color:#cccccc} .Night #ignielNewsletter {background:#292e38;} .Night #Label1{background:#292e38;} .Night .post{background:#292e38;border-bottom-color: #252a33;} .Night .PopularPosts h2{background:#343944;} .Night .latest-post-title h2{background:#292e38;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%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;} .Night #ignielNewsletter .medsos__ {border-top-color: #313640;} .Night #footer-container{background:#12161f;} .Night #footer-navmenu{background:#171b25;} .Night .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;} .Night .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;} .Night .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;} .Night .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;} .Night .comments h3 {color:#b7b7b7;border-bottom-color: #313640;} .Night .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;} .Night .btnsocialshare {background:#383c44;} .Night .label-line::before{background: #1d2129;} .Night .label-line-c::before {background: #333740;} .Night a.showcontent:hover {background: #373a42;} .Night a.showcontent{background: #292e38} .Night #ignielNewsletter input{background: #272b33;border-color:#2b303a;} .Night .comments .comments-content .comment-content {color:#ffffff} .Night div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;} .Night .related-post-style-3 .related-post-item-title {color: #bbb;} .Night #baca-juga ul {border: 2px solid #333740;} .Night #baca-juga h2 {border: 2px solid #292e38;} .Night #comments a.hiddencontent {background: #424854;} .Night .comments .comments-content .comment-thread ol {background: #292e38;} .Night .comments .comments-content .inline-thread {background: #292e38;}>
4.Setelah kode di atas kalian pastekan selanjutnya kita membuat tombol dark modenya.cari kode </head> dan kalian copy paste kode di bawah ini tepat di atasnya
<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>
5.Setelah semuanya terpasang selanjutnya kalian pasang script JS berikut ini tepat di atas kode </body>
<script type='text/javascript'> //<![CDATA[ /* Dark Mode, Mode Malam by Systemauni */ $(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>
6.Untuk menginstal atau mengaktifkan jquery.min.js kalian bisa copy pastekan kode di bawah ini tepat di atas kode </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
7.Untuk mempercantik dan memberikan effect bintang kalian copy paste kode di bawah ini tepat di atas kode ]]></b:skin>
/* Dark Mode Bintang, Mode Malam Systemauni */ .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; } }
8.Kemudian copy paste kode berikut tepat di atas kode </body>
<div class='section-center'> <div class='shooting-star'/> <div class='shooting-star-2'/> <div class='star'/> <div class='star snd'/> <div class='star trd'/> <div class='star fth'/> <div class='star fith'/> </div>
9.Klik simpan Tema
 di Blogger){kind=link}
Posting Komentar untuk "Cara membuat Fitur Dark Mode (Mode Malam) di Blogger"