cara mengedit menu horizontal dropdown

UPDATE! Cara membuat menu Horizontal Drodown (klik untuk membacanya)

Tutorial ini saya tulis atas permintaan sobat saya yang baru membuat blog yang bertemakan antropologi. Sobat saya tersebut bertanya, "gimana caranya buat sublink di blog, bagaimana cara memasukkan tulisan dalam sublink?". Pertanyaan tersebut awalnya membingungkan, tapi saya akhirnya mengerti karena juga pernah mengalami hal yang sama, bingung mengedit blog blogger yang fasilitasnya tidak selengkap dengan blog wordpress (maklum, saya juga belajar otodidak dan sepenuhnya bertanya ma om google, hehehe). Memang, blogger sepertinya menuntut kita untuk kreatif dan belajar otodidak, hihi. 

Masalah yang dialami oleh blogger pemula seperti saya adalah tidak mengerti istilah untuk menunjuk pada struktur blog, akhirnya bingung juga mau bertanya seperti apa sama om google. Tapi, dengan semangat kreatifitas, semua pasti akan terjawab, meskipun tidak secepat ketika kita sekolah khusus untuk mengedit website.

Kembali ke persoalan sobat saya tadi, apa sebenarnya yang dimaksudkan dengan pertanyaannya tersebut?. Setelah memeriksa blognya, akhirnya saya mengerti apa yang dia maksudkan. Sobat saya tersebut hendak mengedit menu horizontal dropdwon pada blognya. Template blognya diperoleh dari layanan template gratis yang memang sudah memiliki menu horizontal dropdown. Tampilannya memang bagus, masalahnya, template tersebut masih harus diedit sesuai dengan tema blog kita. Jadi, yang dimaksud memasukkan tulisan dalam sublink, bukanlah seperti pada wordpress, melainkan memasukkan link tulisan yang sebelumnya telah kita terbitkan ke dalam sublink yang dikehendaki.

Nah, untuk menjawab pertanyaannya, berikut langkah-langkah pengeditan yang dimaksud (saya akan menggunakan contoh kasus blog sobat agar lebih mudah dimengerti):
Sebelum masuk pada langkah-langkahnya, perhatikan gambar 1 berikut (klik gambar agar lebih jelas):

Keterangan:

• Yang ditunjuk pada angka 1 (satu) adalah menu horizontal, dalam hal ini adalah menu utama.
• Yang ditunjuk pada angka 2 (dua) adalah submenu atau dropdown menu.
• sementara yang ditunjuk pada angka 3 (tiga) adalah sub-submenu.

Sobat saya menanyakan, bagaimana memasukkan tulisan (baca: memasukkan link tulisan) pada sublink atau sub-submenu (panah nomor 3). Tentu yang juga ingin ditanyakan, bagaimana mengganti tulisan sublink 1 dan sublink 2 sesuai dengan keinginan? Bagaimana agar tulisan tersebut (pengganti tulisan sublink) ketika diklik akan membuka atau menuju ke halaman tulisan yang diinginkan? Bagaimana menambahkan sublink 3 atau sub-submenu yang baru (misalnya ketika kita merasa bahwa sub-submenu atau sublink yang disediakan ternyata tidak cukup)? Pertanyaan itulah yang akan saya jawab berikut ini.

1. Silahkan masuk menggunakan akun blog sobat (klik di sini untuk masuk).
2. Setelah masuk, silahkan masuk ke halaman edit HTML. Perhatikan Gambar 2 berikut.

Keterangan:

• angka 1, maksudnya klik Rancangan
• kemudian pada angka 2, klik Edit HTML
• Download Template Lengkap, pada angka 3 (ini langkah untuk membackup template, jika terjadi kesalahan pada proses pengeditan, template yang telah di download dapat diupload lagi untuk mengembalikan template seperti sebelum di edit)

3. Kita telah berada pada halaman Edit Template atau Edit HTML. Pada keyboard komputer sobat, klik Ctrl + F (Control F). Perhatikan gambar 3 berikut:

Keterangan:
Setelah mengklik Ctrl + F pada keyboard, maka akan muncul seperti gambar di atas (perhatikan pada bagian kanan-bawah layar komputer sobat).

