Membuat Blog Roll/ Blog List

Widget Link List gunanya untuk menampilkan daftar-daftar link [namanya juga Link List om! :)] Namun, kekurangan link ini adalah dia akan terus menumpuk, jika 'Number of Links' [jumlah link-nya yang ditampilkan -thom] tidak diisi alias dibiarkan kosong. Jika kita batasi, ketika link sudah melebihi batas, maka yang ditampilkan hanya sebatas jumlah yang ditentukan. Tentu ini sangat merugikan. Yaa ... jika ditampilkan semua, otomatis memakan tempat, di samping juga orang melihatnya [jangankan lihat, melirik aja ogah hehehe] malas. Namun, jika dibatasi, ya terbatasnya itu tadi yang jadi masalah.

Solusinya? Dioprek aja. :D Simak caranya di bawah ini.

Terima kasih Dunia Blogger yang telah berbagi ilmu ini duluan. :)

• Pertama, buat Widget Link List terlebih dahulu. Caranya, masuk ke Layout » 'Add a Page Element' » 'Link List' » Kemudian isi dengan 1 atau 2 link terlebih dahulu. Mau banyak juga tidak apa-apa. Kalau pun belum juga tidak apa-apa, hehehe ... Klik Save
  
  
  
  
  


• Langkah selanjutnya pergi ke pasar Edit HTML. Pastikan 'Expand Template Wizard' sudah dicentang.


• Tekan Ctrl+F » masukkan 'LinkList' atau title widget Link List lalu Enter.
  

  Hati-hati, setiap template berbeda-beda, kadang dalam satu template ada 2 atau lebih 'LinkList'. Agar lebih aman, pakai kata kunci dengan title yang digunakan untuk menamai widget Link List yang dibuat.



• Perhatikan kode berikut :
  

  <b:widget id='LinkList1' locked='false' title='Blog Roll' 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>

  
  

  Abaikan id dan title jika tidak sama. Setiap template akan berbeda-beda



• Jika ingin tampilan linknya nanti menjadi ke samping, cukup hilangkan <ul>, <li>, </li> dan </ul> Setelah itu, tambahkan pemisah antar link. Bisa tanda '|', '||' atau tanda yang lain misalnya dash [tanda - 'minus'].
  
  Dan inilah hasil oprekan kode yang sudah ditambah kode untuk membuat 'Roll / Scroll' --kode yang ditulis tebal :
  

  <div style='width:100%; height:100px; overflow:auto;'>
  <b:loop values='data:links' var='link'>
  <a expr:href='data:link.target'><data:link.name/>||</a>
  </b:loop>
  </div>



• Jika ingin mencoba style yang lain, misalnya yang model link-nya ditampilkan menurun, cukup tambahkan kode 'Roll / Scroll' sehingga hasilnya nanti seperti ini :
  

  <div style='width:100%; height:100px; overflow:auto;'>
  <ul>
  <b:loop values='data:links' var='link'>
  <li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
  </b:loop>
  </ul>
  </div>
  

  
  
  Screenshot :
  
  

Mudah kan??