Drop-down Blogroll

Juli 9, 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/”>Blog Tutorial</a></li>
<li><a href=”http://fatihsyuhud.com/”>Blogger Indonesia</a></li>
<li><a href=”http://alkhoirot.com/”>Alkhoirot</a></li>
<li><a href=”http://www.beasiswas.com/”>Beasiswa</a></li>
<li><a href=”http://lowongancpns.blogsome.com/”>CPNS</a></li>
<li><a href=”http://lowongancpns.blogs.ie/”>Loker</a></li>
<li><a href=”http://kerja.blogs.ie/”>Kerja</a></li>
<li><a href=”http://lowongankerjas.blogs.ie/”>Informasi Kerja</a></li>
<li><a href=”http://lowonganbeasiswa.com/”>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 Elemen atau Add Element
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

17 Replies

  1. Yopan Prihadi

    Juli 9, 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

  2. Herdhiansyah

    Juli 12, 2008 at 3:43 am

    wah, makasih infonya!

  3. wijaya kusumah

    Juli 13, 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. :)

  4. Rachmat Amienullah

    Juli 14, 2008 at 4:35 am

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

  5. aldohas

    Juli 15, 2008 at 1:27 am

    kalau pakai dropdown gitu dapat linkback gak ya mas?

  6. Sugianto Effendy

    Juli 16, 2008 at 8:51 am

    mas Fatih thanks atas infonya, salam kenal http://www.oursoldiersvalor.com

  7. qcku

    Juli 17, 2008 at 2:32 am

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

  8. qcku

    Juli 17, 2008 at 2:34 am

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

  9. isdiyanto

    Juli 21, 2008 at 2:11 am

    ooo….

  10. frida

    Juli 23, 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.

  11. christian97

    Juli 26, 2008 at 8:54 am

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

  12. Ratna

    Juli 26, 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

  13. Eko

    Juli 26, 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

  14. rie

    Agustus 5, 2008 at 7:14 am

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

  15. Playstation World

    Agustus 9, 2008 at 5:09 pm

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

  16. oedin

    Agustus 9, 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

  1. 1 Masrur’s Website Indonesia | Spirit of Learning by Sharing » Tutorial Bikin Blogroll Efisien di Sidebar Pingback on Agt 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 [...]

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

Leave a Comment


trackback address


  • Blog Stats

    • 827,234 hits

  • Komentar Sampah