• Pada gambar, angka 1 (satu) adalah tempat kita mengetikkan kata atau kode yang akan kita cari. sebagai contoh pada gambar, saya mengetik "mengenal antropologi" (tanpa tanda kutip). Masukkan atau ketikkan kata atau kode yang sobat ingin cari pada form yang disediakan.
• Setelah mengetik kata atau kode, klik Next (angka 2)
• Hasilnya akan menemukan kode yang kita cari. Karena saya memasukkan kata "mengenal antropologi", maka muncullah kata tersebut seperti pada gambar nomor 3 di atas.

Nah, itu hanyalah contoh. Silahkan sobat masukkan kata atau kode yang akan kita cari untuk diedit. Jika mengacu pada kasus sobat saya di atas, maka masukkan kata sublink 1 kemudian klik next (pastikan bahwa hanya satu kata sublink 1 pada templatenya, perhatikan juga penggunaan spasi atau kode lainnya karena itu akan berpengaruh pada pencarian. Pada blog sobat, ketik sublink 1, bukan sublink1 [tidak menggunakan spasi], bukan juga sublink  1 [menekan tombol spasi sebanyak 2 kali]).
Jika sudah ketemu, silahkan ganti kata tersebut dengan kata yang diinginkan, misalnya Artikel I atau apa saja. Usahakan diganti dengan beberapa kata yang singkat, tidak usah menggantinya dengan kalimat karena tampilannya akan kurang bagus (menurut saya sih, hihi. Coba perhatikan menu horizontal blog saya ini, hanya menggunakan kalimat singkat dengan kata yang singkat).
Perhatikan gambar 4 di bawah ini:

Keterangan:
Gambar di atas adalah script yang akan di edit.
href adalah kode perintah untuk menuju link tertentu, ini jangan di ubah
# adalah kode yang dapat diganti dengan link halaman tulisan, misalnya: http://antropeis.blogspot.com/2010/08/suatu-hari-dalam-kehidupan-seorang.html
Artikel adalah Menu Utama (lihat gambar 1 di atas)
Artikel Antropeis, Artikel Antropologi dan Lainnya adalah submenu
SubLink 1 adalah sub-submenu
SubLink 2 adalah sub-submenu
Yang berada dalam kotak merah adalah script khusus untuk sub-submenu
Yang berada dalam kotak biru adalah script khusus untuk sub menu.

Khusus untuk kode # pada baris script menu utama, yaitu Artikel dan submenu Artikel Antropologi, tidak usah diganti dengan link, biarkan saja seperti itu, yang lain diganti dengan link.

Jika sobat ingin menambahkan sublink atau sub-submenu, silahkan copy kode seperti pada kotak merah dan pastekan tepat di bawahnya (tekan enter terlebih dahulu pada ujungnya sebelum di paste). Hasilnya akan seperi gamabr di bawah

Begitu juga jika ingin menambahkan submenu, copy script seperti yang ada pada kotak biru.
Hasilnya akan seperi gamabr di bawah

Jika sobat sudah mengerti maksudnya, silahkan lakukan proses pengeditan.

4. Terakhir adalah Simpan Template. Kalau masih ragu, silahkan klik Pratinjau. Tombolnya terdapat pada bagian bawah seperti gambar ini.

Semoga bermanfaat, jika ada pertanyaan, silahkan tinggalkan komentar sobat.

membuat menu drop down

Akhirnya postingan ini selesai setelah 2 hari di edit, itu waktu yang cukup lama buat newbie seperti ane, hihi. Kenapa posting tentang Cara Membuat Menu Horizontal Dropdown di Blogspot ini sangat lama di edit? Yah, lagi-lagi karena persoalan kurang pengalaman. Lebih dari itu, saya juga berusaha menguji postingan ini pada template yang berbeda dengan template yang saya gunakan. Kenapa harus diuji? Iya, karena tidak semua template memiliki pengaturan yang sama. Perbedaan ini terutama terjadi pada template bawaan blogger atau yang dibuat dengan "perancang template" dengan template yang kita download dari web penyedia template gratis.

Menu horizontal dropdown di blogspot harus kita buat secara manual. Meskipun pada "perancang tempate" yang disediakan oleh blogspot juga sudah memungkinkan membuat menu horizontal, yaitu menggunakan fitur laman, tapi tetap saja harus di edit secara manual agar dapat menjadi menu horizontal dropdown. Karena itulah, agar menu ini dapat kita gunakan sesuai keinginan, lebih baik kita membuatnya secara manual dari awal.  (bertele-telenya kepanjangan ya? hihihi)

