• About
  • Sitemap
  • Privacy Policy
  • Disclaimer
  • Contact

aisyah arum1321

  • Home
  • Tutorial
    • CORELDRAW X5
    • MERAKIT PC
    • CARA MEMBUAT FACEBOOK
    • PHOTOSHOP
    • Cara Install Avira Free Antivirus 2013 Offline
  • Kelas
    • Kelas X
    • Kelas XI
    • Kelas XII
  • Materi
    • Merawat Perawatan Multimedia
  • Kejuruan
    • Multimedia
    • RPL
    • TKJ
    • Perawatan Sosial
  • Obat-obatan
    • MANGGIS
    • KENCUR
    • KEMUNING
    • JATI BELANDA
    • JARAK BALI
  • Hiburan
Home » Uncategories » Membuat Menu Bar pada Blog

Membuat Menu Bar pada Blog


Kali ini saya memposting cara membuat menu pada blog,langkahnya gak sulit mudah aja tinggal ikuti langkah-langkah yang ada di bawah ini ya :)
cara membuat menubar di blog


1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7. Pengecualian untuk yang tidak ada kode pada no 7, sobat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada sobat bisa menaruhnya di bawah kode yang mirip dengan <div id='header...
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>
Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
  • Di setiap blog juga ada juga yang berbeda tanda kutipnya. Sobat bisa menelitinya lagi. Tanda kutip ' atau "
Bagaimana? mudahkan? gausah banyak cara buat merubah menu pada blog.
selamat menjoba kawan :)
Posted by Unknown on Rabu, 20 November 2013 - Rating: 4.5
Title : Membuat Menu Bar pada Blog
Description : Kali ini saya memposting cara membuat menu pada blog,langkahnya gak sulit mudah aja tinggal ikuti langkah-langkah yang ada di baw...

Share to

Facebook Google+ Twitter

1 Response to "Membuat Menu Bar pada Blog"

  1. Unknown20 November 2013 pukul 06.11

    like...

    BalasHapus
    Balasan
      Balas
Tambahkan komentar
Muat yang lain...

Posting Lebih Baru
Posting Lama
Beranda
Langganan: Posting Komentar (Atom)

Label

  • etimologi
  • materi
  • obat-obatan
  • tutorial
Powered By Blogger

Formulir Kontak

Nama

Email *

Pesan *

Cari Blog Ini

Translate

Pengikut

Mengenai Saya

Unknown
Lihat profil lengkapku

Total Tayangan Halaman

Entri Populer

  • manfaat pengemasan karya kerajinan tekstil
    dalam suatu kerajinan tekstil tentulah akan ada proses pengemasan dan proses ini bermanfaat untuk : 1. kemampuan /daya membungkus yang baik...
  • Cara Menginstal Borland C++ 5.02 di Windows 7
    Berikut langkah- langkah menginstal Borland C++ 5.02 di Windows 7 : 1. Buka softtware Borland C++ 5.02 yang sudah di download tadi. 2....
  • macam-macam tumbuhan penghasil warna alam
    dari berbagai warna yang kita ketahui,ternyata ada pewarna yang tebuat dari tumbuh-tumbuhan alam. berukut ini adalah macam-macam pewarna ala...
  • cara mengatasi layar laptop yang terkena bluescreen dan cara mengatasi penebabnya
    Bagi kalian yang laptopnya mengalami bluescreen atau layar laptop berubah menjadi biru gak perlu khawatir, ikuti saja langkah-langkah dibaw...
  • bentuk-betuk kerja prestatif
    conto-contoh bentuk kerja prestatif : A. Di Lingkungan Keluarga    1.menanamkan perilaku disiplin dan ketegasan dalam mendidik anak.    2...
  • BUNGA KENOP
    Bunga Kenop ditanam di pekarangan dan di tanam sebagai tanaman hias atau tumbuh liar di ladang yang cukup mendapat sinar matahari. Tumb...
  • Cara Membuat Gambar SlideShow di Blog / Website
    Untuk beberapa kategori blog atau website, pemakaian gambar slide show pada blog / website sangat diperlukan, disamping untuk mempercanti...
  • sumber daya yang dibutuhka dalam kegiatan kerja produktif
    sumber daya yang dibutuhkan dalam kegiatan kerja prouktif antara lain : 1. peguasaan diri dalam bentuk inisiatif. 2. trampil dalam memanfa...
  • Cara Mengatasi Blue Screen dan Penyebab Blue Screen pada Windows
    Bagi kalian yang laptopnya mengalami bluescreen atau layar laptop berubah menjadi biru gak perlu khawatir, ikuti saja langkah-langkah dibaw...
  • mengatasi heatsink agar tidak cepat panas
    Cara Agar Laptop Tidak Cepat Panas Sobat sedang membaca artikel tentang Cara Agar Laptop Tidak Cepat Panas. berikut penjelasan Cara...

