Membatasi tampilan gadget yang memanjang

Pada postingan sebelumnya telah dijelaskan cara membatasi tampilan arsip yang memanjang. Caranya hampir sama tetapi bedanya terletak pada id gadget yang ingin anda batasi tampilannya. Sebagai contoh bisa anda perhatikan cara penggunaan kode html berikut ini.

Untuk membatasi tampilan gadget arsip, yang anda lakukan adalah mencari kode seperti dibawah ini pada edit html template blog anda:

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'> 

Kemudian untuk membatasi tampilan gadgetnya anda harus menambah kode tersebut seperti yang ditulis tebal pada kode dibawah ini.

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='overflow: auto; width: 100%px; height: 200px; padding: 10px; border: 1px solid #000000; ' >
<div id='ArchiveList'>

Perhatikan kode <div id='ArchiveList'> diatas, tidak ada perubahan atau penambahan untuk kode tersebut. Tetapi ArchiveList menunjukan id atau nama gadget arsip. Sedangkan untuk membatasi tampilannya, yang anda harus lakukan adalah merubah kode <div class='widget-content'> menjadi kode <div class='widget-content' style='overflow: auto; width: 100%px; height: 200px; padding: 10px; border: 1px solid #000000; ' >

Dengan melihat contoh diatas, berarti anda juga bisa membatasi tampilan gadget yang lainnya. Seperti pada gadget artikel populer, biasanya memiliki id ‘PopularPosts’. Sehingga untuk membatasi tampilanya bisa anda perhatikan di bawah ini.

Kode gadget artikel populer, biasanya ditulis sebagai berikut;

<b:widget id='PopularPosts' locked='false' title='artikel populer' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>

Jadi untuk membatasi tampilannya, maka penulisanya adalah sebagai berikut;

<b:widget id='PopularPosts' locked='false' title='artikel populer' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content' style='overflow: auto; width: 100%px; height: 200px; padding: 10px; border: 1px solid #000000; '>

Dengan demikian, untuk membatasi tampilan gadget yang lainnya, yang anda harus lakukan adalah mencari kode gadget dengan nama id-nya. Jika sudah ketemu, maka anda harus menambahkan kode style='overflow: auto; width: 100%px; height: 200px; padding: 10px; border: 1px solid #000000; ' pada kode <div class='widget-content'>. Sehingga menjadi <div class='widget-content' style='overflow: auto; width: 100%px; height: 200px; padding: 10px; border: 1px solid #000000; ' >

Tambahan :
Untuk mengubah panjang gadget tersebut, bisa anda ganti angka 200 pada kode height: 200px, dengan ukuran yang anda inginkan. Sedangkan untuk lebarnya adalah pada kode width: 100%px. Kode 100% bisa anda ganti dengan ukuran yang anda inginkan.

Tidak ada komentar:

Posting Komentar

Pages

Diterbitkan Oleh Angah Azhari