Berikut cara membuat menu horizontal dropdown di blogspot :

1. Silahkan masuk dengan akun blogger sobat

2. Setelah itu menuju ke halaman "edit HTML" ("Expand Template Widget" tidak usah dicentang). Jangan lupa untuk mem-backup templatenya.

3. Cari Kode ]]></b:skin> (gunakan CTRL + F atau F3 pada Keyboard sobat) Kemudian Pastekan kode CSS berikut ini tepat di atasnya.

#subnavbar {

            background: #666;

            width: 960px;

            height: 26px;

            color: #FFF;

            margin: 0;

            padding: 0;

}

#subnav {

            margin: 0;

            padding: 0;

}

#subnav ul {

            float: left;

            list-style: none;

            margin: 0;

            padding: 0;

}

#subnav li {

            list-style: none;

            margin: 0;

            padding: 0;

}

#subnav li a, #subnav li a:link, #subnav li a:visited {

            color: #FFF;

            display: block;

            font-size: 10px;

            font-weight: bold;

            text-transform: uppercase;

            margin: 0 5px 0 0;

            padding: 6px 13px;

}

#subnav li a:hover, #subnav li a:active {

            background: #888;

            color: #FFF;

            display: block;

            text-decoration: none;

            margin: 0 5px 0 0;

            padding: 6px 13px;

}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {

            background: #666;

            width: 140px;

            float: none;

            margin: 0;

            padding: 6px 10px;

            border-bottom: 1px solid #FFF;

            border-left: 1px solid #FFF;

            border-right: 1px solid #FFF;

}

#subnav li li a:hover, #subnav li li a:active {

            background: #888;

            margin: 0;

            padding: 6px 10px;

}

#subnav li {

            float: left;

            padding: 0;

}

#subnav li ul {

            z-index: 9999;

            position: absolute;

            left: -999em;

            height: auto;

            width: 160px;

            margin: 0;

            padding: 0;

}

#subnav li ul a {

            width: 140px;

}

#subnav li ul ul {

            margin: -25px 0 0 161px;

}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {

            left: -999em;

}

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {

            left: auto;

}

#subnav li:hover, #subnav li.sfhover {

            position: static;

}

4. Setelah itu, cari kode di bawah ini

<b:widget id='Header1' locked='true' title='Blog Demo (Header)' type='Header'/>
</b:section>

Keterangan:
Yang penting dicari adalah kode warna hijau. Sementara yang berwarna merah adalah nama blog tempatku menguji coba (semacam laboratorium, heuuuuu hohoho).
Pastekan Kode berikut tepat di bawah kode yang berwarna kuning (yaitu kode</b:section>).

<div id='subnavbar'>

      <ul id='subnav'>

<li>

<a href='#'>Home</a>

<ul>

<li>

<a href='http://soe86.blogspot.com/2010/07/perpustakaan-online-poenjakoe-soe86.html'>about</a>

</li>            

<li>

<a href='http://soe86.blogspot.com/2010/05/contact.html'>Kontak</a>

</li>

</ul>

</li>

<li>

<a href='#'>DAFTAR ISI</a>

</li>

<li>

<a href='#'>Antropologis</a>

<ul>

<li>

<a href='#'>Mengenal Antropologi</a>

<ul>

<li>

<a href='http://soe86.blogspot.com/search/label/Konsep-Konsep%20dalam%20Antropologi'>Konsep-Konsep</a>

</li>

</ul>

</li>

<li>

<a href='#'>Teori Antropologi</a>

<ul>

<li>

<a href='#'>Teori Klasik</a>

</li>

<li>

<a href='#'>Teori Modernis</a>

</li>

<li>

<a href='#'>Teori Posmodernis</a>

</li>

</ul>

</li>

<li>

<a href='#'>Metodologi Penelitian</a>

<ul>

<li>

<a href='http://soe86.blogspot.com/search/label/Metode%20Penelitian%20Kualitatif'>Metode Penelitian Kualitatif</a>

</li>

<li>

<a href='#'>Metode Penelitian Kuantitatif</a>

</li>

</ul>

</li>

<li>

<a href='#'>Etnografi</a>

