Cara Membuat Scroll Pada Bloglist

Bloglist seperti gambar diatas
Mempunyai ruang untuk memasukkan link ,
menampilkan hanya daftar blog,
mengikut update dan tidak menggunakan banyak ruangan
Kebanyakan blog list yang masih asli adalah panjang.
dengan memasang scroll pada bloglist akan menghemat ruang pada blog kita.
untuk membuat'nya ikuti langka2 berikut :
Mula mula sobat mesti memasang bloglist terlebih dahulu

1. Klik Design > Page Elements > Add Gadget
2. Pilih Bloglist
3. Masukan Alamat Url blog teman2 yg sobat inginkan
   Pada Kolom Daftar Blog
4.Klik Save

Oke saya anggap sobat sudah mempunyai Bloglist
Untuk Membuat Scroll pada Bloglist ikuti langkah2 dibawah ini :

1. Klik Design > Edit Html > Centang pada Expand Wdget
2. Cari Kode <b:widget id='BlogList1' locked='false' title='Blog List' type='BlogList'>
   Text Warna Merah pada Kode diatas berbeda mengikut judul bloglist masing2
3. Kemudian Sobat akan menemukan kode seperti dibawah ini :

<b:widget id='BlogList1' locked='false' title='Blog List' type='BlogList'>

<b:includable id='main'>

    <!-- only display title if it's non-empty -->

    <b:if cond='data:title != &quot;&quot;'>

      <h2 class='title'><data:title/></h2>

    </b:if>

    <div class='widget-content'>

      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>

        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>

          <b:loop values='data:items' var='item'>

            <li expr:style='data:item.displayStyle'>

              <div class='blog-icon'>

                <b:if cond='data:showIcon == &quot;true&quot;'>

                  <input expr:value='data:item.blogIconUrl' type='hidden'/>

                </b:if>

              </div>

              <div class='blog-content'>

                <div class='blog-title'>

                  <a expr:href='data:item.blogUrl' target='_blank'>

                    <data:item.blogTitle/></a>

                </div>

                <div class='item-content'>

                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>

                    <b:if cond='data:item.itemThumbnail'> 

                      <div class='item-thumbnail'>

                        <a expr:href='data:item.blogUrl' target='_blank'>

                          <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>

                        </a>

                      </div>

                    </b:if>

                  </b:if>

                  <b:if cond='data:showItemTitle == &quot;true&quot;'>

                    <span class='item-title'>

                      <b:if cond='data:item.itemUrl != &quot;&quot;'>

                        <a expr:href='data:item.itemUrl' target='_blank'>

                          <data:item.itemTitle/></a>

                      <b:else/>

                        <data:item.itemTitle/>

                      </b:if>

                    </span>

                  </b:if>

                  <b:if cond='data:showItemSnippet == &quot;true&quot;'> 

                    <b:if cond='data:showItemTitle == &quot;true&quot;'>

                      -

                    </b:if>

                    <span class='item-snippet'>

                      <data:item.itemSnippet/>

                    </span>

                  </b:if>

                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>

                    <div class='item-time'>

                      <data:item.timePeriodSinceLastUpdate/>

                    </div>

                  </b:if>

                </div>

              </div>

              <div style='clear: both;'/>

            </li>

          </b:loop>

        </ul>

        <b:if cond='data:numItemsToShow != 0'>

          <b:if cond='data:totalItems &gt; data:numItemsToShow'>

            <div class='show-option'>

              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>

                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>

              </span>

              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>

                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>

              </span>

            </div>

          </b:if>

        </b:if>

        <b:include name='quickedit'/>

      </div>

    </div>

  </b:includable>

</b:widget>

4. Kemudian sobat tambahkan kode pembuka scroll dan kode penutup

   kode pembuka scroll :

   <div style='overflow:auto; padding:5px; width:230px; height:200px; background-color: #AC58FA; border:1px solid #ccc;'>

   kode penutup :

   </div>

Sobat bisa mengganti size tinggi dan lebar scrool
pada width:230px; height:200px; sesuai keinginan sobat
dan warna layar scrool pada background-color: #000000;
jika sobat kesulitan untuk mencari kode warna boleh cari
Disini

5. pasangkan kode scroll tersebut pada posisi sepeti contoh dibawah ini :

<b:widget id='BlogList1' locked='false' title='Blog List' type='BlogList'>

<b:includable id='main'>

    <!-- only display title if it's non-empty -->

    <b:if cond='data:title != &quot;&quot;'>

      <h2 class='title'><data:title/></h2>

    </b:if>

    <div class='widget-content'>

<div style='overflow:auto; padding:5px; width:230px; height:200px; background-color: #AC58FA; border:1px solid #ccc;'>

      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>

        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>

          <b:loop values='data:items' var='item'>

            <li expr:style='data:item.displayStyle'>

              <div class='blog-icon'>

                <b:if cond='data:showIcon == &quot;true&quot;'>

                  <input expr:value='data:item.blogIconUrl' type='hidden'/>

                </b:if>

              </div>

              <div class='blog-content'>

                <div class='blog-title'>

                  <a expr:href='data:item.blogUrl' target='_blank'>

                    <data:item.blogTitle/></a>

                </div>

                <div class='item-content'>

                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>

                    <b:if cond='data:item.itemThumbnail'>

                      <div class='item-thumbnail'>

                        <a expr:href='data:item.blogUrl' target='_blank'>

                          <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>

                        </a>

                      </div>

                    </b:if>

                  </b:if>

                  <b:if cond='data:showItemTitle == &quot;true&quot;'>

                    <span class='item-title'>

                      <b:if cond='data:item.itemUrl != &quot;&quot;'>

                        <a expr:href='data:item.itemUrl' target='_blank'>

                          <data:item.itemTitle/></a>

                      <b:else/>

                        <data:item.itemTitle/>

                      </b:if>

                    </span>

                  </b:if>

                  <b:if cond='data:showItemSnippet == &quot;true&quot;'>

                    <b:if cond='data:showItemTitle == &quot;true&quot;'>

                      -

                    </b:if>

                    <span class='item-snippet'>

                      <data:item.itemSnippet/>

                    </span>

                  </b:if>

                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>

                    <div class='item-time'>

                      <data:item.timePeriodSinceLastUpdate/>

                    </div>

                  </b:if>

                </div>

              </div>

              <div style='clear: both;'/>

            </li>

          </b:loop>

        </ul>

        <b:if cond='data:numItemsToShow != 0'>

          <b:if cond='data:totalItems &gt; data:numItemsToShow'>

            <div class='show-option'>

              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>

                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>

              </span>

              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>

                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>

              </span>

            </div>

          </b:if>

        </b:if>

        <b:include name='quickedit'/>

      </div></div>

    </div>

  </b:includable>

</b:widget>

6. Klik Preview/Pratinjau
   Jika tidak ada masalah Klik save

selamat mencoba...
Semoga bermanfaat