Home » » Cara Membuat Top Menu Bar di Atas Header Blog

Cara Membuat Top Menu Bar di Atas Header Blog

Top Menu Bar di Atas Header Blog
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'>
        &#9990; 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/).*

Thanks for reading & sharing Cara Membuat Top Menu Bar di Atas Header Blog

Previous
« Prev Post

2 comments:

Comment Page:
  1. Kalau cara nambah home, contact dll bagaimana ?

    ReplyDelete
    Replies
    1. Pembuatannya bisa dilakukan pada halaman statis. Coba cari keyword "halaman statis" di blog ini. Kali aja nemu.

      Delete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox