CARA MUDAH MEMBUAT DAFTAR ISI DAN DAFTAR LINK

Ter-inspirasi oleh seorang sahabat blogger yang bertanya pada saya mengenai cara membuat daftar link dan daftar isi seperti yang ada pada blog ini, sebagai bentuk apresiasi saya akan keinginan beliau yang begitu kuat untuk menekuni dunia blogging, maka pada kesempatan ini saya akan coba menjawabnya sesuai permintaan beliau. Sahabat, sebenarnya daftar isi (arsip blog) dan daftar link sudah tersedia pada menu add widget bagi pengguna platform blogger. Hanya saja, kedepan memang perlu difikirkan penggunaannya. Mengapa?, mungkin untuk jangka waktu tiga sampai enam bulan tidak menimbulkan masalah karena artikel dan link belum terlalu banyak, tetapi coba bayangkan kalau sahabat sudah ngeblog dua atau tiga tahun, rajin tukar link dan update blog. Bisa dibayangkan, arsip dan daftar link akan makin panjang mendominasi side bar blog sahabat. Untuk itu, perlu difikirkan cara yang praktis mengantikan fungsi arsip dan daftar link yang telah disediakan google.

Membuat daftar isi atau daftar link pada sebuah blog sebenarnya gampang-gampang susah. Maksudnya, gampang bagi yang tau dan susah bagi yang tidak tau (he he he). Menurut para master blog, ada beberapa macam cara membuat kedua daftar ini. Ada yang harus mengutak atik template, ada juga yang hanya seperti menempelkan banner pada side bar. Karena kita ini blogger baru yang sementara belajar, maka sebaiknya kita tidak perlu mempersulit diri dengan memilih cara yang sulit dan bisa bikin mumet. Kata orang tua-tua kita dahulu, "Kalau ada yang gratis mengapa pilih yang bayar, kalau ada yang mudah mengapa pilih yang susah".

Berikut ini adalah cara mudah membuat daftar isi dan daftar link. Agar mudah memahaminya, kita buat daftar link lebih dahulu. Sebagai langkah awal, silahkan login ke blog sahabat (www.google.com). Setelah itu klik dasbor, lalu klik tata letak (layout) dan kemudian klik add widget (tambah widget). Copi kode berikut :

<h2 class="title">Daftar Link</h2>
<div class="widget-content">
<div style="border: 0px solid rgb; overflow: auto; width: 200px; height: 100px; text-align: center;">


--A--
<a href="http://www.sbahry.co.cc">Bahry's Blog</a>

--B--
<a href="http://www.sbahry.co.cc">Bahry's Blog</a>

</div>
</div>

