Membuat Material Design Dialog Box dengan jQuery di Blog

10 August 2017

Halo sobat Blog Dunia Blanter, kembali lagi saya akan membagikan sebuah tutorial baru yaitu cara membuat material design dialog box atau notification box yang berfungsi untuk memberikan pesan singkat kepada pengunjung blog.

Dialog Box kali ini menggunakan material design sebagai desain utamanya, yang tentu saja memiliki efek yang menarik dan juga shadow box (bayangan) yang lembut, tidak hanya itu dialog box material design ini sudah responsive dan cocok untuk segala bentuk device.

Untuk pemasangan tombol show dialog box ini saya hanya memberikan sebuah kode class yang bisa dipasang di semua jenis link, list menu, konten dan lain sebagainya.

Demo

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 tepat di atas kode ]]></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/AVvXsEgpxf488BFhUHRnh8RSXbp_ecJn5KfumbZNm5VaNHdneVyUoUH5A-6HnFIOJPZ6Q4yHumZfB5EfcEuKezBen95eEfDh0jUW1daqh17SgcLfnDahhXaGIAYlvWBFAh3Elr8fJeqBGAXLyV4/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 kode di bawah ini tepat di atas kode </body>

<div class='blanternotif'>
<div class='blantertitle'>Notification</div>
<div class='notiftext'>
JASMERAH (Jangan sekali-kali melupakan sejarah), Karena Bangsa yang besar adalah 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, sobat hanya perlu menambahkan kode 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 adalah bangsa yang menghargai jasa para pahlawannya.

Dialog Box ini akan tersedia pada template safelink premium terbaru yang akan dipublikasikan akhir bulan ini, dan juga ada 2 project template yang masih dalam tahap pengembangan.

Lihat Juga :

Sekian, tutorial yang bisa saya bagikan kali ini dan jangan lupa bookmark dan Follow blog ini jika suatu saat sobat mencari tutorial ataupun template blogger menarik.

Dunia Blanter