Membuat Welcome Kafe Dengan Tombol Close Di Blog
Welcome kafetaria ini biasanya disimpan di paling atas dari sebuah blog. Dan biasanya juga welcome kafetaria ini berisi pesan untuk pengunjung blog. Dengan begitu saat seorang pengunjung masuk maka yang pertama terlihat yaitu welcome kafetaria alasannya yaitu biasanya memakai warna yang lebih mencolok dan berada paling atas menyerupai pada gambar di atas.
Pesan-pesan tersebut dapat berupa apa saja, contohnya pengumuan untuk update fitur dari web tersebut atau sesuatu hal yang gres mengenai blog tersebut.
Sebenarnya ada cara termudah untuk menciptakan welcome kafetaria ini yaitu dengan welcome kafetaria dari AddThis. Namun bagi yang alergi dengan script js dari pihak ketiga, sekarang aku share cara menciptakan welcome kafetaria sendiri dan dilengkapi dengan tombol close dengan javascript sehingga tidak memakai jquery semoga tidak membebani blog. Dengan begitu jikalau ada pengunjung yang merasa terganggu dengan welcome kafetaria tersebut dapat menutupnya.
Kode CSS
Simpan instruksi 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 instruksi HTML di bawah ini sempurna di bawah instruksi
<body> <div id='welcome_bar'>
Sekarang Anda dapat 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 instruksi di bawah ini di atas instruksi
</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.
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Welcome Kafe Dengan Tombol Close Di Blog"
Posting Komentar