Hello Bloggers, Today HV Bloggers will share something cool with you, we have a dialog box for your blog this is a material design jQuery notification box which you can use for your visitors if you want to tell something to them so let's start the tutorial.
Before Installing this widget please have a look at demo so you can understand what you will get after complete installation.
STEPS TO INSTALL jQuery DIALOG BOX IN BLOGGER
Before installing make sure you have jQuery in your blogger template
Sign in to Blogger> Template> Edit HTML> Put CSS below just above the code ]]></b:skin>
/* 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/AVvXsEh-hjUEA6yTX7y4EmLNGoBTQUBp6zOcMrqmJbOrAsLxjoMEBFfKPZlHUgsd2qwxq67trEB7xS_tlWIquvS0ZRbAj0ykz7YAtxRM_eHOeKh4y1aJFJGBvWrieLLYQbHWbW_ph1MMJDeffso/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%}} After That Put the below code just above closing </body>
<div class='blanternotif'>To install the show hide button, my friend just need to add code class='shownotif'
<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><li><a class='shownotif' href='javascript:;' title='Notification'>Notification</a></li>
Example:
<li><a class='shownotif' href='javascript:;' title='Notification'>Notification</a></li>
If you are facing any problem in installing this widget please comment below on this post we will help you thanks.
COMMENTS