Membuat Notifikasi Pemberitahuan 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 :
 |
| gambar.1 |
 |
| gambar.2 |
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>Untuk Copy Tekan Tombol Ctrl + C</p>
<p>Untuk New Tab Tekan Tombol Ctrl + Klik Kanan</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 berwarna Merah Ganti sesuai dengan keinginan sobat
- Klik pratinjau jika tidak ada kesalahan klik simpan dan lihat hasilnya.
Sekian post dari saya.
SEMOGA BERMANFAAT
Jika anad ingin Copy + Paste Cantumkan Link Sumber nya,
Post a Comment