Modifikasi Widget Link List Supaya Tampil Mendatar

Blogrolling atau saling tukar-menukar taut blog/situs sudah jamak dilakukan oleh para blogger. Selain sebagai sarana untuk promosi blog/situs, juga untuk menjalin pertemanan dengan sesama blogger di arena blogosphere (baca artikel "Mengapa Blogroll (Tukar Link) itu Perlu" @ Refleksi dan Blog Tutorial).

Bagi sebagian pengguna blogspot (blogger yang baru), termasuk kami, pembuatan blogroll biasanya dilakukan dengan menggunakan widget link list dan ditaruh di area sidebar. Namun sayangnya jika daftar blog/situs bertambah banyak maka tampilannya akan semakin memanjang ke bawah. Dan bagi kami hal tersebut 'kurang enak' dilihat.

Berikut kiat supaya daftar tersebut bisa tampil memanjang secara horisontal (mendatar ke samping):

1. Atur supaya widget link list yang ada ditaruh di area sebelah bawah (melalui tab Template | Page Elements).


2. Masuk ke tab Template | Edit HTML dan aktifkan opsi Expand Widget Templates.


3. Lakukan backup template terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.


4. Cari kode seperti di bawah ini:

<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2>
</b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/>
</a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>


5. Hapus tag <ul>, <li>, </li>, dan </ul> lalu tambahkan kode berikut:

 <div class='widget-content'>
   <b:loop values='data:links' var='link'>
     &#149;&#160;&#160;<a expr:href='data:link.target'><data:link.name/>
</a>&#160;
   </b:loop>&#149;
   <b:include name='quickedit'/>
 </div>


6. Tekan tombol SAVE TEMPLATE, dan lihat hasilnya. Contoh hasil bisa dilihat di bagian bawah dari situs ini.

Keterangan:
Kode &#149; dan &#160; adalah kode khusus HTML (ASCII) untuk pengganti karakter bullet dan spasi (klik disini untuk melihat daftar karakter-karakter khusus HTML secara lengkap). Kode tersebut bisa Anda ubah sesuai dengan kebutuhan.