Pergi mengejar sebuah mimpi..!!!: 2011

Membuat Menu Drop Down

Sebelumnya telah menerangkan bagaimana cara membuat menu horizontal. Untuk kali ini saya akan membantu anda untuk melanjutkan cara membuat menu drop down di dalam blog anda. Kode yang saya pakai adalah kode CSS, yang disadur dari blog Kang Rohman. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :

Sebelumnya buat dulu horizontal menu.

Login ke account blogger kamu.

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.

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.

Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.

Contoh :

Catatan :
1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

Jangan lupa disimpan.

Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#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;
}

Selamat mencoba sob?

Membuat Menu Horizontal di Blog

by: dedi P.

Apa arti menu Horizontal itu sendiri mngkin anda sudah mengerti, namun Anda masih bingung dalam menggunkannya atau memasanganya kedalam template blog anda. Di sini saya akan membantu para bloger pemula sama seperti saya. Sebenarnya Menu horizontal merupakan suatu kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header tujuannya untuk memudahkan para pengujung daam melakukan pencarian tanpa harus meninggalkan blog anda. Langsung aja tanpa basa basih lagi kita mulai bersama.

Berikut langkah membuat menu horizontal dalam blog kamu :

Login ke account blogger kamu.
Pilih Tata Letak -->

Edit HTML
centang "Expand Template Widget".

Tips : “download lah terlebih dahulu temlate anda kedalam pinyimpanan, untuk menghindari terjadinya sesuatu yang tidak di inginkan”

Cari Kode kod ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : ”untuk mempermudah pencarian 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 :

Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.

Kemudian cari kembali kode seperti di bawah ini.

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

... dan seterusnya ...

</b:section>
</div>

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

jangan lupa menyimpannya yach...

Memasang Back to Top blog

Menambah Aksesoris Blog "Back to Top" : para bloger pasti sudah mengerti apa itu Back to Top?, namun di sini saya akan membantu anda dalam melakukan pngeditan dalam blog anda …, Bagi anda bloger pemula sama seperti saya ini maka tidak salahnya kalau kita saling bertukar pikiran tentang pengetahuan blog itu sendiri.

Langkah yang harus anda lakukan terlebih dahulu adalah:

Masuk ke blogger
Pilih Layout
Edit/HTML
Kemudian letakkan kode dibawah ini, sebelum kode </Head>

Warna merah bisa di ganti sesuai image yang anda sukai
Setelah itu SAVE

SELAMAT MENCOBA BROO...

Mungkin Postingan ini yang anda cari

Menambahkan Recent Comments di blog

Sebelumnya aku mengucapkan terima kasih kepada Aksesoris blog yang telah meberi masukan. Aku di sini akan membantu anda dalam membuat recent comments. Dalam hal ini ada dua cara untuk menambahkan recent comment ini. Pertama dengan menambahkan gadget baru pada elemen halaman dan kedua menggunakan kode html.Aku akan jelaskan satu-satu untuk membuat recent comment ini.

Menu ‘recent comment’ itu memang akan menarik pembaca untuk berkomentar yang sekaligus dapat mempromosikan blognya sendiri, di samping itu membuat blog kita terkesan lebih interaktif.

1. Cara Pertama.

Cara yang harus anda lakukan adalah sebagai berikut:

Anda harus terlebih dahulu Login ke blog anda, klik “Rancangan” »» Tambah Gadget »» klik “Feed”

Kemudian Isi dengan Feed Comment blog kamu.

Url Feed Comment blogspot adalah sbr:
»» http://doyederi.blogspot.com/feeds/comments/default
»» http://doyederi.blogspot.com/feeds/comments/default?alt=rss

catatan: dalam situs http://masukan alamat blog anda.

Klik “Lanjutkan”

Isi judul sesuai keinginanmu,misalkan: “Recent Comment” atau “Komentar Terbaru”
Terakhir Klik “Simpan.” Selesai.

2. Cara kedua:

Copy paste kode html berikut konfigurasi html/javascript ;

Ganti yang berwarna biru di atas dengan url blogmu

Selesai sudah...

Apabila kamu menggunakan template klasik (BUKAN versi BETA /BARU), ganti kode html nya menjadi seperti di bawah ini:

Catatan: Kode html di bawah berfungsi dg baik hanya pada template buatan asli blogger / blogspot.

<h2 class="sidebar-title">Recent Comments</h2>

<ul>

<li><$BlogCommentAuthor$> //

<$BlogCommentDateTime$></a></li>

</BlogItemComments>

</BlogItemCommentsEnabled>

</Blogger>

</ul>

</MainPage>

SEMOGA BERHASIL YA BRO..?

Komentar

Membuat Menu Drop Down

Membuat Menu Horizontal di Blog

Memasang Back to Top blog

Menambahkan Recent Comments di blog