Cara Membuat Notifikasi / Pemberitahuan Pada Blog

     Notifikasi / Pemberitahuan di Blog - Selamat datang di blog tutorwidget, kali ini tidak ada bosen-bosennya saya akan berbagi kepada sobat-sobat blogger semua tentang cara membuat sebuah notifikasi melayang pada blog. Dimana notifikasi blog ini bisa anda gunakan sebagai suatu bentuk pesan atau informasi yang ingin anda sampaikan kepada pengunjung. Misalnya saja sobat ingin menyampaikan salam selamat datang jangan lupa like dan sharenya ya teman atau apapun itu yang pasti semua pesan yang mau sobat beritahukan kepada pengunjung blog sobat.

Baca juga : Membuat Notifikasi Komentar Ala Google Plus

Di beberapa weblog mungkin notifikasi ini sudah sering kita jumpai. ada yang membuatnya dengan javascript atau meggunakan css, namun yang akan saya bagikan kali ini menggunakan css, mengapa? karena selaian lebih praktis dan mudah, widget yang satu ini tidak akan terlalu berpengaruh terhadap kecepatan loading blog, sehingga tidak akan membuat pengunjung jenuh menunggu sampai halaman selesai terbuka sepenuhnya.

Di postingan ini saya akan membagikan sebuah widget menarik berbentuk slidenote. ya hampir mirip sama recommended slide post, namun kalau widget slidenote ini hanya digunakan untuk menampilkan pesan saja, bukan untuk menampilkan postingan (walaupun bisa untuk menampilkan postingan namun hanya berupa pesan).
Notifikasi pemberitahuan ini akan terlihat pada saat pengunjung membuka halaman blog sobat dan akan hilang dengan waktu yang ditentukan.

Oke mungkin sobat mau tau bagaimana nanti hasilnya, berikut screenshotnya :

Gimana, Tertarik untuk membuatnya? 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, jika ada yang kurang jelas sobat bisa berkomentar, terima kasih.