Cara Membuat Tulisan Pemberitahuan di atas Header Blog
Sering kali kita menjumpai situs yang mempunyai header blog dengan tulisan seperti donasi atau ajukan keluhan di atas header, nah kali ini kita akan menciptakan header tersebut dengan CSS dan Jquery yang tergolong ringan, apabila anda ingin mencobanya silahkan di coba dan anda praktekan di blog anda.Penting untuk di lakukan apabila anda mempunyai sebuah situs website blog untuk menerapkan kode ini, karena para pembaca akan langsung melihat baner peringatan di atas header blog utama anda dengan menyimpan kode-kode di bawah ini, saya sarankan anda bisa membuat sebuah kotak pencarian atau daftar isi dari blog anda, hal yang menurut anda penting di beritahukan kepada pembaca blog atau pengunjung blog anda maka harus anda pasang di atas header
Dengan adanya pemberitahuan ini maka setiap orang yang mengunjungi blog akan segera tau baner apa atau pemberitahuan apa yang akan anda berikan, dan mungkin sebagian besar akan segera mengeklik pemberitahuan tersebut dengan rasa ingin tau mereka, maka simaklah dengan teliti agar tidak salah meletakan kodenya.
Untuk menggunakanya kita hanya perlu sedikit step by step memasukan beberapa susunan CSS HTML dan JS, pertama salin kode CSS di bawah ini.
#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}
Letakan di atasnya kode </style> atau ]]></b:skin>
Selanjutnya kita menuju HTML dan copy kode di bawah ini dan letakan tepat di bawahnya kode <body>
<div id='welcome_bar'>
Silahkan ajukan keluhan dengan klik <a href='#' title='Unduh Update'>di sini</a>
<span data-target='#welcome_bar' id='close_welcome_bar'>×</span>
</div>Sesuaikan kata sesuka hati anda untuk meletakan kata di atas header tersebut.
Maka selanjutnya anda copy kode ini dan paste di barisan Javascript .
<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 save Template dan silahkan cek untuk melihat hasilnya, apabila warnanya kurang berkenan anda bisa mengganti warna dengan mengubah CSS di atas dengan warna kode yang anda kehendaki, lalu save kembali template anda.
Dengan adanya header pemberitahuan ini maka sangat menguntungkan bagi anda para pengguna situs blog atau website, sangat memungkinkan seseorang membuka atau mengetahui pemberitahuan pembing di blog anda, ini adalah solusi jitu untuk alarm blog anda dalam sebuah postingan atau berita penting, anda juga bisa dengan mudah memodifikasi warna dan gaya font agar tampilanya cantik dan menarik untuk dilihat oleh para penggunjung situs anda, usahakan menggunakan font yang mudah dibaca dan ringan saat loading, agar para pengunjung situs anda tidak kecewa ketika sedang berkunjung, dan gunakan tata bahasa yang sesuai dengan tos Google, agar situs anda tidak mengandung kata yang dilarang oleh Google.
Posting Komentar untuk "Cara Membuat Tulisan Pemberitahuan di atas Header Blog"
Dilarang keras menggunakan URL link hidup dalam bentuk apapun !!