Hello, Blanter World Blog, again, I will share a new tutorial, namely how to create a material design dialog box or notification box that serves to provide a short message to blog visitors.
This time the Dialog Box uses material design as its main design, which of course has an interesting effect and also a soft shadow box, not only that this material box design dialog is responsive and suitable for all forms of devices.
For the installation of the show dialog box button, I only provide a class code that can be installed in all types of links, menu lists, content and so on.
How to make a material design dialog box. Make sure you have jQuery on your blog template. Go to Blogger>Template>Edit HTML put CSS below right above the code ]]></b:skin>or</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://3.bp.blogspot.com/-ku_TRSeCPD8/WYsWU06DseI/AAAAAAAAG4E/VykKXnkItQEO9GGCOBZjSCDXMVpgsg1mwCLcBGAs/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%}}Place the code below right above the code </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>To install the show hide button, you only need to add the class=’showtif’ example code:
<li><a class='shownotif' href='javascript:;' title='Notification'>Notification</a></li>Save the template and see the results. Thats it, don’t forget to bookmark and follow this blog for interesting blogging tutorial or templates.