Ditulis oleh: Ditulis pada: 4/09/2015
Welcome bar ini biasanya disimpan di paling atas dari sebuah blog. Dan biasanya juga welcome bar ini berisi pesan untuk pengunjung blog. Dengan begitu ketika seorang pengunjung masuk maka yang pertama terlihat adalah welcome bar karena biasanya menggunakan warna yang lebih mencolok dan berada paling atas seperti pada gambar di atas.
Pesan-pesan tersebut bisa berupa apa saja, misalnya pengumuan untuk update fitur dari web tersebut atau sesuatu hal yang baru mengenai blog tersebut.
Sebenarnya ada cara termudah untuk membuat welcome bar ini yaitu dengan welcome bar dari AddThis. Namun bagi yang alergi dengan script js dari pihak ketiga, kini saya share cara membuat welcome bar sendiri dan dilengkapi dengan tombol close dengan javascript sehingga tidak menggunakan jquery agar tidak membebani blog. Dengan begitu jika ada pengunjung yang merasa terganggu dengan welcome bar tersebut bisa menutupnya.
Kode CSS
Simpan kode CSS di bawah ini di atas kode
]]></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}
Kode HTML
Silahkan simpan kode HTML di bawah ini 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'>×</span>
</div>
Silahkan sesuaikan pesannya dengan pesan yang ingin Anda tampilkan.
Kode Javascript
Silahkan simpan kode di bawah ini 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>
Silahkan lihat demo di JSFiddle DI SINI.