<ul>

<li>

<a href='#'>Mengenal Etnografi</a>

</li>

<li>

<a href='#'>Etnografi (Hasil Penelitian)</a>

</li>

</ul>

</li>

<li>

<a href='#'>My Reading List</a>

<ul>

<li>

<a href='http://en.wikipedia.org/wiki/Gender' target='_blank'>Gender</a>

</li>

<li>

<a href='http://en.wikipedia.org/wiki/Feminism' target='_blank'>Feminism</a>

</li>

<li>

<a href='http://www.lifepositive.com/body/nature/environmental.asp' target='_blank'>Nature - Earth crusader</a>

</li>

<li>

<a href='http://en.wikipedia.org/wiki/Ecofeminism' target='_blank'>Ecofeminism</a>

</li>

</ul>

</li>

<li>

<a href='#'>Figure</a>

<ul>

<li>

<a href='http://www.unep.org/women_env/w_details.asp?w_id=107' target='_blank'>Vandana Shiva</a>

</li>

<li>

<a href='http://soe86.blogspot.com/search/label/Parsudi%20Suparlan'>Parsudi Suparlan</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href='#'>Tips-Tips</a>

<ul>

<li>

<a href='http://soe86.blogspot.com/2010/07/belajar-otodidak.html'>belajar otodidak</a>

</li>

<li>

<a href='#'>tips blogger</a>

<ul>

<li>

<a href='http://soe86.blogspot.com/search/label/A.%20Tahap%20Awal%20Membuat%20Blog' target='_blank'>Tahap Awal Membuat Blog</a>

</li>

<li>

<a href='http://soe86.blogspot.com/search/label/B.%20Tahap%20Lanjutan%20dalam%20Bloging' target='_blank'>Tahap Lanjutan dalam Bloging</a>

</li>

<li>

<a href='http://soe86.blogspot.com/search/label/C.%20Tahap%20Profesional%20dalam%20Bloging' target='_blank'>Tahap Profesional dalam Bloging</a>

</li>

</ul>

</li>

<li>

<a href='http://soe86.blogspot.com/search/label/F.%20Tips%20Internet%20Murah'>internet murah</a>

</li>

</ul>

</li>

<li>

<a href='#'>Download Gratis</a>

<ul>

<li>

<a href='http://soe86.blogspot.com/2010/08/download-gratis-literatur-antropologi-1.html'>Literatur Antropologi</a>

</li>            

<li>

<a href='http://soe86.blogspot.com/2010/08/pusat-download-gratis-di-sini.html'>Software / Aplikasi</a>

</li> 

<li>

<a href='http://soe86.blogspot.com/2010/08/download-gratis-novel-1.html'>Novel</a>

</li>

<li>

<a href='http://soe86.blogspot.com/2010/08/download-gratis-masalah-kebidanan.html'>Kebidanan</a>

</li> 

<li>

<a href='http://soe86.blogspot.com/search/label/Trik%20Mendownload'>Trik Mendownload</a>

</li>

</ul>

</li>

<li>

<a href='#'>BLOG SAHABAT</a>

<ul>

<li>

<a href='http://t4belajarblogger.blogspot.com/' target='_blank'>T4 Belajar Blog</a>

</li>

<li>

<a href='http://wawanwae.blogspot.com/' target='_blank'>Blogtainment</a>

</li>

<li>

<a href='http://azgi.blogspot.com/2010/05/koreksi-error-pada-kotak-komentar.html' target='_blank'>Sunda Priangan</a>

</li>

<li>

<a href='http://jurnalkita-indonesiana.blogspot.com/' target='_blank'>Komunitas Penulis Muda</a>

</li>

<li>

<a href='http://human-fisip-unhas.blogspot.com/' target='_blank'>HUMAN FISIP UH</a>

</li>

</ul>

</li>

</ul>

</div>

Nah, langkah terakhir adalah menyimpan templatenya. Silahkan lihat contoh hasilnya di sini
Menu yang sobat copy tersebut masih seperti menu pada blogku ini, makanya lakukan pengeditan sesuai blog dan keinginan sobat. Untuk cara mengedit menu horizontal dropdown, silahkan klik di sini.
Jika ada masalah, silahkan sobat berkomentar, mudah-mudahan saya bisa membantu.
Semoga bermanfaat....

