Halo teman Blanter, sehabis hampir 1 bulan tidak update tutorial maupun template akibatnya aku menerima kesempatan untuk mengupdate tutorial gres di blog ini.
Ide menciptakan notifikasi ini tiba mendadak 😲 dan pribadi aku coba buat untuk aku publikasikan di blog ini. Notifikasi ini melayang dan tombolnya aku coba pasang di kiri tengah (mungkin bagi yang kurang cocok sanggup di ubah posisinya), selain itu pada tombol dan kotak notif ketika di klik mengatakan efek yang lembut dan elegan (menggunakan animasi keyframe).
Yup, bagi yang sering liat style komentar material design (masign) niscaya kenal dengan desain kotak notifikasinya, mirip-mirip menyerupai style komentar template masign.
Sumber https://www.idblanter.com
Sobat tertarik untuk membuatnya? silahkan ikuti tutorial dibawah ini :
Pastikan sudah terdapat jQuery dan CSS Material Icons pada blog sobat.
Letakan CSS Material Icons sempurna di atas arahan
1. Masukan arahan CSS dibawah ini sempurna di atas arahan
2. Letakan arahan HTML notifikasi dibawah ini sempurna di bawah arahan
3. Letakan Javascript dibawah ini sempurna di atas arahan
Simpan Template, dan lihat hasilnya.
Lihat Juga : Masign Orange Premium Material Design Blogger Template
Notifikasi ini sanggup diisi pesan yang berbeda-beda di setiap postingan, teman hanya perlu merubah tutorial nomer 2, dengan hanya memindahkan arahan HTML notifikasi ke postingan mode HTML.
Semoga bermanfaat. 😊
Pastikan sudah terdapat jQuery dan CSS Material Icons pada blog sobat.
Letakan CSS Material Icons sempurna di atas arahan
</head><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>1. Masukan arahan CSS dibawah ini sempurna di atas arahan
]]></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 arahan HTML notifikasi dibawah ini sempurna di bawah arahan
<body atau di atas arahan </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 usang semakin berkembang, jadi kita harus sanggup menyesuaikan perubahan dan memakai kreatifitas untuk menyempurnakannya. </div> </div>3. Letakan Javascript dibawah ini sempurna di atas arahan
</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 sanggup diisi pesan yang berbeda-beda di setiap postingan, teman hanya perlu merubah tutorial nomer 2, dengan hanya memindahkan arahan HTML notifikasi ke postingan mode HTML.
Semoga bermanfaat. 😊
