June 21, 2015

Cara Membuat Top Menu Bar di Atas Header Blog

June 21, 2015

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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

2 comments on Cara Membuat Top Menu Bar di Atas Header Blog

  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

Contact Form

Name

Email *

Message *