membuat submenu di blog

Setelah ngecek postingan saya di sini, saya menemukan komentar masuk. Seperti ini nih komentarnya.

"kalau untuk membuat navigasi menu horizontalnya menjadi 2 (dua) tingkat, bagaimana caranya mas?"

Mungkin maksud dari 2 tingkat itu mempunyai submenu kali, seperti punya Kang Rohman.

Lihat! Dibawah menu utama ada menu tambahan lagi untuk menampung menu-menu lainnya. Mungkin itu kali yah, maksudnya? (kalo salah tolong jelasin yang dimaksud ya...)

Untuk menampilkan menu seperti itu, gampang caranya.

1. Login dulu ke Blogger, lalu pilih menu Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Tepat diatasnya, ketikkan kode:

/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81BEF7; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:#5858FA; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}
/* Sub Navigasi Menu */
#subnavmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu subnavigasi. Sesuaikan dengan lebar blog anda */
background:#5858FA; /* Warna latar belakang menu navigasi */
float:left;
}
#subnavmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#subnavmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#subnavmenu ul li {
float: left;
display:inline;
}
#subnavmenu li a, #subnavmenu li a:link, #subnavmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:5px 5px 5px 5px;
font-size:10px; /* Ukuran teks */
}
#subnavmenu li a:hover {
text-decoration:underline;
}

5. Lalu cari kode yang mirip/mendekati:

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

6. Lalu dibawahnya, ketikkan kode:

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Baik Baik Sayang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Rasa Ini</a></li>
</ul>
</div>
<div id="subnavmenu">
<ul id="subnavmenu">
<li><a href="#">Wali</a></li>
<li><a href="#">Hijau Daun</a></li>
<li><a href="#">ST 12</a></li>
<li><a href="#">Ungu</a></li>
<li><a href="#">Nidji</a></li>
<li><a href="#">Vierra</a></li>
<li><a href="#">The Dance Company</a></li>
</ul>
</div>

Jangan lupa, Ganti link diatas dengan link yang anda inginkan. Anda bisa menambah ataupun mengurangi jumlah link dari menu tersebut.

7. Kalau masih ragu-ragu, sebaiknya Klik Pratinjau.

8. Kalau sudah yakin, Klik Simpan Template.

Nah, sudah kejawab kan?

Semoga bermanfaat.

Selengkapnya di www.MasDoyok.co.cc Cara Membuat Submenu pada Navigasi

membuat home di blog

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:
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
6. Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5
   <ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>
