Membuat Daftar isi bentuk Scroll page

Untuk membuat daftar isi blog ke dalam bentuk scroll tidaklah sulit, tidak perlu merubah banyak hal anda hanya perlu tambahkan beberapa kode dalam blog. Berikut adalah cara paling mudah untuk membuat daftar isi untuk blog atau situs anda dalam bentuk scroll. Dalam blog biasanya postingan tidak hanya belasan page atau halaman, Karena blog seringkali di jadikan tempat untuk berbagi pengetahuan dan mencurahkan isi hati, maka biasanya halaman pada blog akan sangat banyak mencapai puluhan atau bahkan ratusan.

Dengan jumlah halaman postingan blog yang sangat banyak tentunya akan sangat tidak indah bila daftar isi yang kita buat berbentuk hierarki karena akan memakan tempat yang sangat banyak dan tidak efisien. untuk itulah perlu dibuat daftar isi berbentuk scroll page, mungkin sudah cukup basa basinya sekarang kita akan bahas cara membuat daftar isi dalam scroll tadi. Silahkan anda ikuti langkah dibawah ini:
1. Login dulu ke blog kamu, bila belum punya silahkan buat dulu gratis kok, klik disini untuk mengetahui cara buat blog gratis.
2. Login ke blog kamu
3. Masuk Rancangan lalu klik Edit Html jangan lupa centang Expand Template Widget di pojok kanan atas.
4. Cari widget arsip blog, untuk memudahkannya silahkan pake search atau find aja dan masukkan "arsip" atau "widget id='HTML4" sebagai keywordnya.

biasanya kodenya seperti di bawah ini;
<b:widget id="HTML4" locked="false" title="Arsip Blog Scroll Menu" type="HTML">

<b:includable id="main">

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

</b:if></b:includable></b:widget>

<h2 class="title">

<data:title></data:title></h2>

<div class="widget-content">

<data:content>

</data:content></div>

<b:include name="quickedit">

</b:include>

5. Kemudian sisipkan kode berikut

<div style="height: 200px; overflow: auto;">

</div>


6. Hasilnya akan seperti dibawah ini:

<b:widget id='HTML4' locked='false' title='Arsip Blog Scroll Menu' type='HTML'>

<b:includable id='main'>

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

<b:if cond='data:title != ""'>

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

</b:if>

<div class='widget-content'>

<div style='overflow:auto;height:200px;'>

<data:content/>

</div>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

untuk memudahkan pemahaman perhatikan kode yang berwarna merah

7. Klik save template dan lihat hasilnya