05 May 2017

Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe

Notifikasi Show Hide Melayang dengan Animasi Keyframe

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 </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'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</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. 😊
Rhinokage Rio
Rhinokage Rio

Adalah seorang web designer yang suka mempelajari hal-hal yang baru seputar blog, template, coding dan Bisnis Online. Untuk mempelajari hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Emoticon
Konversi Code
Out Of Topic
😊
😉
😀
😁
😎
😍
😜
😑
😇
💖
😯
😱
😭
👍
🍻