Ganti URL (http://www.sbahry.co.cc) dengan URL blog yang bertukar link dengan sahabat dan tuliskan nama pemilik blog atau judul blog tersebut menggantikan "Bahry's Blog". Sesuaikan tinggi dan lebar widget tuker link ini dengan side bar blog sahabat dengan mengganti angka 200 (lebar) dan 100 (tinggi) pada kode di atas. Selanjutnya paste semua kode tadi. Untuk selanjutnya jika ada rekan blogger yang ingin bertukar link, sahabat tinggal menambahkan saja sesuai abjad, dan jangan lupa memberi tag <br/> untuk memberi spasi antar abjad dan link.

Hasilnya akan menjadi seperti ini :

Daftar Link




Untuk membuat daftar link ini bergerak dari atas ke bawah dan berhenti jika mouse diletakkan di atasnya, kode di atas dapat dikombinasikan dengan perintah marquee. Kopi dan paste kode berikut

<marquee onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="2" direction="up">

di atas huruf "--A--",

dan paste kode berikut </marquee> tepat di bawah link terakhir. Biar tidak bingung contohnya seperti ini :

<h2 class="title">Daftar Link</h2>
<div class="widget-content">
<div style="border: 0px solid rgb; overflow: auto; width: 200px; height: 100px; text-align: center;">


<marquee onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="2" direction="up">
--A--
<a href="http://www.sbahry.co.cc">Bahry's Blog</a>

--B--
<a href="http://www.sbahry.co.cc">Bahry's Blog</a>
</marquee>

</div>
</div>


sehingga hasilnya akan menjadi seperti ini :

Daftar Link




Catatan : Kecepatan bisa diatur dengan mengganti angka "4" pada kode tersebut.

Daftar tukar link selesai. Selanjutnya kita buat daftar isi atau daftar artikel blog. Sebagai langkah awal, ganti kalimat "Daftar Link" dengan "Daftar Artikel" atau "Daftar Isi" dan "center" dengan "left" pada kode tadi. Selanjutnya catat masing-masing alamat URL Setiap artikel yang terdapat pada blog sahabat. Caranya, klik judul setiap artikel dan perhatikan address bar, itulah alamat artikel tersebut. Untuk lebih jelasnya mengenai hal ini, sahabat bisa membaca artikel berikut Cara Mudah Membuat Kode HTML Gambar. Kopi dan paste pada notepad.

Kodenya seperti ini :

<h2 class="title">Daftar Artikel</h2>
<div class="widget-content">
<div style="border: 0px solid rgb; overflow: auto; width: 300px; height: 100px; text-align: left;">


<ol><li>(url blog+url artikel)</li></ol>

Contoh penerapan kode di atas dengan salah satu artikel blog ini :

<ol><li><a href="http://www.sbahry.co.cc/2009/05/membuat-efek-marque-dan-
kalimat.html">Membuat Efek Mequee</a></li></ol>

</div>
</div>

Hasilnya akan seperti ini :

Daftar Artikel




Pembuatan daftar artikel selesai.
Mudah bukan?, nah sahabat, selamat mencoba semoga bermanfaat adanya.

Baca juga artikel berikut :



Comments :

38 komentar to “CARA MUDAH MEMBUAT DAFTAR ISI DAN DAFTAR LINK”

aswad mengatakan...
on 

informasi yangbagus terus kalau biar bejalan / marq gemana?

are you bored ?? mengatakan...
on 

wah omh thanks banget triknya bisa dicoba tuh . . .

jangan lupa mampir sini yaw!!!

Nur Layla mengatakan...
on 

Terima kasih, hanya penghargaan sederhana ini dapat Lela berikan buat Pak Guru..

phsyco_izzy mengatakan...
on 

info yang bagus untuk saya seorang pemula.....

thankz...... om Syamsul Bahri

SENDAL JEPIT mengatakan...
on 

nice post, selamat pagi pak guru, daku dateng dengan membawa ewot buat pak guru

ZUNNURAIN mengatakan...
on 

very good article, I like it

Seti@wan Dirgant@Ra mengatakan...
on 

Nice info,..... banyak artikel pembelajaran disini.

Latifah Hizboel mengatakan...
on 

Info yg oke ...Saya ambil ya tips buat di blogku

Lina mengatakan...
on 

Boleh nih, sebagai tambahan referensi...^^

Ardianz mengatakan...
on 

ini dia yang gw cari2. ijin copy mas, tukeran link yuk..

indoneter mengatakan...
on 

daftar isi emang penting..
nice info sob, keep blogging..

Yudie mengatakan...
on 

sip...sip... bisa dicopy neh mas.... tengkyu tips nya. :)

Aldi mengatakan...
on 

Terima kasih infonya...bro...kalau bisa muat artikel...agar pengunjung dapat memberikan komentar postingan kita...seperti saat ini yang saya lakukan.
.

HATURUA (Hobert Noya) mengatakan...
on 

Wah,, mantao nih Sob. Dicoba dl ahh..
Thanks y.. :)

HATURUA (Hobert Noya) mengatakan...
on 

Wah,, mantap nih Sob. Dicoba dl ahh..
Thanks y.. :)

nahdan mengatakan...
on 

pas banget dengan apa yang gue cari...

