Drop-down Blogroll

9 Juli 2008 in Tips blog, Tutorial Wordress
Tags: , , , ,

cara buat drop-down link blogroll Sebagian blogger wordpress.com mengeluh karena tidak dapat memakai Marquee (Teks bergerak) untuk tukar link / blogroll dengan blogger Indonesia yang lain. Tanpa menggunakan Marquee (marki) atau teks bergerak, brogroll akan sangat panjang dan mengganggu pemandangan.

Sebenarnya kita dapat juga memakai Menu Pull-down supaya tempat jadi irit, tapi cara ini tidak dapat membuat live link (link hidup) sehingga teman yang diajak tukar link tidak mau. Termasuk saya. Blogger yang ngelink saya dengan memakai menu pull-down tidak akan mendapat love-link balik dari saya. Jadi gimana alternatifnya? Pakailah drop-down menu. Lihat contohnya di sidebar blog ini bagian bawah. Ikuti petunjuk praktis berikut:

Copy / paste kode di bawah ini dan masukkan di sidebar blog wordpress.com atau blogger / blogspot Anda. Jangan lupa untuk mengganti alamat URL dengan alamat situs yang Anda suka.


<div style="border:1px solid #006600;overflow:auto;width:160px;height:100px;">
<ul>
<li><a href="http://afatih.wordpress.com/" target="new">Blog Tutorial</a></li>
<li><a href="http://fatihsyuhud.com/" target="new">Blogger Indonesia</a></li>
<li><a href="http://alkhoirot.com/" target="new">Alkhoirot</a></li>
<li><a href="http://www.jobvacancycareer.com/" target="new">Job Vacancy</a></li>
<li><a href="http://www.lowongankerjas.net/" target="new">Kerja</a></li>
<li><a href="http://www.lowongankerjas.org/" target="new">Kerja</a></li>
<li><a href="http://www.beasiswas.com/" target="new">Beasiswa</a></li>
<li><a href="http://www.beasiswas.net/" target="new">Beasiswa</a></li>
<li><a href="http://www.beasiswas.info/" target="new">Beasiswa</a></li>
<li><a href="http://www.beasiswas.org/" target="new">Beasiswa</a></li>
<li><a href="http://lowongancpns.blogs.ie/" target="new">Loker</a></li>
<li><a href="http://kerja.blogs.ie/" target="new">Kerja</a></li>
<li><a href="http://lowongankerjas.blogs.ie/" target="new">Informasi Kerja</a></li>
<li><a href="http://lowonganbeasiswa.com/" target="new">Info Beasiswa</a></li>
</ul>
</div>

Cara memasukkan kode.

Untuk wordpress.com:

1. Setelah login, klik Desain / Design;
2. Klik Widget
3. Teks Widget -> klik Tambah atau Add
4. Klik Simpan Perubahan
5. Di Teks Widget yang tadi klik Sunting atau Edit
6. Copy dan paste kode di atas di situ.
7. Klik “Ubah” dan klik “Simpan Perubahan”
8. Selesai.

Untuk Blogger.com / Blogspot:

1. Setelah login, klik Tata Letak atau Layout
2. Klik Tambah Gadget atau Add Gadget
3. Klik HTML / JAVASCRIPT
4. Copy / paste kode di atas
5. Klik Simpan.
6. Selesai.

TIPS PENTING:

