Cara Cepat Membuat Notification Bar Dengan Background Animasi Warna Update Terbaru

Sedikit Info Seputar Membuat Notification Bar Dengan Background Animasi Warna Terbaru 2017 - Hay gaes kali ini team Android Media, kali ini akan membahas artikel dengan judul Membuat Notification Bar Dengan Background Animasi Warna, kami selaku Team Android Media telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Media. semoga isi postingan tentang Artikel Tutorial Blogspot, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Notification Bar Dengan Background Animasi Warna Terbaru
link: Membuat Notification Bar Dengan Background Animasi Warna

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Membuat Notification Bar Dengan Background Animasi Warna Terbaru dan Terlengkap 2017

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.

Itulah sedikit Artikel Membuat Notification Bar Dengan Background Animasi Warna terbaru dari kami

Semoga artikel Membuat Notification Bar Dengan Background Animasi Warna yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Media. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Membuat Notification Bar Dengan Background Animasi Warna