Wikipedia

Hasil penelusuran

Arsip Blog

  • ▼  2013 (74)
    • ▼  November (68)
      • Manggis
      • KENCUR
      • KEMBANG KERTAS
      • KEMUNING
      • JATI BELANDA
      • JARAK BALI
      • JERUK NIPIS
      • JAMBU BIJI
      • CIPLUKAN
      • DELIMA
      • DAUN DEWA
      • CENGKEH
      • BROKOLI
      • BUNGA KENOP
      • ALPUKAT
      • BELUNTAS
      • BELIMBING WULUH
      • BAWANG PUTIH
      • TEMPUYUNG
      • JAHE
      • HANDEULEUM
      • SAMBILOTO
      • KEJI BELING
      • KUNYIT
      • TEMULAWAK
      • KUMIS KUCING
      • Cara Merawat Handycame
      • Mengenal Komponen Komputer
      • Istilah dan kamus twitter
      • Cara Mencuri Perhatian Google dengan Googlebot
      • Cara/Tips mengatur Font di Blogspot
      • Cara Membuat Huruf Terbalik
      • Melacak IP Address Pengirim Email
      • Kelebihan dan Manfaat Linux
      • macam-macam tumbuhan penghasil warna alam
      • bentuk-betuk kerja prestatif
      • manfaat pengemasan karya kerajinan tekstil
      • sumber daya yang dibutuhka dalam kegiatan kerja pr...
      • Fungsi Komponen - Komponen Motherboard
      • fungsi power supply pada komputer
      • mengatasi heatsink agar tidak cepat panas
      • Membuat Foto Menjadi Kartun Dengan Photoshop
      • PENGARUH PERKEMBANGAN ILMU PENGETAHUAN DAN TEKNOLO...
      • Sejarah Perkembangan Teknologi Informasi dan Komun...
      • cara membuat facebook
      • Multimedia
      • Penyebab Hardisk Cepat Rusak
      • Fungsi Tools pada CorelDraw
      • Cara Menginstal Borland C++ 5.02 di Windows 7
      • cara mengatasi layar laptop yang terkena bluescree...
      • Cara Mengatasi Blue Screen dan Penyebab Blue Scree...
      • Cara Menginstal NERO
      • komponen-komponen pada CPU beserta fungsinya
      • Cara Menginstal Windows7
      • Cara Menginstal Adobe Dreamwaver
      • Cara Mengganti Template Blog
      • Cara Mengubah Warna Link pada Blog
      • Cara Membuat Gambar SlideShow di Blog / Website
      • Cara Membuat Menu Page dengan Laman
      • Membuat Menu Bar pada Blog
      • Cara Merawat Kamera
      • Cara Merawat Memoricard/CardRider
      • Cara Merawat Laptop Dengan Baik
      • Cara Merawat Sanner
      • Membuat Layout Pada Blog
      • Membuat Tabel Dengan Kode HTML
      • Cara Merawat Printer
      • Cara Membuat Blog
    • ►  Oktober (2)
    • ►  Agustus (3)
    • ►  Juli (1)
Copyright © 2012 aisyah arum1321 - All Rights Reserved
Design by Mas Sugeng - Powered by Blogger