Home » » Cara Membuat Notifikasi Melayang Di Blog

Cara Membuat Notifikasi Melayang Di Blog

Written By Unknown on Sunday, June 30, 2013 | 8:00 AM

.
Cara Membuat Notifikasi Melayang Di Blog
Z-T Blog - belum lama ini ada pengunjung yang request "gan cara buat notif kaya blog agan gimana?" oke kali ini saya akan bahas hari ini yaitu cara membuat Notifikasi melayang di blog seperti yang terpasang pada blog ini (Z-T Blog), lalu apa fungsinya..? ya pastinya untuk membuat pemberitahuan kepada pengunjung seperti halnya memberi kata selamat datang atau memberi pesan bahwa anda sedang sibuk atau yang lainnya tergantung anda memakainya untuk apa.. ,tidak usah saya jelaskan terlalu panjang karena anda juga pasti sudah tahu fungsi dari tutorial kali ini. langsung ke cara pembuatannya :
  1. Masuk ke Template.
  2. Edit HTML
  3. Copy kode di bawah ini, tepat di atas kode ]]></b:skin>
  4. Simpan.
#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}

     5.  Copy kode dibawah ini tepat dibawah kode <body>
     6.  Simpan.

<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b> 
<p>|| Selamat datang ||</p>
<p>Bersikaplah dengan sopan seperti halnya bertamu dengan cara mematuhi aturan disini.</p>
<p>terima kasih sudah berkunjung.. ^_^</p>
</h2>
</span>
</div>

Keterangan :
  • Kata-katanya bisa anda ubah sesuai keinginan.
demikian tutorial hari ini semoga berhasil dan bermanfaat untuk anda, terima kasih untuk yang request artikel ini akhirnya saya tidak kehabisan ide untuk blogging :) ,jika ada yang ingin di tanyakan untuk artikel kali ini jangan sungkan berkomentar. terima kasih.
Category:

