Find Us OIn Facebook


Cara Membuat Fitur Floating Night Mode di Blogger - memang sudah banyak turorial cara membuat night mode di blogger, tapi admin berikan yang tutorial dengan cukup berbeda yaitu dengan fitur floating atau melayang.

Night Mode pada blogger memang kegunaannya sama saja dengan fitur night mode pada aplikasi lainnya, yaitu: untuk menghemat baterai dan mengurangi cahaya pada layar smartphone Anda.

Baiklah tidak usah banyak bicara lagi mari kita langsung saja ke artikel, jadi simak artikel berikut dengan baik-baik agar tidak salah dalam pemasangan.

CARA MEMASANG FITUR FLOATING NIGHT MODE DI BLOGGER

Pertama, login kedalam Blogger > menu Tema > klik tombol Edit HTML, tambahkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* Button Night Mode*/
.btn-nightmode{position:fixed;float:left;z-index:99;bottom:20px;left:20px;font-size:15px;padding:10px;border-radius:50%;background:#00A3FE;text-align:center}
.btn-nightmode svg{width:24px;height:24px;vertical-align: -5px;background-repeat: no-repeat !important;content: ''}
.btn-nightmode svg path{fill:#fff}
.check {display: none}
.btn-nightmode .iconmode .openmode{display:block}
.btn-nightmode .iconmode .closemode{display:none}
.btn-nightmode .check:checked ~ .iconmode .openmode{display:none}
.btn-nightmode .check:checked ~ .iconmode .closemode{display:block}
/* Night Mode */
.Night{background:#202124;color:rgba(255,255,255,.9)}
.Night blockquote,.Night kbd{background:#17181a;color:rgba(255,255,255,.9)}

Untuk menambahkan CSS lainnya tambahkan tag .Night contoh .Night CSS1,.Night CSS2{background:#fff}

Selanjutnya, tambahkan kode HTML dan JavaScript dibawah ini tepat diatas kode </body>

<div class='btn-nightmode'><input class='check' id='btn-nightmode' title='Night Dark' type='checkbox'/>
<label class='iconmode' for='btn-nightmode'>
<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='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'/></svg>
</label>
</div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#btn-nightmode").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")?$("#btn-nightmode").prop("checked",!0):$("#btn-nightmode").prop("checked",!1)});
//]]>
</script>

Terakhir simpan Tema dan lihat hasilnya, untuk demo bisa dilihat diblog ini.

Demikianlah tutorial cara membuat fitur floating night mode di blogger kali ini, jika mengalami kesusahan dalam melakukan pemasangan jangan lupan untuk berkomentar dibawah ini.

1 Comments

  1. Tes komentar 📌

    Konsekuensi Dari Tauhid
    "Laa Illaha Ilallah" Adalah:

    1. Peniadaan tuhan-tuhan Selain Allah Ta'ala:
    Konsekuensi "La Ilaha Illallah" adalah Meninggalkan sembahan sembahan selain Allah Ta'ala yaitu Alilah, Al-Andad, Al-Arbab, dan At-Thaghut.

    2. Allah Ta'ala Tidak ada Sekutu:
    Tidak ada satupun sekutu bagi Allah Ta'ala, tidak ada pendamping bagi Allah Ta'ala, sehingga jika ada orang yang meminta kepada sesuatu selain Allah Ta'ala semisal meminta keselamatan atau keberkahan kepada gunung, pohon, mayat atau kuburan, maka orang itu tidak menjalankan konsekuensi "La Ilaha Illallah". Dan dia termasuk menyekutukan Allah Ta'ala, statusnya adalah Musyrik. Termasuk dalam perkara ini adalah perkara hukum. Allah Ta'ala tidak mengambil sekutu seorang pun dalam membuat dan memutuskan perkara (hukum).

    3. Penetapan Sesembahan Hanya Bagi Allah Ta'ala:
    Dalam kalimat "La Ilaha Illallah" ada Itsbat (penetapan) sesembahan hanya bagi Allah Ta'ala. Ini adalah misi utama dakwah para Rasul, yaitu menyerukan untuk "Beribadalahlah kepada Allah saja dan Jauhi Thagut".

    Konsekuensi Dari Tauhid "Muhammadur Rasulullah" Adalah:

    1. Membenarkan setiap apa yang Rasulullah ShallAllahu 'Alaihi Wasallam kabarkan: Sesungguhnya apa yang akan disampaikan oleh Rasulullah ShallAllahu 'Alaihi Wasallam adalah semata-mata berasal dari Allah Ta'ala.

    2. Taat terhadap apa yang diperintahkan: Taat dan patuh adalah sesuatu keharusan bagi kita yang sudah mengikrarkan syahadat. Taat kepada Rasul merupakan perwujudan taat kita kepada Allah Ta'ala.

    3. Menjauhi apa yang dilarang oleh Rasulullah ShallAllahu 'Alaihi Wasallam: Mulai dari yang besar seperti syirik, bid'ah hingga perbuatan maksiat.

    4. Menjadikan Rasulullah ShallAllahu 'Alaihi Wasallam menjadi teladan: Rasulullah ShallAllahu 'Alaihi Wasallam di utus sebagai Rahmat bagi semesta Alam. Semua berbuatan dan perkataan Rasulullah ShallAllahu 'Alaihi Waaallam adalah haq. Maka wajib bagi kita untuk mengikutinya.

    5. Mencintai Rasulullah ShallAllahu 'Alaihi Wasallam lebih dalam daripada kecintaan terhadap diri sendiri, harta, anak, orang tua dan seluruh umat manusia.

    Wallahua'lam Bishowab.

    "Sesungguhnya jawaban orang-orang beriman, apabila diajak kepada Allah dan Rasul-Nya agar Rasul Menetapkan hukum di antara mereka, tidak lain hanyalah. "Kami mendengar Dan Kami Taat". Mereka itulah orang-orang yang beruntung."
    (An-Nur: 51)

    ReplyDelete

Post a Comment

Previous Post Next Post