Membuat Blogroll Linklist Pada Blogspot

Membuat Blogroll Linklist Pada Blogspot

• 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>