Blog Artikel
Select Menu
  • Home
  • Blogging
    • Articles
    • Legends
    • Google Adsense
    • Bussiness
  • Tools
    • Font Awesome
    • HTML Editor
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Sitemap
  • About Me
Home » Trik n Script Ngeblog » Cara Membuat Menu Horizontal

19 May 2012

Cara Membuat Menu Horizontal

Add Comment
Trik n Script Ngeblog
19 May 2012
Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:



Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.

blackleft.gifblackright.gif
greenleft.gifgreenright.gif
redleft.gifredright.gif
unguleft.gifunguright.gif
yellowleft.gifyellowright.gif
blueleft.gifblueright.gif


Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://superinhost.com/gambar/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://superinhost.com/gambar/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}


Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
background: url("http://superinhost.com/gambar/redleft.gif") no-repeat left top;

background: url("http://superinhost.com/gambar/redright.gif") no-repeat right top;


Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini
<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >


4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :
<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>


teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>


terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.
Suka Artikel? Bagikan: Facebook Twitter Google+

0 Comments

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Mengenai Saya

Unknown
View my complete profile

Entri Populer

  • The Story and Legend of Mount Bromo
    A long time ago, there lived a beautiful woman by the name Roro Anteng. She was a reknown beauty and had attracted the attention of an evil ...
  • What's Google Adsense???
    AdSense may be one of the fastest and easiest ways to monetize traffic to your web site whether you have products or services for sale or yo...
  • The Legend of Mount Tangkuban Perahu
    Once upon a time in west Java, Indonesia lived a wise king who had a beautiful daughter. Her name was Dayang Sumbi. She liked weaving ver...
  • JAGA KESEHATAN DENGAN MUSIK
    Haiiii, sobat blogger Pada postingan tulisan saya kali ini, saya mengangkat tema “JAGA KESEHATAN DENGAN MUSIK” Apa jadinya ya dunia ini ta...
  • The Making Of A Legend
    Sometimes things come together as they should. They recently have for international businessman, lawyer and philanthropist Emile E. Gouiran ...

Label

  • Articles
  • Blogging Tutorial
  • Business
  • Coding Program
  • Etika Dan Profesionalisme TSI
  • Google Adsense
  • Jarkom
  • Legends
  • Pengantar Telematika
  • Teori Organisasi Umum #2
  • Tips SEO
  • Trik n Script Ngeblog
  • Tugas Softskill

Archives

  • ► 2016 (1)
    • ► January (1)
  • ► 2014 (5)
    • ► June (1)
    • ► May (2)
    • ► March (1)
    • ► January (1)
  • ► 2013 (12)
    • ► December (1)
    • ► November (2)
    • ► June (4)
    • ► January (5)
  • ▼ 2012 (81)
    • ► November (8)
    • ► June (2)
    • ▼ May (24)
      • How To Make Blog Widget
      • How To Change Template Blogger
      • Free Blog Services Available
      • How To Creat A Blog
      • Disaat Kita Dihadapkan Pada Situasi Harus Memilih
      • Bijak Dalam Berpikir
      • Cara Memasang Meta Tag Otomatis pada artikel di Blog
      • DAFTAR ISI
      • Cara memasang tombol social bookmark di blog blogspot
      • Cara Memasang breadcrumb di blog blogspot
      • Merubah Title Blog dengan Title Postingan
      • Cara Membuat Menu Horizontal
      • Cara Membuat Menu Tab View
      • Cara Membuat Template di Blogger
      • Cara Membuat Readmore di Blog #2
      • Cara Membuat Readmore di Blog
      • Cara Pasang Flash Di Blog
      • Cara Membuat Domain co.cc
      • Cara Cepat Menaikkan Alexa rank
      • Cara Memasang banner di header blog
      • Cara Membuat Histats di Blog
      • Membuat Daftar Isi Sitemap Blog Otomatis
      • Memulai Kebajikan Dari Hal Kecil
      • Arti Dari Sebuah Kehidupan
    • ► April (43)
    • ► March (4)
  • ► 2011 (37)
    • ► December (7)
    • ► November (4)
    • ► October (8)
    • ► September (2)
    • ► August (1)
    • ► April (5)
    • ► March (6)
    • ► February (4)
  • ► 2010 (14)
    • ► December (3)
    • ► November (9)
    • ► October (2)

CHATS

Label

  • Articles
  • Blogging Tutorial
  • Business
  • Coding Program
  • Etika Dan Profesionalisme TSI
  • Google Adsense
  • Jarkom
  • Legends
  • Pengantar Telematika
  • Teori Organisasi Umum #2
  • Tips SEO
  • Trik n Script Ngeblog
  • Tugas Softskill

Label

  • Articles
  • Blogging Tutorial
  • Business
  • Coding Program
  • Etika Dan Profesionalisme TSI
  • Google Adsense
  • Jarkom
  • Legends
  • Pengantar Telematika
  • Teori Organisasi Umum #2
  • Tips SEO
  • Trik n Script Ngeblog
  • Tugas Softskill

Label

  • Articles
  • Blogging Tutorial
  • Business
  • Coding Program
  • Etika Dan Profesionalisme TSI
  • Google Adsense
  • Jarkom
  • Legends
  • Pengantar Telematika
  • Teori Organisasi Umum #2
  • Tips SEO
  • Trik n Script Ngeblog
  • Tugas Softskill
Copyright 2013 Blog Artikel - All Rights Reserved
Template by Dian Anarchyta - Powered Blogger