1. Untuk menambah atau mengurangi lebar / width kotak drop-down, Anda tinggal merubah angka setelah “width”. Sementara untuk merubah / mengedit ukuran panjang-pendeknya (ke atas-bawah-nya, Anda tinggal mengganti angka setelah “height”.

2. Untuk menambah atau membuat link baru, tinggal copy / paste salah satu baris link yang ada dan ganti dengan alamat URL situs yang akan dimasukkan ke website / blog Anda.

Selamat mencoba dan salam ngeblog.

Update: Setelah mempertimbangkan satu dan lain hal, akhirnya blogroll di fatihsyuhud.com yang semula memakai marquee atau teks bergerak saya rubah menjadi drop-down. Lihat perubahannya di footer fatihsyuhud.com

Tutorial WordPress.com

Tutorial Blogger.com / Blogspot

Tutorial Umum Blogging (Untuk Wordress dan Blogger.com/Blogspot): Promosi dan Manfaat Membuat dan Menulis Blog

Tips Menulis di Blog

Pasang Iklan, Dapatkan Penghasilan Online

50 Replies

  1. Yopan Prihadi

    9 Juli 2008 at 3:03 am

    Mas Fatih..Lam kenal dari saya…
    Saya salut deh..sama Anda yang begitu kreatif dan penuh dengan inspirasi..dan kabar baiknya…saya banyak belajar dari Anda lho…
    Satu lagi pengetahuan yang bermanfaat dari Mas Fatih…Thanks berat

    Balas
  3. wijaya kusumah

    13 Juli 2008 at 12:35 am

    Mas, saya mohon izin mengambil tutorialnya untuk saya ajarankan kembali kepada anak-anak di sekolah

    #silahkan asal diberitahu siapa penulis aslinya. :)

    Balas
  4. Rachmat Amienullah

    14 Juli 2008 at 4:35 am

    Makaci info na….
    Saya belajar banyak dari Mas Fatih….Thanks…

    Balas
  5. aldohas

    15 Juli 2008 at 1:27 am

    kalau pakai dropdown gitu dapat linkback gak ya mas?

    Balas
  7. qcku

    17 Juli 2008 at 2:32 am

    mas koq di wp saya kotaknya ga muncul ya???

    Balas
  8. qcku

    17 Juli 2008 at 2:34 am

    maaf mas saya ralat … ternyata ada yang salah pada text yg saya copy
    thx…

    Balas
  10. frida

    23 Juli 2008 at 11:42 am

    mas, kalau mau punya blog WP untuk “pasang iklan gratis”, (jg bisa upload banner) template dan pluginnya apa ya mas ?
    Terimakasih sebelumnya.

    Balas
  11. christian97

    26 Juli 2008 at 8:54 am

    Boss untuk masang kode2 dari site meter n technorathi dll itu gmn yaa tolong tutorialnya yaa thanks

    Balas
  12. Ratna

    26 Juli 2008 at 3:44 pm

    Knp ngga muncul yaa? Padahal udah bolak-balik copy-paste dan ikuti instruksi…
    Perlu nih, Mas. Soalnya blogroll saya panjang. Marquee juga ngga bisa :(
    Makasih. :D

    Balas
  13. Eko

    26 Juli 2008 at 5:40 pm

    Heran q blajar na brp lama to km mas hehe,pai bs bt blog sbgus ni,,hehe,ajrin q ya?Oke oke

    Balas
  14. rie

    5 Agustus 2008 at 7:14 am

    mas..udah saya coba di blogspot saya, tapi yg muncul hanya link, kotaknya nggak ada?

    Balas
  15. Playstation World

    9 Agustus 2008 at 5:09 pm

    Mas mau tanya donk.. bagaimana cara membuat daftar isi / Table of Content di Page khusus / baru??

    Balas
  16. oedin

    9 Agustus 2008 at 7:21 pm

    mas, tolong ajari saya ya maklum baru belajar tapi saya kagak tau tentang CSS dan HTMl program, n ajari tentang buat word press yang bagus salam kenal oedin from medan

    Balas
  17. isma

    29 Agustus 2008 at 8:42 am

    thank mas dah tak ambil tuh kodenya dah tak pasang..makasih y mas

    Balas
  18. The Success

    1 September 2008 at 3:14 pm

    Trims buat tipsnya mas
    Aku cari-cari widget drop down ini
    oke punya

    sukses ya….

    Balas
  19. Dony Alfan S

    15 Oktober 2008 at 2:45 pm

    Saya sudah coba cara ini tapi kok nggak bisa. Semua link jadi menurun biasa, gak bisa drop-down. Apa code-nya ditolak ama WP?

    Balas
  20. Hasan

    17 Oktober 2008 at 8:39 am

    wah kemaren saya coba beruang-uang kok ga bisa ya.. kalo saya amati, code :
    ….style=”border:1px solid #006600;overflow:auto;width:160px;height:100px;”….
    lenyap saat disimpan.

    mohon pencerahannya, saya menngunakan WP. com gratis

    btw, makasih atas tutrialnya

    Balas
  21. Hasan

    19 Oktober 2008 at 6:57 am

    wah, mas, setelah saya kopinya satu-satu tiap baris Alhamdulillah jadi. trus kenapa kemaren bermasalah ya..?
    makasih banyak ya..

    Balas
  22. polreskuningan

    14 Nopember 2008 at 1:57 am

    terimakasih infonya mas !!!

    Balas
  23. Ombry

    23 Nopember 2008 at 4:08 pm

    Thanks atas infonya….sekali2 main ke blog saya mas

    Balas
  24. blogger newbie

    2 Desember 2008 at 11:22 am

    Mas Fatih, saya tadi ikuti instruksi mas di atas, lalu akhirnya di blog saya berhasil muncul drop-down blogroll, tapi ketika saya click salah satu link blog tsb, ternyata blog tsb tidak muncul di new window.

    Sedangkan waktu saya coba click salah satu link blog yg ada di drop-down blogroll di blog mas ini, blog tsb munculnya di new window.

    Bagaimana caranya ya Mas Fatih, supaya bisa buat drop-down blogroll yg bisa membuka di new window, spt yg ada di halaman blog Mas ini ?

    thanks

    Balas
  25. Chi_MiDori

    3 Desember 2008 at 9:41 pm

    Thanks om atas pedoman buat blogrollnya… Keren!!! Cuma chi blm bisa tampilkan foto di sidebar. Hikss…
    But, sukses deh buat om fatih… :-)

    Balas
  26. masjaliteng

    8 Februari 2009 at 1:16 pm

    Makasih mas atas ilmunya. Mohon kritik dan masukan di blog baru saya http;//masjaliteng.wordpress.com

    Balas
  27. Halim

    18 Februari 2009 at 3:13 pm

    mas blog ny saia pasang d blogroll saia ya..!!

    Balas
  28. all about loan

    2 April 2009 at 1:05 pm

    Thanks infonya dan mohon ijin untuk menggunakannya di blog saya, sdh lama saya cari-cari cara buat menu drop down seperti ini, skali lagi terima kasih, sukses untuk anda

    Balas
  29. pelangikejora

    13 April 2009 at 1:47 pm

    Mas .. thx untuk semua infonya, banyak banget yg kepakai tips & triknya. salam kenal ya …

    Balas
  30. noah

    17 April 2009 at 10:44 am

    mohon ijin blog Abang,saya blogroll…baru 2 hari coba ngeblog, kalau mau edit/hilangkan tab (home,pic,video) dari template gratisan milik saya bagaimana ya? Mohon bantuan!! Thanks

    Balas
  31. hpnugroho

    19 April 2009 at 12:30 am

    Terima kasih mas, akhirnya ketemu juga caranya bikin drop down di side bar ….

    Balas
  33. fans bola

    14 Mei 2009 at 7:56 pm

    Tip/triksnya sangat membantu saya yang baru belajar ngeblog…makasih Mas….

    Balas
  34. Kumpulan Resep Masakan

    8 Juni 2009 at 9:27 am

    Wah akhirnya ketemu juga tutorial yang aku cari
    Ampe puyeng mikirnya

    Thx ya mas :D

    Balas
  1. 1 Masrur’s Website Indonesia | Spirit of Learning by Sharing » Tutorial Bikin Blogroll Efisien di Sidebar Ping balik on Agu 3rd, 2008 at 8:14 am

    [...] berkutat mencari code-nya, akhirnya ketemu dengan blog tutorialnya Mas Fatih yang ngajarin cara buat blogroll bergerak dan super efisien itu. Cara buatnya ternyata gak sesulit [...]

  2. 2 Cara Tukar Link (Blogroll) « Refleksi dan Blog Tutorial Ping balik on Okt 26th, 2008 at 12:08 am

    [...] 1. Klik Desain -> Widgets -> Teks -> Tambah -> Simpan / Save. 2. Copy/paste seluruh kode yang ada di sini [...]

  3. 3 EUREKA! « Make Realistic Plan for Miracle, Now..! Ping balik on Nop 1st, 2008 at 6:45 pm

    [...] Akhirnya ketemu juga. Dua kesulitan yang muncul dulu tentang gimana caranya bikin blogroll dg theme yang tidak support dan cara untuk memotong posting supaya tidak terlalu panjang akhirnya [...]

  4. 4 Info-Blog » Blog Archive » Cara Tukar Link (Blogroll) Ping balik on Nop 4th, 2008 at 4:42 am

    [...] 1. Klik Desain -> Widgets -> Teks -> Tambah -> Simpan / Save. 2. Klik “Sunting” atau “Edit” pada Teks Widget tadi dan Copy/paste seluruh kode yang ada di bawah ini [...]

  5. 5 Cara Tukar Link (Blogroll) - Blog-Muria Ping balik on Des 15th, 2008 at 10:37 pm

    [...] 1. Klik Desain -> Widgets -> Teks -> Tambah -> Simpan / Save. 2. Klik “Sunting” atau “Edit” pada Teks Widget tadi dan Copy/paste seluruh kode yang ada di bawah ini [...]

  6. 6 Cara Tukar Link « Dedhy Kasamuddin Ping balik on Jan 18th, 2009 at 7:00 pm

    [...] 1. Klik Desain -> Widgets -> Teks -> Tambah -> Simpan / Save. 2. Klik “Sunting” atau “Edit” pada Teks Widget tadi dan Copy/paste seluruh kode yang ada di bawah ini [...]

  7. 7 CARA MUDAH MEMBUAT BLOG ANDA « Nwaye’s Blog Ping balik on Jan 26th, 2009 at 9:01 pm

    [...] Drop-down Blogroll [...]

  8. 8 perkenalan « K4m4li’s Blog Ping balik on Mar 16th, 2009 at 8:10 pm

    [...] Drop-down Blogroll [...]

  9. 9 Tutorial Blog « gooooooo…! Ping balik on Mar 25th, 2009 at 12:39 pm

    [...] Drop-down Blogroll [...]

  10. 10 Drop-down Blogroll « Belajar bikin Blog dengan mudah Ping balik on Apr 26th, 2009 at 8:03 am

    [...] Sumber : A. Fatih [...]

  11. 11 Kumpulan Tutorial Wordpress « allinone802.wordpress.com Ping balik on Mei 2nd, 2009 at 2:34 pm

    [...] Drop-down Blogroll [...]

  12. 12 Tutorial Blog « Virtual First Ping balik on Mei 6th, 2009 at 4:35 pm

    [...] Drop-down Blogroll [...]

  13. 13 Ar1es G!rlS » Blog Archive » cara tukar link Ping balik on Mei 9th, 2009 at 3:10 pm

    [...] 1. Klik Desain -> Widgets -> Teks -> Tambah -> Simpan / Save. 2. Klik “Sunting” atau “Edit” pada Teks Widget tadi dan Copy/paste seluruh kode yang ada di bawah ini [...]

  14. 14 Tutorial wordpress.com dan blogspot, adsense « -bebas berkarya- Ping balik on Jun 3rd, 2009 at 9:13 am

    [...] Drop-down Blogroll [...]

  15. 15 Cara Tukar Link (Blogroll) « Mbramantya's Blog Ping balik on Jun 6th, 2009 at 12:58 pm

    [...] 1. Klik Desain -> Widgets -> Teks -> Tambah -> Simpan / Save. 2. Klik “Sunting” atau “Edit” pada Teks Widget tadi dan Copy/paste seluruh kode yang ada di bawah ini [...]


« Rekaman Pembicaraan Al Amin dan Azirwan
Transkrip Rekaman Al Amin Azirwan (2) »

Leave a Comment


trackback address