Pada postingan kali ini saya akan berbagi pengalaman bagaimana cara membuat notifikasi ala kompi ajaib. Pasti agan pernah berkunjung ke blog yang satu ini. Pada blog tersebut terdapat notifikasi yang unik. Berikut gambar notifikasi yang saya maksudkan.
Nah, penasaran juga kan bagaimana cara membuatnya ? Sangat mudah kog gan, yuk langsung saja kita mulai tutorialnya :)
1. Login ke blogger agan dan masuk ke edit template.
2. Masukkan code HTML berikut, terserah agan mau di tempatkan dimana notifikasinya :
<div class="notif">
<div data-target="#notif-message" id="bell" onclick="myFunction()">
<i class="fa fa-bell bell"></i>
<div style="" class="notif-count" id="notif-count">1</div>
</div>
<div style="display: none;" id="notif-message">
<div class="title-notif">Notification</div>
<p>Dapatkan Twitter EMOJI untuk Blogger dan Wordpress <a href="//www.kompiajaib.com/2015/04/list-twitter-emoji-untuk-wordpress-dan-blogger.html" title="Twitter Emoji">di sini</a></p>
</div>
</div>Silakan agan ganti pesan yang ada dengan pesan yang agan inginkan.
3. Tambahkan CSS berikut :
#notif-message::after,#notif-message::before{border-width:0 10px 12px;content:"";width:0;right:10px;z-index:1;height:0;border-style:dashed dashed solid}
.notif{position:absolute;top:15px;right:15px;font-size:130%;color:#555;}
.notif a{font-weight:500;padding:0 6px 1px;background:#4679bd;border:1px solid transparent;border-radius:3px;color:#fff!important;}
#bell{cursor:pointer;float:right}
.notif-count{width:18px;height:18px;line-height:18px;text-align:center;background-color:#d6513b;border:1px solid #fff;border-radius:5px;color:#fff;display:inline-block;font-size:12px;position:absolute;top:-8px;right:-10px}
#notif-message{background:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;width:auto;min-width:200px;width:280px;font-weight:400;font-size:16px;text-align:left;line-height:normal;top:100%;right:-10px;margin-top:15px;position:absolute;z-index:10000;padding:0;display:none}
.title-notif{padding:10px 15px;border-bottom:1px solid #ddd;font-weight:300}
#notif-message p{margin:10px 15px!important;font-weight:300;line-height:1.4em}
#notif-message::before{border-color:transparent;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-12px}
#notif-message::after{border-color:transparent transparent #fff;position:absolute;top:-10px}Silakan agan costumisasi tampilannya sesuai keinginan agan.
4. Agar notifikasinya muncul ketika di klik agan harus menambahkan script berikut, letakkan di atas </body> :
<script type='text/javascript'>
//<![CDATA[var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
var button=document.querySelector("#bell");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"});
function myFunction(){document.getElementById("notif-count").style.display="none"};
}
//]]>
</script>
5. Save template dan lihat hasilnya.
Gimana gan, sangat mudahkan, jika ada pertanyaan jangan sungkan untuk bertanya ya gan. Sekian tutorial cara membuat notifikasi ala kompi ajaib.