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 :

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

aswad mengatakan...
on 

informasi yangbagus terus kalau biar bejalan / marq gemana?

admin mengatakan...
on 

wah omh thanks banget triknya bisa dicoba tuh . . .

jangan lupa mampir sini yaw!!!

ArtWork69 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

SI 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

FATAMORGANA mengatakan...
on 

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

Latifah Hizboel mengatakan...
on 

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

Unknown mengatakan...
on 

Boleh nih, sebagai tambahan referensi...^^

Mr. Summer mengatakan...
on 

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

Anonim 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.

Anonim mengatakan...
on 

wah hemat tempat ya jadinya

Novian Hari S mengatakan...
on 

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

Unknown 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???

zrouandz mengatakan...
on 

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

Anonim mengatakan...
on 

langsung pakai.....makasih

Anung 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

Anonim mengatakan...
on 

Thx 4 d info,,

Unknown 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

Anonim mengatakan...
on 

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

Anonim mengatakan...
on 

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

Anonim mengatakan...
on 

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

Admin mengatakan...
on 

thanks infonya nih broo

Unknown 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 ...

Heck Cheat mengatakan...
on 

nice blog.. hehe..

SMP PGRI 30 JAKARTA mengatakan...
on 

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

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

xrider mengatakan...
on 

mantab sobat, salam kenal yah,..?

Unknown mengatakan...
on 

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

terimakasih Mr...

Unknown 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