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 :
--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 :
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 :
<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 :
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 :
<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 :
Pembuatan daftar artikel selesai.
Mudah bukan?, nah sahabat, selamat mencoba semoga bermanfaat adanya.
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;">
<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;">
<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;">
<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.
informasi yangbagus terus kalau biar bejalan / marq gemana?
wah omh thanks banget triknya bisa dicoba tuh . . .
jangan lupa mampir sini yaw!!!
Terima kasih, hanya penghargaan sederhana ini dapat Lela berikan buat Pak Guru..
info yang bagus untuk saya seorang pemula.....
thankz...... om Syamsul Bahri
nice post, selamat pagi pak guru, daku dateng dengan membawa ewot buat pak guru
very good article, I like it
Nice info,..... banyak artikel pembelajaran disini.
Info yg oke ...Saya ambil ya tips buat di blogku
Boleh nih, sebagai tambahan referensi...^^
ini dia yang gw cari2. ijin copy mas, tukeran link yuk..
daftar isi emang penting..
nice info sob, keep blogging..
sip...sip... bisa dicopy neh mas.... tengkyu tips nya. :)
Terima kasih infonya...bro...kalau bisa muat artikel...agar pengunjung dapat memberikan komentar postingan kita...seperti saat ini yang saya lakukan.
.
Wah,, mantao nih Sob. Dicoba dl ahh..
Thanks y.. :)
Wah,, mantap nih Sob. Dicoba dl ahh..
Thanks y.. :)
pas banget dengan apa yang gue cari...
thanks
apakah anda salah dengan juice anda ?
www.thejuicery.net
bagiku semuanya penting, kodenya siap copy sudah. walaupun tujuannya sama tapi kode berbeza-beza jadi aq harus pelajari dari sini.
wah hemat tempat ya jadinya
Blogwalking @ morning, happy blogging, visit me back ok. Novian
thx om tips nya,tp saya pengen tau kalu bkin dsftar isi untuk ditop list gmn ya?mksh
Badak Dua : Anda bertanya atau menguji neh???, soalnya saya liat blog anda ada menu navigasinya. Anda mau berapa macam model menu navigasi???
numpang liat liat bos...keren blognya,,,
langsung pakai.....makasih
mas...krn belum ada tab menu horisontalnya...aku recomin ini : http://www.suprisdiantoko.com/2009/05/cara-mudah-membuat-menu-di-blogger.html
Thx 4 d info,,
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
Tips nya bagus, kebetulan saya sedang mencari script ini, sangat membantu saya... Oh iya..mampir balik yah.....ke blog saya...
makasih infonya, penjelasannya sangat jelas, walau untuk pemula seperti saya
makasih yah kode nya !!! keren .... follow blog saya yah !! makasih
thanks infonya nih broo
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 ...
nice blog.. hehe..
Thx yach ilmuna..., semoga anda sehat selalu, sehingga bisa posting2 berikutnya...
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
mantab sobat, salam kenal yah,..?
ilmu Mr sudah saya praktekkan... walhasil blog saya jadi tambah imut... hehee...
terimakasih Mr...
trim"s banget bang..!!
udah di coba,,wak makin sip..maklum masih pemula bang,,,
sukses selalo//!