Harga Jual / Beli Bitcoin

Membuat Notification Bar Dengan Background Animasi Warna

07:50:00 Wahab Saputra 0 Comments

Membuat Notification Bar Dengan Background Animasi Warna - Notification Bar atau bisa juga kita sebut sebagai welcome bar. Untuk pengguna wordpress tentu sudah akrab dengan Notification Bar, penerapannya pun juga sangat mudah tanpa harus script atau coding karena ia merupakan plugin berbeda dengan blogspot harus menggunakan css, html dan javascript untuk penerapan.

Membuat Notification Bar Dengan Background Animasi Warna

Notification Bar ini befungsi untuk memberikan informasi atau pengemuman kepada para visitors tentang hal-hal tertentu. sebenarnya tutorial ini saya ambil dari Blog Kompi Ajaib namun saya akan sedikit memodifikasi agar welcome bar ini bisa lebih menarik visitor untuk melihatnya karna saya akan memberi efek animasi background colors. Tidak panjang lebar lagi langsung saja kita menuju cara penerapannya :


Step 1 > Login Blogger, Klik menu Template > Edit HTML
Step 2 > Copy kode CSS di bawah ini, lalu paste tepat diatas atau sebelum  ]]></b:skin> atau </style>

@keyframes color {height:50px;
 0%   { background: #33CCCC; }
 20%  { background: #33CC36; }
 40%  { background: #B8CC33; }
 60%  { background: #FCCA00; }
 80%  { background: #33CC36; }
 100% { background: #33CCCC; }
}

#welcome_bar{width:auto;height:auto;display:block;text-align:center;line-padding:8px 20px;color:#fff;position:relative;margin:0 auto;font-weight:normal
  background:#33CCCC;
animation: color 9s infinite linear;
  text-align: center;
  padding: 2em;
}
#welcome_bar a{background:#3B81DE;color:#fff;padding:0 6px;border:1px solid transparent;border-radius:4px;font-weight:bold;}
#close_welcome_bar {display:inline-block;cursor:pointer;padding:0 4px;position:absolute;top:0px;right:5px;font-weight:bold;font-size:18px}

Step 3 > Copy kode HTML di bawah ini, setelah itu paste tepat di bawah atau setelah tag <body>

<div id='welcome_bar'>
    Domain TLD Gratis Dari com, silahkan klik <a href='#' title='Unduh Update'>di sini</a>
    <span data-target='#welcome_bar' id='close_welcome_bar'>&#215;</span>
</div>

Step 4 > Setelah itu simpan kode javascript di bawah ini tepat diatas atau sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
var button=document.querySelector("#close_welcome_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
//]]>
</script>

Step 5 > Simpan Template dan lihat hasilnya.....

Jika anda ingin menaruhnya di bagian bawah silahkan taruh kode HTMLnya di  tepat diatas atau sebelum tag </body>

Demikian tutorial kali ini tentang Membuat Notification Bar Dengan Background Animation Colors semoga dapat bermanfaat. Thank to Blog Kompi Ajaib.

0 komentar:

Jangan titip link.....saya pasti berkunjung balik....
Beri tahu saya di kotak komentar kalau sobat sudah Follow Blog ini, agar saya bisa segera Folback dan tidak ketinggalan Update artikel dari blog sobat...!!!