Cara Membuat Top Menu Bar di Atas Header Blog
June 21, 2015
SALAH satu klien CB minta dibuatkan Top Menu Bar di Atas Header Blog yang isinya nomor telepon. Ia menunjukkan situs yang ada top barnya.
Setelah dicek, ternyata situs yang jadi rujukannya bukan blog blogspot, tapi selfhosting CMS Wordpress. Tentu saja, templatenya juga Wordpress (WP Theme), bukan template blogspot.
Gak masalah. CB "intip" saja kodenya. Lalu, dibuatkanlah top bar itu sesuai dengan contohnya. Sebagai gambaran, tampilan top menu bar ini mirip top bar Google.
Jika Anda ingin juga membuatnya, terutama untuk blog Toko Online, ini dia kode dan cara pemasangannya:
KODE CSS
Copas di atas kode ]]></b:skin>
#topbar {
background:#EE4F00;
color: #FFF;
padding: 10px;
height: 40px;
margin-bottom: 10px;
}
#containertop {
width: 100%;
margin: 0px auto;
background: #000;
text-align: center;
color: #fff;
font-weight: bold;
padding: 5px;
}
#topbar .fast-response {
float:center;
text-align:center;
font-family: Arial;
padding-left: 20px;
font-family: inherit;
font-weight: 700;
font-size: 16px;
}
KODE HTML:
Copas di bawah kode <body>
<div id='topbar'>
<div id='containertop'>
<div class='fast-response'>
✆ Call Center: 1234 5678 90
</div>
</div>
</div>
Ganti Call Center: 1234 5678 90 dengan nomor telepon Anda. atau bisa juga diisi email, PIN BB, dll.
Save Template!
Kini Top Menu Bar sudah muncul di atas Header Blog Anda. Top bar ini tidak mempengaruhi loading karena hanya berupa kode CSS dan HTML, tanpa JavaScript. Good Luck! (http://contohblognih.blogspot.com/).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
Kalau cara nambah home, contact dll bagaimana ?
ReplyDeletePembuatannya bisa dilakukan pada halaman statis. Coba cari keyword "halaman statis" di blog ini. Kali aja nemu.
Delete