Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe
05 May 2017
Halo sobat Blanter, setelah hampir 1 bulan tidak update tutorial maupun template akhirnya saya mendapat kesempatan untuk mengupdate tutorial baru di blog ini.
Ide membuat notifikasi ini datang mendadak 😲 dan langsung saya coba buat untuk saya publikasikan di blog ini. Notifikasi ini melayang dan tombolnya saya coba pasang di kiri tengah (mungkin bagi yang kurang cocok bisa di ubah posisinya), selain itu pada tombol dan kotak notif saat di klik memperlihatkan efek yang lembut dan elegan (menggunakan animasi keyframe).
Yup, bagi yang sering liat style komentar material design (masign) pasti kenal dengan desain kotak notifikasinya, mirip-mirip seperti style komentar template masign.
Sobat tertarik untuk membuatnya? silahkan ikuti tutorial dibawah ini :
Pastikan sudah terdapat jQuery dan CSS Material Icons pada blog sobat.
Letakan CSS Material Icons tepat di atas kode
1. Masukan kode CSS dibawah ini tepat di atas kode
2. Letakan kode HTML notifikasi dibawah ini tepat di bawah kode
3. Letakan Javascript dibawah ini tepat di atas kode
Simpan Template, dan lihat hasilnya.
Lihat Juga : Masign Orange Premium Material Design Blogger Template
Notifikasi ini bisa diisi pesan yang berbeda-beda di setiap postingan, sobat hanya perlu merubah tutorial nomer 2, dengan hanya memindahkan kode HTML notifikasi ke postingan mode HTML.
Semoga bermanfaat. 😊
Pastikan sudah terdapat jQuery dan CSS Material Icons pada blog sobat.
Letakan CSS Material Icons tepat di atas kode
</head><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>1. Masukan kode CSS dibawah ini tepat di atas kode
]]></b:skin> atau </style>/* BLANTER Notif Box Created by Idblanter.com */
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 10px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}2. Letakan kode HTML notifikasi dibawah ini tepat di bawah kode
<body atau di atas kode </body><div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'></i><i class='material-icons blanterxE5CD'></i></a>
<div class='notifbox'>
Blogger semakin lama semakin berkembang, jadi kita harus bisa menyesuaikan perubahan dan menggunakan kreatifitas untuk menyempurnakannya.
</div>
</div>3. Letakan Javascript dibawah ini tepat di atas kode
</body><script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script>Simpan Template, dan lihat hasilnya.
Lihat Juga : Masign Orange Premium Material Design Blogger Template
Notifikasi ini bisa diisi pesan yang berbeda-beda di setiap postingan, sobat hanya perlu merubah tutorial nomer 2, dengan hanya memindahkan kode HTML notifikasi ke postingan mode HTML.
Semoga bermanfaat. 😊