Halo teman Blog , kembali lagi aku akan membagikan sebuah tutorial gres yaitu cara menciptakan material design obrolan box atau notification box yang berfungsi untuk memperlihatkan pesan singkat kepada pengunjung blog.
Dialog Box kali ini memakai material design sebagai desain utamanya, yang tentu saja mempunyai dampak yang menarik dan juga shadow box (bayangan) yang lembut, tidak hanya itu obrolan box material design ini sudah responsive dan cocok untuk segala bentuk device.
Untuk pemasangan tombol show obrolan box ini aku hanya memperlihatkan sebuah instruksi class yang sanggup dipasang di semua jenis link, list menu, konten dan lain sebagainya.
Sumber https://www.idblanter.com
Cara Membuat Material Design Dialog Box
Pastikan sudah terdapat jQuery pada template blog sobat.
Masuk ke Blogger > Template > Edit HTML > Letakan CSS di bawah ini sempurna di atas instruksi
]]></b:skin> atau </style>/* Material Design Dialog Box www.idblanter.com */ a.waves-light.close-sf{font-size:14px;color:#fff} .blanternotif,.matilampu{visibility:hidden;opacity:0} .blanternotif{background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:450px;left:35%;z-index:99;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)} .blanternotif button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0} a.waves-light.close-sf{background:#3949ab;margin-top:15px;display:inline-block;padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float:right;text-transform:uppercase} .matilampu{position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out} .blantertitle{margin-bottom:15px} .blanternotif.aktif,.matilampu.aktif{visibility:visible;opacity:1} .blanternotif.aktif{top:20%} .icx{position:absolute;top:10px;right:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi1fZvy8f1Vwv0_aICfSI52YQREX9A-3BrQgJIH4vtwo5b9WKI5PygRCWC6hrXo_DsL3wN8bI2uR9TUH41ENABMHrF1iTIALNgTqIk_64T4cOfKv_nD36tbMFTKy1SXGZatdvlwaVJ6X0/s1600/mdclose.png)no-repeat;background-size:15px;margin:10px 8px;width:15px;height:15px} .notiftext{font-size:14px;line-height:1.5} @media screen and (max-width:768px){.blanternotif{left:10%;right:10%}} Letakan instruksi di bawah ini sempurna di atas instruksi
</body><div class='blanternotif'> <div class='blantertitle'>Notification</div> <div class='notiftext'> JASMERAH (Jangan sekali-kali melupakan sejarah), Karena Bangsa yang besar yaitu bangsa yang menghargai jasa para pahlawannya.</div> <a class='waves-effect waves-light close-sf' href='javascript:;' title='Done'>Done</a> <a class='waves-effect icx close-sf' href='javascript:;'></a> </div> <div class='matilampu'></div> <script type='text/javascript'> $(document).ready(function(){$(".close-sf").click(function(){$(".blanternotif,.matilampu").removeClass("aktif")})}),$(document).ready(function(){$(".shownotif").click(function(){$(".blanternotif,.matilampu").toggleClass("aktif")})}); </script> Untuk memasang tombol show hide, teman hanya perlu menambahkan instruksi
Contohnya :
class='shownotif'Contohnya :
<li><a class='shownotif' href='javascript:;' title='Notification'>Notification</a></li> Simpan Template dan lihat hasilnya.
JASMERAH (Jangan sekali-kali melupakan sejarah), Karena Bangsa yang besar yaitu bangsa yang menghargai jasa para pahlawannya.
Dialog Box ini akan tersedia pada template safelink premium terbaru yang akan dipublikasikan final bulan ini, dan juga ada 2 project template yang masih dalam tahap pengembangan.
Sekian, tutorial yang sanggup aku bagikan kali ini dan jangan lupa bookmark dan Follow blog ini kalau suatu ketika teman mencari tutorial ataupun template blogger menarik.
JASMERAH (Jangan sekali-kali melupakan sejarah), Karena Bangsa yang besar yaitu bangsa yang menghargai jasa para pahlawannya.
Dialog Box ini akan tersedia pada template safelink premium terbaru yang akan dipublikasikan final bulan ini, dan juga ada 2 project template yang masih dalam tahap pengembangan.
Lihat Juga :
Sekian, tutorial yang sanggup aku bagikan kali ini dan jangan lupa bookmark dan Follow blog ini kalau suatu ketika teman mencari tutorial ataupun template blogger menarik.