thanks

apakah anda salah dengan juice anda ?

www.thejuicery.net

Seri mengatakan...
on 

bagiku semuanya penting, kodenya siap copy sudah. walaupun tujuannya sama tapi kode berbeza-beza jadi aq harus pelajari dari sini.

lesparisien.net mengatakan...
on 

wah hemat tempat ya jadinya

Novian Hari S mengatakan...
on 

Blogwalking @ morning, happy blogging, visit me back ok. Novian

badakdua mengatakan...
on 

thx om tips nya,tp saya pengen tau kalu bkin dsftar isi untuk ditop list gmn ya?mksh

S.BAHRY.B mengatakan...
on 

Badak Dua : Anda bertanya atau menguji neh???, soalnya saya liat blog anda ada menu navigasinya. Anda mau berapa macam model menu navigasi???

zinkgitz blog mengatakan...
on 

numpang liat liat bos...keren blognya,,,

yogopunyablog mengatakan...
on 

langsung pakai.....makasih

Anung (XP lover) mengatakan...
on 

mas...krn belum ada tab menu horisontalnya...aku recomin ini : http://www.suprisdiantoko.com/2009/05/cara-mudah-membuat-menu-di-blogger.html

Yenny mengatakan...
on 

Thx 4 d info,,

Cre@tinova Multimedia mengatakan...
on 

Terimakasih tips-nya. tapi saya bingung, ma'lum masih blajar saya coba tips untuk bikin daftar isi kok nomor urut di daftar isi tidak berurutan angaka 1 (satu) semua ngga 1, 2, 3 dst? Ada kesalahan apakah?
Skali lagi trimakasih

Ulated Media mengatakan...
on 

Tips nya bagus, kebetulan saya sedang mencari script ini, sangat membantu saya... Oh iya..mampir balik yah.....ke blog saya...

karikaturindonesia mengatakan...
on 

makasih infonya, penjelasannya sangat jelas, walau untuk pemula seperti saya

Dyah Aditya Pramadani mengatakan...
on 

makasih yah kode nya !!! keren .... follow blog saya yah !! makasih

Ipin's cool mengatakan...
on 

thanks infonya nih broo

Darma Saputra mengatakan...
on 

hallo
Terimakasih artikelnya, sangat Bermanfaat sekali, salam kenal buat teman2 semua, Jangan lupa, kalau ada waktu Berkunjung ke blog Bujang Riau http://www.darma-saputra.co.cc, terimakasih ...

Rido Alkholiq mengatakan...
on 

nice blog.. hehe..

SMP PGRI 30 JAKARTA mengatakan...
on 

Thx yach ilmuna..., semoga anda sehat selalu, sehingga bisa posting2 berikutnya...

Hamzah Khusaini mengatakan...
on 

bos mau g tukeran link dengan blog saya!!!!

mungkin, klo anda berminat, kunjungi blog saya n bisa konfirmasi melalui form komentar ya!!! :) :) :)


Master Hamzah Blog

Master Hambyah


Salam kenal aja

Maen ke blog saya y di http://hambyah.com & http://hambyah.info

Thanks Sebelumnya

BOB mengatakan...
on 

Trima kasih mas, atas paparannya saya baru saja kenal dg bhs html dan sdg bikin blog, sy jadi malu soalnya sy jiplak banyak dr mas, sekali lagi trims ya, o...iya mas boleh berkunjung boleh juga tidak di blog sy http://horizonmalam.blogspot.com....salam blogger

FATUR mengatakan...
on 

mantab sobat, salam kenal yah,..?

PEMULA mengatakan...
on 

ilmu Mr sudah saya praktekkan... walhasil blog saya jadi tambah imut... hehee...

terimakasih Mr...

nday mengatakan...
on 

trim"s banget bang..!!
udah di coba,,wak makin sip..maklum masih pemula bang,,,
sukses selalo//!

Posting Komentar

Template by - Abdul Munir | Daya Earth Blogger Template