Halaman blogroll atau tukar link dilengkapi dengan screenshoot image dari blog yang bersangkutan bagaimana cara membuatnya?

Begitulah ada yang tanya ke saya, lha terus saya tanya siapa? hihihi.. baiklah yang belum tahu caranya boleh ikuti cara sederhana dibawah ini, karena sebenarnya membuat halaman blogroll with thumbnail image cukup mudah, yang perlu itu justru adalah bagaimana agar tampilan halaman blogroll bisa menjadi bagus dan rapi, untuk urusan ini maka pengetahuan CSS akan sangat berperan. Misalnya saja seperti dibawah ini:

Contoh 1:

Gudang Informasi	Download Mp3	Catatanku	Cerita Anak

Diatas itu contoh yang simple, kalau ingin lebih lengkap dan rinci bisa seperti dibawah ini:

Contoh 2:

Blog: Gudang Informasi Author: Albri Description: Informasi Dalam Gudang, tapi gudangnya masih kosong hehe URL: http://ayomaju.com/	Blog: Download Mp3 Author: Paijo Description: Gudang lagu, mp3 gratis, review musik, lirik dan cord gitar dan piano URL: http://music.wongduro.com/
Blog: Catatanku Author: Albri Description: Catatan blogger pemula selama ngeblog di internet dan catatan-catatan jurnal belajar URL: http://www.albri.info/	Blog: Cerita Anak Author: Tukang Dongeng Description: Cerita anak yang dapat didownload menjadi ebook, cerita klasik, cerita teladan, cerita Islami dan cerita lainnya URL: http://alkisah.ateonsoft.com/

Banyak sekali model yang bisa dikembangkan, sebagai dasar mungkin perlu juga referensi tutorial HTML, dan halaman blogroll itu akan Anda Banget..!

Gambar otomatis keluar dan untuk itu silahkan mendaftar di Thumbshots. Tanpa mendaftar sebenarnya sudah bisa bekerja, namun saya anjurkan mendaftar saja agar sopan  . Dan yang pasti halaman yang menampilkan thumbnails sisipkan link ke Thumbshots, selain sebagai ucapan terima kasih, juga agar layanan tidak akan berhenti untuk blog Anda.

Format pemanggilan Thubmnail adalah seperti dibawah ini:

<img src="http://open.thumbshots.org/image.aspx?url=http://ayomaju.com/" />

Ganti warna merah diatas dengan URL Blog yang diinginkan. Format gambar diatas adalah kode standar, untuk lebih baiknya berikan atribut seperti pernah saya tulis di cara Mengoptimalkan pemasangan gambar di blog.

Bisa untuk semua jenis blog?

Tentu saja bisa, kalau wordpress dan ingin tanpa plugin buat saja di halaman staticnya begitu juga dengan blogspot, bisa dibuat dalam postingan atau di halaman static.

Bisakah dipasang di sidebar?

Bisa, namun kalau terlalu banyak maka loading blog akan menjadi berat, so kalau dipasang di sidebar, sebaiknya maksimal 4 saja dan sesuaikan dengan templatenya, biasanya ini adalah daftar blog lain kita, sebagai promosi.

Karena model tergantung selera, maka silahkan dibuat sendiri, namun yang masih kesulitan maka dibawah ini adalah bentuk code untuk dua contoh diatas, boleh dipelajari untuk dikembangkan, atau sebagai contoh saja sebagai referensi belajar.

