Cara membuat scrolling bloglist pada blog

Scrolling bloglist  adalah seperti mana terdapat pada sidebar blog ini.mempunyai butang untuk memasukkan link ,memaparkan hanya senarai blog, mengikut update dan tidak menggunakan banyak ruangan .Kebanyakan blog list yang ada adalah panjang jadi dengan menggunakan cara ini adalah lebih mudah untuk menguruskan kannya.

Untuk membuatnya:
Backup template terlebih dahulu
masuk ke design—edit html-expand template widget
Kemudian cari kod yg dibawah,yg bertanda dengan warna merah  adalah berbeza mengikut tajuk yg diberi pada widget.




<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 != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<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 == "true"'>
<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 == "true"'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<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 == "true"'>
<b:if cond='data:showItemTitle == "true"'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<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 > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
<a href='javascript:void(0)'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + "_show-all"' style='margin-left: 5px;'>
<a href='javascript:void(0)'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
Gantikan semua kod diatas dengan kod ini:
<b:widget id='BlogList1' locked='false' title=bloglist  ‘ type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title' style='border:none;'><data:title/></h2>
</div>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 150px; width:250px;'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'><div class='blog-title'><a expr:href='data:item.blogUrl' target='_blank'><data:item.blogTitle/></a></div></li></b:loop></ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

#Lebar dan tinggi widget boleh diubah pada bagaian teks warna hijau.
Kemudian save template