Solutions For You

logo
close
Blog ini akan Saya hapus soalnya banyak masalah di Webmaster. Maklum dulunya blog gado - gado, isinya copasan haha. Mungkin nanti muncul blog baru pengganti Blog Saeful13 dan tentunya pake TLD biar terlihat professional gitu haha..

Sebentar, ente tahu TLD gak ? Kalau gak tahu TLD itu Top Level Domain :) Masih belum ngerti juga ? Ane jelasin lagi ya, TLD merupakan akhiran pada suatu nama domain yang mengindikasikan pemilik tingkatan tertinggi Domain tersebut dan jenis domain tersebut. Kayak .com, .net dan kawan - kawannya :)

#JustKiddingBro
close
menu

Membuat menu horizontal blog

menu horizontalSelamat siang sob, pada kesempatan kali ini saya akan share mengenai bagaimana membuat menu horizontal pada blog. Sebenarnya tutorial ini sudah banyak sekali blog yang membahas mengenai Membuat menu horizontal blog. Sengaja saya share disini untuk berbagi ilmu kepada sobat semua. Tutorial ini saya dapat dari inernet dan saya modifikasi sendiri agar terlihat berbeda. Sebelumnya saya juga pernah share Cara membuat menu horizonta l di blog. Ok langsung saja tanpa basa - basi, disini saya akan memberikan menu blog dengan 3 variasi warna. Untuk lebih lanjut silakan sobat simak artikel saya ini.
Langkah - langkah memasang Menu Horizontal Blog :>
  • Pertama sobat login ke blogger.com dengan akun sobat.
  • Kemudian sobat cari kode ]]></b:skin> ( Gunakan tombol F3 untuk memudahkan pencarian ).
  • Silakan sobat pilihyang sobat inginkan.
Style 1
menu

ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/OFF.png") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#000000;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/DIVIDER.png") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/HOVER.gif") no-repeat top right;
}
Style 2
styl2
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/OFF.png") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#000000;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/DIVIDER.png") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/HOVER.gif") no-repeat top right;
}
Style 3
style3
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/OFF-1.png") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:1px solid #1200ff;
border-top:1px solid #1200ff;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/DIVIDER-1.png") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/HOVER-1.gif") no-repeat top right;
}
  • Setelah sobat memilih, sobat copy/paste kode Menu yang telah dipilih dan letakkan kode tersebut diatas kode ]]></b:skin>.
  • Kemudian Save.
  • Selanjutnya kita pindah ke Tata Letak Tambah Gadget Pilih HTML/JavaScript.
  • Kemudian Copy/Paste kode dibawah ini dan simpan.
  • Selanjutnya letakkan Gadget tersebut dibawah atau diatas Header, sesuai keinginan sobat.
  • Terakhir Simpan Setelan
<ul id='menu'>
<li><a href='http://saeful13.blogspot.com/'>Home</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Photoshop'>Photoshop</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Tutorial Blog'>Tutorial Blog</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Unik'>Unik</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Lain - lain'>Lain - lain</a></li>
<li><a href='http://saeful13.blogspot.com/2012/03/daftar-isi_15.html'>Daftar Isi&lt;/a></li>
<li><a href=&#039;http://saeful13.blogspot.com/2012/05/link-exchange.html'>Link Exchange</a></li>
<li><a href='https://plus.google.com/111695896029061251608'>About me</a></li>
</ul>

Semoga bermanfaat ..
Previous
Posting Lama

3 Komentar

Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode pendek, gunakan tag <i rel="code"> ... KODE ... </i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre"> ... KODE ... </i>
• Untuk menyisipkan catatan, gunakan tag <b rel="quote">.. TEKS ... </b>
• Untuk menyisipkan gambar, gunakan tag <i rel="image"> ... URL GAMBAR ... </i>

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Konversi Kode OOT

About | Contact | Forum | Sitemap | Privacy
© Copyright 2013 Saeful13 | Asuransi Kesehatan Terbaik Indonesia - All Rights Reserved