Minggu, 21 Juni 2015

Cara Membuat Top Menu Bar di Atas Header Blog

Unknown

Minggu, 21 Juni 2015

Memasang Top Menu Bar di Atas Header Blog

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/).*

0 Comments

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.