Membuat Menu Horizontal Wordpress

Membuat Menu Horizontal

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header.

Berikut langkah membuat menu horizontal dalam blog kamu :

• Login ke account blogger kamu.
• Pilih Tata Letak –> Edit HTML –> centang “Expand Template Widget”.
• Cari Kode kode ]]> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* navbar
================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Catatan :

1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.

• Kemudian cari kembali kode seperti di bawah ini.

showaddelement=’no’>
(Header)’ type=’Header’/>

… dan seterusnya …

• Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

• http://Alamat_Blog_Kamu.blogspot.com/‘>home
• http://Link_yang_dituju‘>Add Link
• http://Link_yang_dituju‘>Add Link
• http://Link_yang_dituju‘>Add Link
• http://Link_yang_dituju‘>Add Link

http://Alamat_Blog_Kamu.blogspot.com/search’ id=’searchform’ method=’get’ name=’searchform’>

• Klik tombol SIMPAN TEMPLATE.
• Selesai.

Jika kita menerapkan pada template kita, ada beberapa yang perlu disesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :

/*  navbar
==================  */
#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}

Kita harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template anda. misal : width:990px.

#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

Yang inipun sama, kita harus mengubahnya sesuai dengan nilai yang pas untuk template kita.

http://kiddevilz.blogspot.com/‘>home

http://rohm4n.wordpress.com/‘>My Notes

http://geoweek.wordpress.com/‘>Free Template

http://hestydiana.blogspot.com/‘>Electronic Rubric

Kita harus mengubah link yang ada dengan link yang kita inginkan, Misalkan http://kiddevilz.blogspot.com di ubah menjadi http://contoh.blogspot.com. Untuk keywordnya pun kita bisa ganti sesuai dengan keinginan, misal “home” di ubah menjadi “Depan”.

Selamat mencoba!

Sumber : kolom-tutorial.blogspot.com

Read more »

Posted in: Tutorial Blog

Cara Membuat Menu Horizontal Pada Blogspot

Menu yang terdapat pada sebuah web selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab seperti yang telah saya katakan pada postingan sebelumnya bahwa kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header

1. Login ke akun Blogspot pembaca
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
   
4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari kode seperti dibawah ini pada template pembaca:
   

   </p><p><span class="fullpost"><code><b:includable id='description'><br> <div class='descriptionwrapper'><br> <p class='description'><span><data:description/></span></p><br> </div><br> </b:includable><br> </b:widget><br> </b:section><br> </div></code></span></p><p><span class="fullpost"><code>
   

Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5

• Home
• About Me
• Tutorial Website

Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya

Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.

Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]>.

Silahkan copy struktur berikut diatas kode ]]>
/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:

• Home
• Tutorial Website
• About Me

Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.

Klik tombol SIMPAN TEMPLATE.

Untuk melihat hasilnya silahkan buka disini. Seperti yang telah saya katakan, bahwa CSS tersebut berfungsi untuk mengatur tampilan menu yang kita buat tadi. Silahkan pembaca menambah atau merubah atribut CSS tersebut untuk memodifikasi tampilannya, misalnya warna tulisan, background, lebar menu, dan lain-lain. Jika pembaca ingin mengerti cara memodifikasi atau membuat CSS tersebut, silahkan klik disini. Saya yakin pembaca akan lebih mengerti bagaimana CSS tersebut bekerja. Dengan adanya menu horizontal tersebut blog pembaca pasti menjadi lebih keren dan ergonomis.

Selamat mencoba dan jangan lupa meninggalkan komentar ya

Read more »

Posted in: Tutorial Blog

Membuat menu Vertical dan Horizontal pada Blog

Membuat menu Vertical dan Horizontal pada Blog

A. Menu Horizontal Ada yang ingin membuat menu horizontal untuk blognya? ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). seperti ini : Contohnya bisa dilihat disini . Untuk membuatnya ikuti cara berikut ini: pertama-tama siapkan dulu gambarnya, contohnya seperti ini : dan kalo nggak punya gimana? kalo nggak punya pake gambar yang ini juga boleh. blackleft.gif blackright.gif greenleft.gif greenright.gif redleft.gif redright.gif unguleft.gif unguright.gif yellowleft.gif yellowright.gif blueleft.gif blueright.gif whiteleft.gif whiteright.gif Ok, bahan-bahannya sudah ada, mari kita mulai meraciknya: 1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu. 2. Cari script seperti ini ]]>, 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; line-height:normal; } #tabshori ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabshori li { display:inline; margin:0; padding:0; } #tabshori a { float:left; background: url("http://kendhin.890m.com/menu/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://kendhin.890m.com/menu/blackright.gif") no-repeat right top; padding:5px 14px 4px 4px; color:#fff; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #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://kendhin.890m.com/menu/redleft.gif") no-repeat left top; background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top; 3. Copy script berikut ini Home Trik-Tips Free Template Kamus Profile 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 : caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo sudah 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 . 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 : maxwidgets='1' showaddelement='no'> title='your blog title (Header)' type='Header'/> terus ganti text yang berwarna hijau sehingga menjadi seperti ini: maxwidgets='2' showaddelement='yes'> title='your blog title (Header)' type='Header'/> 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, coba drag kebawah dikit, terus simpan dan lihat hasilnya. hasilnya pasti akan berbeda-beda di setiap template. kalo gagal berarti coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, Good luck..... A. Menu Vertical Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal. Contohnya seperti gambar disamping itu. Cara membuatnya : 1. Login ke blogger trus pilih "Layout-->Edit HTML" 2. Masukkan kede berikut sebelum kode

Read more »

Membuat menu horizontal blog

Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas

Pembuatan menu ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.

langsung aja... caranya coba cari kode ]]> kemudian copy kode css di bawah ini tepat diatasnya.

#menuq{ font-family: Verdana; padding:10px;} .menuq a { color:yellow; border:1px #EDEEF0 solid; padding:5px; text-decoration:none;} .menuq a:hover {color:red; border:1px #000000 solid; text-decoration:none;} .menul .widget { border-bottom-width: 0;}


Selanjutnya carilah kode di bawah ini

 </div><div style="text-align: justify;"><b>[[<div id='header-wrapper'>]]<br> [[<b:section .......dst>]]<br> [[</b:section>]]<br> [[</div>]]</b></div><div style="text-align: justify;"><b>


lalu copy kode di bawah ini tepat di bawah kode di atas..

<div id='menuq'><br /> <b:section class='menuq' id='menul' preferred='yes'/> </div>

apabila telah selesai kemudian simpan dan lihat di menu setting kemudian page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add widget , dan pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya.

<div id="menuq"><a href="http://www.karsono.co.cc">Home</a> <a href="http://www.google.com/s2/profiles/108276204690151158049">My Profile</a> <a href="http://id-id.facebook.com/people/Karsono-Sajah/1366190217">My Facebook</a></div>

Ganti link sesuai dengan link anda... beres. .

Read more »

Posted in: Tutorial Blog

Membuat kotak Shoutbox

Y
Membuat kotak Shoutbox atau tempat Cuap2 di blog caranya cukup mudah, n ga perlu belajar bahasa HTML yang rumit2 cukup ikuti langkah2 ini…..
1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok.
2.Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutboxyang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombolContinue
3. Setelah itu kamu akan mendapat ucapan “Terima Kasih” lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu pingin menaruh shoutbox di blog kamu pilih “Place Shoutbox on Webpage”
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak “generated Codes”
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak “Content” lalu simpan.
13. Jadi deh…..

Read more »

Posted in: Tutorial Blog