Simple CSS Notification From Top

Simple CSS Notification From Top Jumpa lagi mas gan, sis gan dengan saya di blog mas tamvan ini :3 di postingan kali ini saya akan berbagi sebuah notification yang muncul ketika blog di load dan akan keluar secara otomatis dalam beberapa detik.

Tapi saya juga menyediakan notification yang akan keluar atau hilang ketika tombol X/( Close ) di klik.

Jadi kalian tinggal milih mana yang mau di pasang, mau yang muncul lalu keluar dengan sendirinya atau muncul dan keluarnya d klik tombol klosnya.

Untuk melihat tampilannya, silahkan klik tombol result dibawah ini

Result

Notifikasi ini tidak hanya menggunakan namun juga ditambah dengan sedikit ramuan javascript, tapi kalau buat notifikasi yang muncul lalu keluar dengan sendirinya aga sedikit banyak ramuan yang d berikan :3 . Tapi tenang saja, tidak akan membuat blog menjadi berat dengan beban segitu.

Udah lah, saya yakin g bakalan ada yg baca bacotan d atas, mending langsung 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

Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style>

Lalu masukan CSS dibawah ini tepat diatas kode ]]></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); }
    }

Jika kalian ingin menggunakan javascript yang ke-2 dan ingin menampilkan Notifikasinya dengan waktu yang aga lama, silahkan ganti 5.5s Dengan waktu yang kalian inginkan

Selanjutnya cari kode <body>, lalu masukan HTML dibawah ini tepat 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 Mas Tamvan]</a>
    </div>

Silahkan ganti kata Jangan Lupa Shalat Wajib 5 Waktu Ya .. 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 setelah 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 setelah beberapa detik / menit


<script async src="https://rawgit.com/mastamvan/backup/master/NotificationTop.js"></script>

Kalau sudah memilih salah satu javascriptnya

Sekarang kalian pasang Javascript tersebut di atas kode </head>

Tinggal Save Template Dan Lihat Hasilnya.

Cukup sekian dan terimakasih, semoga artikel dari saya tentang Simple CSS Notification From Topini Bermanfaat.
Jangan lupa tinggalkan jejak kalian d kolom komentar ya :)