Kode Contoh 1:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" align="center"><a href="http://ayomaju.com/"><strong>Gudang Informasi</strong></a></td>
<td width="25%" align="center"><a href="http://music.wongduro.com/"><strong>Download Mp3</strong></a></td>
<td width="25%" align="center"><a href="http://www.albri.info/"><strong>Catatanku</strong></a></td>
<td width="25%" align="center"><a href="http://alkisah.ateonsoft.com/"><strong>Cerita Anak</strong></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="http://ayomaju.com/"><img border="0" alt="Gudang Informasi" class="gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://ayomaju.com/" width="120" height="90" /></a></td>
<td align="center" valign="top"><a href="http://music.wongduro.com/"><img border="0" alt="Download Mp3" class="gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://music.wongduro.com/" width="120" height="90" /></a></td>
<td align="center" valign="top"><a href="http://www.albri.info/"><img border="0" alt="Catatanku" class="gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://www.albri.info/" width="120" height="90" /></a></td>
<td align="center" valign="top"><a href="http://alkisah.ateonsoft.com/"><img border="0" alt="Cerita Anak" class="gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://alkisah.ateonsoft.com/" width="120" height="90" /></a></td>
</tr>
</table>
<style><!-- /*ini untuk CSSnya, silahkan di oprek*/
img.float-left {margin: 5px 10px 10px 0px;}
img.gambarbertepi {padding:5px; border:1px solid #ccc; background:#f0f0f0;}
img.gambarbertepi:hover {background:#fff;}
--></style>

Kode Contoh 2:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size:11px;">
<tr>
<td align="left" width="50%" valign="top" style="padding-bottom:20px; padding-right:20px;"><img border="0" alt="Gudang Informasi" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://ayomaju.com/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://ayomaju.com/">Gudang Informasi</a> <br />
<strong>Author:</strong> Albri <br />
<strong>Description:</strong> Informasi Dalam Gudang, tapi gudangnya masih kosong hehe<br />
<strong>URL:</strong> http://ayomaju.com/</td>
<td align="left" width="50%" valign="top" style="padding-bottom:20px;"><img border="0" alt="Download Mp3" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://music.wongduro.com/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://music.wongduro.com/">Download Mp3</a> <br />
<strong>Author:</strong> Paijo <br />
<strong>Description:</strong> Gudang lagu, mp3 gratis, review musik, lirik dan cord gitar dan piano<br />
<strong>URL:</strong> http://music.wongduro.com/</td>
</tr>
<tr>
<td align="left" width="50%" valign="top" style="padding-bottom:20px; padding-right:20px;"><img border="0" alt="Catatanku" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://www.albri.info/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://www.albri.info/">Catatanku</a> <br />
<strong>Author:</strong> Albri <br />
<strong>Description:</strong> Catatan blogger pemula selama ngeblog di internet dan catatan-catatan jurnal belajar<br />
<strong>URL:</strong> http://www.albri.info/</td>
<td align="left" width="50%" valign="top" style="padding-bottom:20px;"><img border="0" alt="Cerita Anak" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://alkisah.ateonsoft.com/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://alkisah.ateonsoft.com/">Cerita Anak</a> <br />
<strong>Author:</strong> Tukang Dongeng <br />
<strong>Description:</strong> Cerita anak yang dapat didownload menjadi ebook, cerita klasik, cerita teladan, cerita Islami dan cerita lainnya<br />
<strong>URL:</strong> http://alkisah.ateonsoft.com/</td>
</tr>
</table>
<style><!-- /*ini untuk CSSnya, silahkan di oprek*/
img.float-left {margin: 5px 10px 10px 0px;}
img.gambarbertepi {padding:5px; border:1px solid #ccc; background:#f0f0f0;}
img.gambarbertepi:hover {background:#fff;}
--></style>

Untuk pengulangan kebawah jika daftar blog banyak, ulangi saja dari tanda warna merah (kode <tr> sampai </tr>). Pengulangan adalah satu baris record tabel kalau masih belum ada isinya cukup diisi dengan &nbsp; contoh dibawah ini (perhatikan warna merah):

<tr>
<td align="left" width="50%" valign="top" style="padding-bottom:20px; padding-right:20px;"><img border="0" alt="Catatanku" align="left" class="float-left gambarbertepi" src="http://open.thumbshots.org/image.aspx?url=http://www.albri.info/" width="90" height="60" style="padding:3px;" /><strong>Blog:</strong> <a href="http://www.albri.info/">Catatanku</a> <br />
<strong>Author:</strong> Albri <br />
<strong>Description:</strong> Catatan blogger pemula selama ngeblog di internet dan catatan-catatan jurnal belajar<br />
<strong>URL:</strong> http://www.albri.info/</td>
<td align="left" width="50%" valign="top" style="padding-bottom:20px;">&bsp;</td>
</tr>

Maksud tidak ada isinya adalah misal ada 3 blog, maka dari contoh diatas, ‘kan menjadi tidak penuh, maka yang kosong itulah ditambah kode &nbsp; dan selalu ditengah kode <td> dan </td>. Kode warna hijau adalah CSS, atau style, tentu sesuaikan dengan selera Anda.

Semoga bermanfaat.