Top Ad 728x90

Cara Membuat Welcome Bar Dengan Tombol Close Di Blog

Cara Membuat Welcome Bar Dengan Tombol Close Di Blog


Dalam kesempatan kali ini kami akan memberikan tutorial Cara Membuat Welcome Bar Dengan Tombol Close Di Blog. Welcome bar biasanya terletak pada sisi atas blog dan berfungsi sebagai notifikasi yang berisi pesan untuk para pengunjung blog. Cari ini kami dapat dari blog Kompi ajaib yang di bahas oleh kang Adhy Suryadi.


Langsung saja ikuti langkah-langkah berikut untuk membuat welcome bar di blog

  • Login ke blog sobat, klik menu template>>edit HTML
  • Copy kode CSS berikut dan pastekan tepat di atas ]></b:skin> atau </style>
 #welcome_bar{width:auto;height:auto;display:block;text-align:center;line-height:1.6em;padding:8px 20px;background:#ff847e;color:#fff;position:relative;margin:0 auto;font-weight:normal}
#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} 


  • Copy kode HTML berikut dan pastekan tepat di bawah kode <body>
 <div id='welcome_bar'>
    Sekarang Anda bisa unduh update terbaru dari blog ini, silahkan klik <a href='#' title='Unduh Update'>di sini</a>
    <span data-target='#welcome_bar' id='close_welcome_bar'>&#215;</span>
</div> 

Kata-kata notifikasi tersebut dapat sobat ganti sesuai keinginan sobat


  • Copy kode Javascript berikut dan pastekan di atas kode </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> 

Langkah terakhir simpan dan lihat hasilnya.

#Bantu Bagikan Artikel Kami Dong :)

0 komentar:

Post a Comment