7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
8. 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.
9. Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]></b:skin>.
10. Silahkan copy struktur berikut diatas kode ]]></b:skin>
    /*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.
    
11. Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:
    <div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>
12. 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.
    
13. 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.

trick agar blog kiita diseo fredly

Tips dan Trik Blog: Agar Title Blog Kita SEO Friendly

Agar Title Blog Kita SEO Friendly,  Agar title blogger lebih lebih bersahabat dengan Search Engeine (SEO Friendly) kita dapat mengganti Title standar yang sudah ada di dalam template blog kita dengan Title kode yang sudah dimodifikasi.
Caranya adalah:

1. Login Kehalaman admin blog anda http://blogger.com/home
2. Klik Rancangan
3. Pilih Edit html template
4. Cari kode title dibawah ini:

<title><data:blog.pageTitle/></title>

Kemudian ganti semua kode diatas dengan kode dibawah

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Semoga bermanfaat.

scrip buku tamu model show hide

Udah lama banget blog ini gak keurus, maklum saja kerjaan offline banyak, kerjaan online juga banyak, nggarap orderan web/ blog, dan ngelola beberapa blog yang lain.

Okey, langsung saja, ini saya ada koleksi script buku tamu dengan model show hide, jadi buku tamu yang biasanya nongkrong di sidebar blog, sekarang melayang disebelah kanan, dan hanya tampak tombolnya saja. Untuk menggunakan script ini, anda hanya cukup mengcopy script dibawah ini letakan di Gadget Html/ Java Script, letakan saja di sembarang tempat, boleh sidebar kanan, bagian header, atau bagian footer, edit teks YOURID dengan nama anda, atau nama blog anda, Buku Tamu Model Show Hide sudah bisa anda nikmati.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsTyF9m8N2bS5hFO049RZ052679kJ1CY1n2_NazhgcAglisaQZTZrFEf-AJa4rHfqWlfdAj65jMHHtxeqZUo7r-kJjEzwsJ_HBqprPf8M5WU5c5vqB7hwaVNoyAb3OcuQdGc6v_Qtu6ab/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Start http://shoutbox.widget.me HTML Code -->
<iframe title="Shoutbox" src="http://shoutbox.widget.me/window.html?uid=YOURID" width="200" height="300" frameborder="0" scrolling="auto"></iframe>
<br /><a href="http://shoutbox.widget.me" title="Get your own free chat widget!">Shoutbox widget</a><br />
<!-- End http://shoutbox.widget.me HTML Code -->
<br/>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Selamat mencoba, semoga bermanfaat.

membuat slide gambar

Membuat Slide Gambar Foto seperti terjatuh dengan jquery

Berbagai ragam dan model slide dapat saja tercipta berkat adanya penggunaan jquery. Mungkin sobat sering melihat gambar atau foto yang ditampilkan dalam bentuk slide pada blog yang anda kunjungi. Ini tentu dapat memberikan daya tarik bagi siapa saja yang melihat Bentuk slide foto tersebut diantaranya ada yang menggunakan efek transisi zoom, berjalan horizontal, vertical dan masih banyak lagi efek-efek yang tercipta dari kehandalan jquery ini.

Nah kali ini saya akan coba buat slide gambar foto terjatuh. Hasilnya bisa anda lihat di blog ini.

Langkah pembuatannya :
1.    Cari kode  </head>
2.    Pasang kode Jquery ini diatas kode tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

(bila di dalam template anda sudah terpasang jquery, maka jangan lakukan langkah ini)

3.    Klik save

4.    Kemudian tambah gadget baru (Add new gadget)

5.    pilih HTML/JavaScript

6.    copy dan paste kode ini ke dalam gadget tadi.

<script src=" http://kodecode.googlecode.com/files/animation1.js " type="text/javascript">

</script><script src="http://kodecode.googlecode.com/files/animation2.js" type="text/javascript"></script>

<script src="http://kodecode.googlecode.com/files/animation3.js" type="text/javascript">

</script><style type="text/css">

.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">

<img height="200" src="URL GAMBAR DI SINI" width="400" />

<img height="200" src="URL GAMBAR DI SINI" width="400" />

<img height="200" src="URL GAMBAR DI SINI" width="400" /></div>

<script type="text/javascript">

$('#ke2').cycle({fx:'scrollDown',speedIn:  2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});

</script>

7.    Simpan / Save dan lihat hasilnya

Keterangan:
Ukuran Gambar Foto dapat diatur dengan merubah angka 232, 432, 200, 400

Selamat menikmati Slide Gambar Foto Terjatuh

membuat slide gambar

Demo Membuat Slide Gambar di Blog Dengan JQuery Silahkan anda lihat di http://smpn1klw.sch.id dibawah header ada slide show gambar dengan animasi transisi yang berubah-ubah, dan hasilnya cukup apik juga.

1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home 
2. Langsung tuju ke halaman layout atau tata letak, dan klik edit html -template
3. Beri centang pada expand Template widget
4. Letakkan kode berikut di atas kode ]]></b:skin>
   

   /* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

5. Letakkan kode dibawah ini diatas kode  </head>
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>

   Width: 563 : silahkan anda sesuaikan dengan lebar tampilan gambar yang anda inginkan, usahakan gambar sudah di atur ke ukuran yang sesuai, biar tampak manis dilihat. 
6. Simpan, kemudian klik tata letak 
7. Tambahkan gadget html/java script kemudian copas kode berikut:
   

     <div id='coin-slider'>
   
   <a href="img kamu url" target="_blank">
           <img src="link letak gambar" />
           <span>
       Deskripsi gambar......
           </span>
       </a>
      
   <a href="img kamu url" target="_blank">
           <img src="link letak gambar" />
           <span>
       Deskripsi gambar......
           </span>
       </a>
   
   <a href="imgkamu_url" target="_blank">
           <img src="link letak gambar" />
           <span>
       Deskripsi gambar......
           </span>
       </a>
   
   </div>

   Silahkan ganti Link letak gambar dengan lokasi penyimpanan gambar anda.
   
8.  Simpan dan silahkan nikmati hasilnya.