47 komentar:

  1. WakwawJune 30, 2013 at 9:20 AM

    gan kata2nya bisa diganti kan??
    Ditunggu kunjungan baliknya

    ReplyDelete
    Replies
    1. UnknownJune 30, 2013 at 9:56 AM

      bisa gan.. diganti aja.. :)
      . kunjungan balik kemana ya..?

      Delete
  2. AnonymousJune 30, 2013 at 9:26 AM

    keren banget gan, saya pake ya ini notifikasi

    ReplyDelete
  3. http://bagus-widyanto.blogspot.com/June 30, 2013 at 10:11 AM

    This comment has been removed by a blog administrator.

    ReplyDelete
  4. UnknownJune 30, 2013 at 10:36 AM

    Tapi ini bisa mengganggu kenyamanan pengunjung gan. CMIIW ^^v

    ReplyDelete
  5. UnknownJune 30, 2013 at 10:41 AM

    di bookmark dulu mas..ntar dipasang saat H-7 idhul fitri..

    ReplyDelete
    Replies
    1. UnknownJuly 1, 2013 at 5:13 PM

      okee mas silahkan nanti di pakai di hari raya idul fitri.. :)

      Delete
  6. UnknownJune 30, 2013 at 10:42 AM

    simpel tapi keren gan :v

    ReplyDelete
  7. tic tacJune 30, 2013 at 10:50 AM

    gan ada tutor yang mungkin sama seperti itu tapi untuk resent post di sebelah kanan pojok bwah
    saya udah nyari sam mbha google tapi tutorny gak ada yang bener

    mohon pencerahan kalo da gan

    ane tunggu kunjungna nya gan

    ReplyDelete
    Replies
    1. UnknownJuly 1, 2013 at 5:16 PM

      disini belum ada gan, belum saya share.. mungkin di lain kesempatan saya usahakan

      Delete
  8. AnonymousJune 30, 2013 at 11:59 AM

    ternyata gampang juga nih, coba y gan,,,

    ReplyDelete
  9. AnonymousJune 30, 2013 at 12:23 PM

    Ini yang saya cari , hehe

    ReplyDelete
  10. AnonymousJune 30, 2013 at 1:38 PM

    keren gan.. dari dulu ane tungguin, akhirnya di posting juga.. :D
    thx gan..

    back http://area-share.blogspot.com

    ReplyDelete
    Replies
    1. UnknownJuly 1, 2013 at 5:29 PM

      hehee.. mohon maaf kalo nunggunya terlalu lama.. :D

      Delete
  11. AnonymousJune 30, 2013 at 4:03 PM

    Bagus widgetnya, kalo biar warnanya biru gimana?

    ReplyDelete
    Replies
    1. UnknownJuly 1, 2013 at 5:50 PM

      ubah warna backgroundnya yang kodenya seperti ini

      background: rgba(255,255,255,0.9);

      Delete
  12. AnonymousJune 30, 2013 at 8:12 PM

    Bukan fans page saja yang bisa dibuat melayang notifikasi ini pun bisa dibuat melayang juga.Hebat ini kodenya.

    ReplyDelete
  13. AnonymousJune 30, 2013 at 9:29 PM

    Wiiih,keren ntuh gan?

    KUNBAL,saya tunggu

    ReplyDelete
  14. teteh RenyJuly 1, 2013 at 5:29 AM

    artikel penuh informasi MIN, tapi kalo aku rubah dari edit template, takut malah acak acakan,,, kunjungi balik blog aku

    ReplyDelete
    Replies
    1. UnknownJuly 1, 2013 at 5:34 PM

      gk akan dch asalkan tidak ceroboh.. :)
      . blog mas apa..?

      Delete
  15. Arif BudiharjoJuly 1, 2013 at 11:14 AM

    ini nih yang saya cari, thank's bro

    ReplyDelete
  16. QolbiJuly 1, 2013 at 1:34 PM

    kereenn gan
    tapi nambah berat loading blog gak nih? hehe
    ditunggu kunjungan balik gan :)
    http://keminclong.blogspot.com/
    <<>>

    ReplyDelete
    Replies
    1. UnknownJuly 1, 2013 at 5:35 PM

      gk gan.. liat aja blog ini nmbah berat gk..? hehee :D

      Delete
  17. AnonymousJuly 1, 2013 at 6:43 PM

    widih scriptnya panjang juga yah mas, padahal kalau lihat notifkasinya kecil :v

    ReplyDelete
  18. UnknownJuly 1, 2013 at 11:41 PM

    wah ternyata mudah dan simpel ya mas :D hehehe

    ReplyDelete
    Replies
    1. UnknownJuly 2, 2013 at 6:02 PM

      ya mas. kl copy memang mudah mas.. hehee :D

      Delete
  19. AnonymousJuly 2, 2013 at 6:47 PM

    bagus juga itu notifnya bro...cocok buat blog ente :D

    ReplyDelete
  20. UnknownJuly 4, 2013 at 8:45 AM

    keren banget gan, notifikasi nya, gak terlalu mengganggu,

    ternyata sudah ada tutorial nya, kalau boleh saya Copy script nya gan buat ane share ke pembaca blog ane.. :)

    Thanks...

    ReplyDelete
    Replies
    1. UnknownJuly 5, 2013 at 7:25 PM

      yupss silahkan gan, semoga bisa bermanfaat ..

      Delete
  21. AnonymousJuly 7, 2013 at 10:28 PM

    Waahhh,,ternyata ada ya tutorialnya..mau nyoba sob,,thnks ya..

    ReplyDelete
    Replies
    1. UnknownJuly 8, 2013 at 7:24 PM

      ya sob ada tutornya.. :D ,silahkannn.. :D

      come back.

      Delete
  22. AnonymousJuly 7, 2013 at 10:32 PM

    sob mau nanya sob..CSS nya bisa di kompres ngak..??atau ada yg lebih simple nya ngak..??trmkasih..

    ReplyDelete
    Replies
    1. UnknownAugust 4, 2013 at 10:04 AM

      coba googling css compreser kayanya si bisa.. tp gtau jg dch.. :D

      Delete
  23. AnonymousJuly 11, 2013 at 5:15 PM

    Wah Keren sob.. Thanks atas Artikelnya sangat bermanfaat, gampang juga cara membuatnya :D

    ReplyDelete
    Replies
    1. UnknownJuly 13, 2013 at 11:12 AM

      terima kasih sob, mungkin minat buat make widgetnya.. :D

      Delete
  24. AnonymousJuly 21, 2013 at 3:50 PM

    thanks gan, keren bgt, udah saya coba di blog saya :D

    ReplyDelete

Terima kasih telah berkunjung! Silahkan tinggalkan komentar untuk respon/pertanyaan.

=== RULES ===

1. Dilarang Spam.
2. Dilarang live link.
3. Dilarang nama komentator menggunakan Keyword.
4. Dilarang berkomentar yang seolah memuji (Out Of Topic).
5. Isi komentar relevan dan berkualitas yang berkaitan dengan artikel.

Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.