Cara Membuat Menu Horizontal Pada Blog

Nah, Sobat2 Mungkin Lagi pada Rajin Nih.. Yang Utak atik Tampilan Blog :D
Tapi Hati-Hati Loh Takutnya Bukannya jadi bagus tapi jadi Berantakan :D Dan Sayapun Pernah Mengalaminya wkwkwkwkwk..~ :D Tapi Syukur Udah Bisa Dikembalikan Ke normal Lagi..
dan kali ini Mau Bahas Buat Menu Di Blog Kan.. ? :D
Nah Gw Mau Share Nih Buat Para Pemula yang Belum Tau.. Dan Juga Cara Mengatasi Masalah pada Saat Pembuatan Seperti Biasanya :)

Seperti yang kita ketahui bersama bahwa menu yang di sediakan pihak blogger memiliki tampilan yang tetap. ( sepengetahuan saya ) sehingga bagi sobat blogger yang hobby utak atik blog, mungkin sedikit kurang mengasikkan. Kali ini, Gw Mau Post Gimana Caranya Buat Menu Horizontal serta Di Hiasi dengan Menu Dropdown Juga :D Yang Belum Tau Baca Dengan Teliti.. Tapi Gak Susah Kok cukup mudah..

Bagi sobat yang tertarik untuk membuat menu horisontal di blog,silahkan ikuti tutorial berikut.

1. Log in dulu ke akun blog sobat.
2. Klik Rancangan --> edit html
3. Cari kode ]]></b:skin> ( Gunakan Ctrl + F untuk memudahkan percarian)
4. Letakkan kode berikut di atasnya.

#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmFik0LM3BdPYREr-RGARoWLrY-O9O-7W-2xcz70A3qJJVJojEsfJW4V8ZI68ek1l6-oNYwbg7hsde-gPQBgzpnRrDtsdt4ogFhaVLfMsxM589JnDmo1uEImddqgrh0fLDp9fD1V-plG4/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmFik0LM3BdPYREr-RGARoWLrY-O9O-7W-2xcz70A3qJJVJojEsfJW4V8ZI68ek1l6-oNYwbg7hsde-gPQBgzpnRrDtsdt4ogFhaVLfMsxM589JnDmo1uEImddqgrh0fLDp9fD1V-plG4/) repeat-x;
height:33px;
}

#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#tejas li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNk7ak7SlZYJPCTq_3UBZJJ6xZJXQNqlSEqSW4GX1sEC5MXuo4qn1y_fcgtskoBBmRFFbq5TpDztQJQigFzVXVpHsAFk3JjkJmntwNkIR3qwL7ERKPBf8-3E27Mdw-wrhiT1WLO6XR8gKE/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}

#tejas li li a:hover, #tejas li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNk7ak7SlZYJPCTq_3UBZJJ6xZJXQNqlSEqSW4GX1sEC5MXuo4qn1y_fcgtskoBBmRFFbq5TpDztQJQigFzVXVpHsAFk3JjkJmntwNkIR3qwL7ERKPBf8-3E27Mdw-wrhiT1WLO6XR8gKE/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#tejas li li {
}

#tejas li ul a {
width: 140px;
}

#tejas li ul a:hover, #tejas li ul a:active {
}

#tejas li ul ul {
margin: -34px 0 0 170px;
}

#tejas li:hover ul ul, #tejas li:hover ul ul ul,
#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
left: -999em;
}

#tejas li:hover ul, #tejas li li:hover ul,
#tejas li li li:hover ul, #tejas li.sfhover ul,
#tejas li li.sfhover ul, #tejas li li li.sfhover ul {
left: auto;
}

#tejas li:hover, #tejas li.sfhover {
position: static;
}

NOTE :

Modifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog sobat :D Supaya Sesuai.. Tapi Menurut Gw Lumayan cocok lah Segitu Buat Blog gw :D
Hampir semua bagian dari kode di atas bisa di edit, tapi kalo menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya saja... terserah sobat.. :D Asal mengaturnya Benar agar tidak jadinya Malah acak2an.. :D

Lalu Simpan/Save Aja Dulu Biar Memudahkan.. :)

5. Selanjutnya.. nah untuk yang 5 Ini ada 2 Cara (kalo dari mimin) Karena Rata2 selalu ada Masalah Di Tahap Ini..

Cara 1..!!!

-Cari Kode Ini <div id='content-wrapper'> ( cari dengan Ctrl+F ) Ketemu...? lalu Copas Kode Di Bawah Ini Diatas Kode Tadi (<div id='content-wrapper'>)

Gak Bisa.. ?:o Nah..Biasanya Ada Masalah Disini Nih Code (<div id='content-wrapper'> ) gak Ketemu T.Ta ..?
Jangan Takut Sobat Ikuti Cara kedua berdasarkan Cara Yang Gw lakukan :)

Cara 2..!!!- Kita Masuk Ke Tata Letak, lalu Pilih kotak Yang Ada Dibawah Header lalu Pilih Tambahkan Gadget/Add Gadget. Dan Otomatis Akan Membuka Jendela Browser baru.. :)
- Lalu Dari Jendela Tersebut Pilihlah HTML/JavaScript

- Lalu Anda Akan dibawa KeDunia Lain xD (Kidding). Ke Tempat lain xD

- Lalu Masukan Kode yang sama Seperti yang ada Pada Cara 1 Ke Kotak
Konten..

Lalu....

Ganti tulisan yang berwarna biru dengan link dari kategori atau bisa juga dengan linkposting.

contoh link kategori atau label, modelnya seperti ini.

http://narutoblogid.blogspot.com/search/label/BLOG

sedangkan link posting seperti ini .

http://narutoblogid.blogspot.com/2013/10/naruto-manga-chapter-651.html

Ganti tulisan berwarna ungu dengan url blog sobat.

Ganti link name dengan judul kategori atau judul posting atau apapun yang penting menarik untuk di klik. untuk link title samakan saja dengan link name.

Atur Aja Semenarik Mungkin Apa Yang Akan Anda Urutkan dalam Menu tersebut :)
Lalu Save/Simpan dan Lihat Apa Yang Terjadi Pada Blog Anda...
Berantakan.. ? xD Tentu Tidak Jika Sesuai dengan Cara tadi Dan Tidak ada kesalahan Dalam Melakukan Setting.. :D.

Sekian Dari Saya.. Dan Jika ada Pertanyaan Mengenai Cara Membuat Menu Horizontal pada Blog bisa Ditanyakan Di Kolom Komentar.. :D Terima Kasih karena Telah Berkunjung dan Juga Mohon maaf bila ada kesalahan dalam Penulisan atau kata2 yang salah xD
"Kesempurnaan Hanyalah milik Tuhan (Allah SWT.) :) :)
SEKIAN DAN TERIMA KASIH :)

Aliansi Shinobi and Kunoichi Indonesia - ASKI II

Rabu, 16 Oktober 2013

Cara Membuat Menu Horizontal Pada Blog

Cara Membuat Menu Horizontal Pada Blog

1 komentar:

My Music