Simple Css Notification From Top
Simple CSS Notification From Top Simple CSS Notification From Top Jumpa lagi mas gan, sis gan dengan aku di blog mas tamvan ini :3 di ...
https://tutorialcarapintar.blogspot.com/2019/02/simple-css-notification-from-top.html
Simple CSS Notification From Top
Simple CSS Notification From Top Jumpa lagi mas gan, sis gan dengan aku di blog mas tamvan ini :3 di postingan kali ini aku akan membuatkan sebuah notification yang muncul dikala blog di load dan akan keluar secara otomatis dalam beberapa detik.
Tapi aku juga menyediakan notification yang akan keluar atau hilang dikala tombol X/( Close ) di klik.
Jadi kalian tinggal milih mana yang mau di pasang, mau yang muncul kemudian keluar dengan sendirinya atau muncul dan keluarnya d klik tombol klosnya.
Untuk melihat tampilannya, silahkan klik tombol result dibawah ini
Notifikasi ini tidak hanya memakai namun juga ditambah dengan sedikit ramuan javascript, tapi jika buat notifikasi yang muncul kemudian keluar dengan sendirinya aga sedikit banyak ramuan yang d berikan :3 . Tapi hening saja, tidak akan menciptakan blog menjadi berat dengan beban segitu.
Udah lah, aku yakin g bakalan ada yg baca bacotan d atas, mending pribadi ke tutorialnya saja.
Untuk tutor cara pemasangannya, simak tutor singkat dibawah ini.
Pertama-tama mari kita Berdoa Dulu......, Kalo sudah kit lanjut ke tutornya
Simple CSS Notification From Top
- Login ke Blogger.com
- Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style>
- Lalu masukan CSS dibawah ini sempurna diatas isyarat ]]></b:skin> atau </style>
#note { position: absolute; font-family:"Roboto",sans-serif;color: #241111 !important; padding: 9px 0px 8px; font-weight: bold; z-index: 6001; top: 0; left: 0; right: 0; background:#FFCE08 ; text-align: center; line-height: 2.5; overflow: hidden; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; } .cssanimations.csstransforms #note { -webkit-transform: translateY(-50px); -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards; -moz-transform: translateY(-50px); -moz-animation: slideDown 5.5s 1.0s 1 ease forwards; } .tamvan { display: inline-block; font-family: inherit; font-weight: bold; outline: 0px none !important; border: 1px solid #D4D4D4 ; border-radius: 2px; color: #444 !important; background: transparent linear-gradient(to bottom, #F4F4F2, #EDEDEB) repeat scroll 0% 0%; white-space: nowrap; padding: 5px 8px !important; line-height: 1.4 !important; position: relative; } .tamvan:hover{ background:red; border: 2px solid red; } #note:hover{ background:#2A2F33; color:#FFF !important; } #close { position: absolute; right: 10px; top: 20px; text-indent: -9999px; background: url(http://media.corporate-ir.net/media_files/IROL/12/129751/images/2015/icon-close.png); height: 16px; width: 16px; cursor: pointer; } .cssanimations.csstransforms #close { display: none; } @-webkit-keyframes slideDown { 0%, 100% { -webkit-transform: translateY(-50px); } 10%, 90% { -webkit-transform: translateY(0px); } } @-moz-keyframes slideDown { 0%, 100% { -moz-transform: translateY(-69px); } 10%, 90% { -moz-transform: translateY(0px); } } - Selanjutnya cari isyarat <body>, kemudian masukan HTML dibawah ini sempurna d bawahnya
<div id="note"> Jangan Lupa Shalat Wajib 5 Waktu Ya . <a class='tamvan' href="LINK-TUJUAN">Let's Go</a> <a id="close">[Blog ]</a> </div> . Ganti Juga Tulisan LINK-TUJUAN Dengan Link Kalian
- Nah untuk tahap selanjutnya, kalian pilih mau yang mana?
- Mau yang manual keluar dengan meng klik tombol klos atau yang otomasi keluar sendiri sesudah beberapa detik tampil
- Silahkan pilih javascript dibawah ini
- Menghilangkannya dengan tombol klos
<script type='text/javascript'> close = document.getElementById("close"); close.addEventListener('click', function() { note = document.getElementById("note"); note.style.display = 'none'; }, false); </script> - Menghilang sendiri sesudah beberapa detik / menit
<script async src="https://rawgit.com/mastamvan/backup/master/NotificationTop.js"></script> - Kalau sudah menentukan salah satu javascriptnya
- Sekarang kalian pasang Javascript tersebut di atas isyarat </head>
- Tinggal Save Template Dan Lihat Hasilnya.
Cukup sekian dan terimakasih, biar artikel dari aku perihal Simple CSS Notification From Topini Bermanfaat.
Jangan lupa tinggalkan jejak kalian d kolom komentar ya :)
