Monday

Cara Membuat Notifikasi / Pemberitahuan Pada Blog Keren

Selamat datang di Blog taharonqi.blogspot.com, kali ini tidak ada bosen-bosennya saya akan berbagi kepada sobat-sobat blogger semua tentang sebuah cara membuat sebuah Notifikasi pada blog. Dimana notifikasi ini bisa sobat - sobat gunakan untuk memberitahukan informasi kepada pengunjung blog sobat, misalnya sobat ingin memberitahukan bahwa blog sobat tampilan terbaiknya jika menggunakan browser google chrome, atau blog sobat sedang dalam perbaikan atau apa sajalah. yang mau sobat beritahukan kepada pengunjung blog sobat.
Oke mungkin sobat mau tau bagaimana nanti hasilnya, berikut screenshotnya :


Gimana keren kan sobat?
Jika tertarik ikuti langkah-langkah berikut :
  • Login ke Akun Blogger sobat
  • Pilih Template
  • Klik Edit HTML
  • Cari kode berikut ]]></b:skin> (Gunakan CTRL+F untuk memudahkan)
  • Masukkan kode dibawah ini diatas kode ]]></b:skin>
.container {right: 10px;top: 10px;margin: 20px auto;width: 380px;z-index: 999999;position: fixed;-webkit-animation: fadeOutnotif 10s linear forwards; /* Waktu notifikasi 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;}.container .notif {margin: 10px 0;}.notif {position: relative;padding: 25px 30px 25px 100px;min-height: 50px;line-height: 22px; background: white;border-radius: 2px;}.notif:before {content: '';position: absolute;top: 25px;left: 30px;width: 40px;height: 40px;border: 5px solid;border-radius: 25px;}.notif p {font-size: 11px;color: #666;}.notif-title { margin: 0 0 5px; font-size: 14px; font-weight: bold; color: #333;}.notif-title:before, .notif-title:after {content: ''; position: absolute;background: white;border-radius: 2px;}.notif-notice:before {background: #a7d155;border-color: #8fb14f;}.notif-notice .notif-title:before, .notif-notice .notif-title:after {top: 44px;left: 55px;width:4px; height: 12px;  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);}.notif-notice .notif-title:after {top: 50px; left: 48px;width: 8px;height: 4px;}.notif-controls { position: absolute; top: 0; right: 0; height: 16px; padding: 4px 3px 5px;background: #f0f0f0;border: solid #dcdcdc; border-width: 0 0 1px 1px;border-radius: 0 2px;}.notif-controls > a {position: relative;float: left;margin: 0 1px;width: 16px;height: 16px;  font: 0/0 serif;text-shadow: none;color: transparent;}.notif-minimize:before {content: '';position: absolute;top: 11px;left: 4px;width: 7px;height: 2px;background: #bbb;}.notif-minimize:hover:before {background: #888;}.notif-zoom:before {content: '';position: absolute;top: 6px;left: 3px;width: 5px;height: 3px;border: 2px solid #bbb;}.notif-zoom:hover:before {border-color: #888;}.notif-close:before, .notif-close:after {content: '';position: absolute;top: 4px;left: 7px;width: 2px;height: 10px;  background: #bbb;  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);}.notif-close:after {top: 8px;left: 3px;width: 10px;height: 2px;}.notif-close:hover:before, .notif-close:hover:after {background: #888;}.lt-ie9 .notif-notice .notif-title:before {content: '\2714';display: block;top: 25px;left: 30px;width: 50px;font: bold 18px/50px "Arial Unicode MS";color: white;text-align: center;background: none;}.lt-ie9 .notif-notice .notif-title:after {display: none;}.lt-ie9 .notif-alert .notif-title:before {content: '\2716'; display: block;top: 25px;left: 30px;width: 50px;font: bold 17px/50px "Arial Unicode MS";color: white;text-align: center;background: none;}.lt-ie9 .notif-alert .notif-title:after { display: none;}.lt-ie9 .notif-close:before {content: '\2716';display: block;top: 0;left: 0;width: 16px;font: 11px/19px 'Arial Unicode MS';color: #bbb;text-align: center;background: none;}.lt-ie9 .notif-close:after {display: none;}.lt-ie9 .notif-close:hover:before {color: #999;}@-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;}}
  • Cari kode <body> (Gunakan CTRL+F untuk memudahkan)
  • Masukkan kode dibawah ini dibawah kode <body>
<div class="container">
    <section class="notif notif-notice">
      <h6 class="notif-title">Perhatian!</h6>
      <p>Tampilan Terbaik Blog, Gunakan Browser Google Chrome atau Mozilla Firefox</p>
      <div class="notif-controls">
        <a href="#" class="notif-minimize">Minimize</a>
        <a href="#" class="notif-zoom">Zoom</a>
        <a href="#" class="notif-close">Close</a>
      </div>
    </section>
  </div>

Keterangan :
Tulisan warna biru : Ganti sesuai keinginan sobat
  • Klik pratinjau jika tidak ada kesalahan klik simpan dan lihat hasilnya.
Mungkin itu saja yang dapat saya bagi pada kesempatan kali ini, dan jika ada yang kurang jelas sobat bisa berkomentar, terima kasih.

17 comments:

  1. Thkz :)

    gan Cara membuat recent komen Notification sama pnya agan gimna,?

    ReplyDelete
    Replies
    1. sobat bisa berkunjung ke blognya kangismet
      soalnya kodenya saya dapatkan dari blog beliau.

      thanks da mampir sobat.

      Delete
    2. ohw, Saya uda tanya, tapi, dia kasih link untuk memabuat Notification mirip google+ :D

      Delete
    3. Lho memang benar kan sob
      punya saya ini juga notifikasi seperti Google+

      Delete
    4. ohh iya-iya benar juga, sudah di lihat2 memang mirip,
      maaf Saya masih Pemula :D

      tapi kenapa di blog saya nggak kelihatan avatarnya ya?

      Delete
    5. pada blog sobat dibagian mananya ya?
      kok saya tidak bisa menemukan?

      Delete
    6. Ya maaf, karena foto/avatarnya nggak muncul jadi saya hapus lagi script'nya

      Delete
  2. baru ane taruh untuk script ajaxnya di bilang salah ma templatenya gan...gak mau di simpan...
    blogwalking gan ya..
    http://www.benyaha.tk/2013/05/tukar-link.html

    ReplyDelete
  3. apakah scrip ini memberatkan blog ?

    oh ya, saya mau tanya bagaimana cara memberi gambar pada setiap komentar admin seperti di blog ini

    ReplyDelete
  4. tombol close nyan tidak berfungsi :(

    ReplyDelete
  5. Saya sudah pasang gan jangan lupa visit
    http://www.source2share.tk/

    ReplyDelete
  6. Gan jangan ngelawak dong gimana copy scriptnya kalo blog di proteksi -_-

    ReplyDelete
  7. hahah Iya Nihhh Masa gk Bisa Di Copy Anehhh NiHH Blogg

    ReplyDelete
  8. Top ceng artikel nya!!!
    Makin hidup aja blogku berkat pemberitahuan ini!!

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. tq bang pencerahannya...
    kunjungi blogger vanny juga yah..
    jangan lupa follow juga. :)

    http://janganduluu.blogspot.com

    ReplyDelete