PRATIKUM APLIKASI KOMPUTER BISNIS

BLOG

Buat daftar isi blog• Apakah sobat suka membaca buku? jawaban sobat tentunya akan

beragam, ada yang akan menjawab suka dan ada juga yang akan menjawab tidak suka. Namun saya yakin sobat pernah membaca sebuah buku. Dalam sebuah buku ada satu bagian yang dinamakan daftar isi, dengan adanya daftar isi buku maka akan mempermudah pembaca buku tersebut untuk menemukan bagian-bagian isi buku yang ingin di baca. Pertanyaan yang mungkin muncul adalah apa hubungannya antara buku dengan blog? tak hanya sebuah buku yang bisa memuat daftar isi untuk mempermudah para pembacanya, didalam sebuah blog pun kita bisa melakukannya, contoh yang bisa dilihat adalah saya memuat judul-judul artikel yang pernah saya posting di bagian footer halaman ini ataupun ketika sobat membuka keluruhan artikel yang mau di baca maka di akhir artikel akan muncul sederet judul-judul artikel lainnya yang menggoda sobat untuk membacanya. Selain untuk menggoda pengunjung agar lebih berlama-lama di blog kita, cara ini pun akan sangat mempermudah para pembaca untuk menemukan artikel yang di rasa menarik untuk di baca. Akan tetapi cara tersebut saya lakukan secara manual yakni saya mencatat seluruh alamat artikel yang telah saya posting kemudian membuatkan link ke artikel tersebut.

• Teknik pembuatan daftar isi di atas bisa saja kita lakukan, akan tetapi tentunya perlu waktu yang lama untuk mebuatnya dan tentunya akan menyita waktu kita. Nah... yang ingin saya terangkan saat ini adalah bagaimana cara membuat sebuah Daftar isi blog secara otomatis. Yupppsss.. dengan hanya sekali kita membuatnya maka daftar isi tidak usah di buat berulang-ulang namun terus bekerja secara otomatis, teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta. Agar tidak bingung tentang daftar isi blog yang akan saya terangkan, silahkan alihkan perhatian sobat ke bagian sebelah kanan atas blog ini, di sana terdapat link brtuliskan Lihat Daftar Isi, jika sobat meng klik link tersebut maka secara otomatis akan di perlihatkan seluruh judul artikel yang pernah saya posting lengkap dengan tanggal serta kategori dari artikel tersebut. Sunguh menarik bukan? jika sobat ingin melihatnya sobat bisa mengkliknya dan jika sobat tidak ingin melihatnya sobat tinggal mengkliknya kembali dan daftar isi pun akan di sembunyikan sehingga tidak akan menggangu pemandangan. Tertarik untuk membuatnya? silahkan ikuti langkah-langkah berikut :

•Terus apa hubungannya dengan judul di atas?

Oh iya ke asyikan bercerita jadi lupa pada topik bahasan. OK kita kembali ke lap....top (yeee..ngekor ama tukul) eh topik bahasan. Bagi para sobat yang baru membuat blog dan baru memiliki blogroll hanya beberapa saja mungkin tulisan ini tidak terlalu bermanfaat, tapi mungkin barangkali nanti setelah link sobat jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa jadi bermanfaat. Memang seperti yang tadi saya katakan di awal bahwa bertukar link atau link Exchange sangat bermanfaat, tapi...ada tapinya nie sobat..kalo link sobat sudah mencapai ratusan atau bahkan ribuan tentu saja akan menemui masalah, yaitu tentu saja link ini akan memakan tempat yang banyak dan jadi tidak enak untuk di pandang mata para pengunjung. Nah jika sobat mempunyai masalah demikian, maka saya akan memberikan beberapa alternatif jalan keluarnya (tuh kan jadi nyambung, keluar juga kata alternatif nya). Yaitu antara lain :

• Langkah pertama :

• Sign in di blogger

• Klik menu Layout

• Klik menu Edit HTML

• Klik link Download full template, silahkan save untuk backup data

• Copy paste kode CSS berikut di atas kode ]]></b:skin>

BERIKUT KODE NYA

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}

Klik tombol SIMPAN TEMPLATE

• Ada variasi lain, yaitu dengan memakai tabel, contoh :

<table border="3" width="155" height="130" cellpadding="2">

<tr>

<td align="left">

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a> <br/><br/> <a href="http://user-online.blogspot.com" target="_blank">User Online</a> <br/><br/> <a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free Blog Template</a> <br/><br/> <a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize service</a> <br/><br/> <a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a> <br/><br/>

</marquee>

</td>

</tr>

</table>

• LIHAT KEMBALI HASILNYA

• Langkah kedua :

• Klik menu Elemen Halaman

• Klik tulisan Tambah sebuah Elemen Halaman

• Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML

• Copy paste kode berikut ke dalam elemen yang muncul

<div id="toc"></div>

• Klik tombol Simpan

• Pindahkan elemen yang baru di buat tepat di atas elemen Post

• Klik tombol Simpan yang berada di sebelah atas

• Klik tulisan Tambah sebuah Elemen Halaman kembali

• Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML

• Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen

<div id="toclink"><a href="javascript:showToc();">Lihat

Daftar Isi</a><br/><br/></div>

<script style="text/javascript"

src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>

<script

src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

• Ganti tulisan YOURBLOG dengan nama blog sobat

• Klik tombol Simpan

• Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)

• Klik tombol SIMPAN yang berada di sebelah atas

• Selesai

• Kode yang terakhir di pasang merupakan kode asli yang di buat oleh hans dan tentunya semua hasil dari kode tersebut berbahasa inggris, baik itu judul , alert dan segala macamnya adalah berbahasa inggris, jika sobat menginginkan jadi berbahasa indonesia, saya sudah memodifikasi javascrips nya sehingga akan menjadi berbahsa indonesia seperti milik saya. Cara yang harus di lakukan sangatlah mudah, sobat tinggal mengganti kode terakhir yang di pasang dengan kode di bawah ini :

<div id="toclink"><a href="javascript:showToc();"><img

src="http://amen24.googlepages.com/folder.gif"/>&nbsp;&nbsp;Lihat Daftar Isi !</a><br/><br/></div><script style="text/javascript" src="http://amen24.googlepages.com/daftarisi.js"></script><script src="http://YOURBLOG.blogspot.com/feeds/

posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

SELAMAT MENCOBA