Cara Membuat Recent Post dengan Menu Scroll

Terkadang kita perlu menambahkan gambar kedalam postingan blog kita, baik tujuannya untuk memperjelas artikel yang kita tulis tersebut maupun untuk keperluan lainnya.

Hari ini saya akan membahas tutorial Bagaimana Cara Memasukkan Gambar (Image) Kedalam Postingan Blog Blogger.

Memasukkan gambar kedalam postingan blog blogger bukanlah hal yang susah, yang kita lakukan hanyalah mengklik icon yang berfungsi untuk mengupload gambar yang kita masukkan tersebut, kemudian menguploadnya.

Berikut Cara Memasukkan Gambar Ke Postingan Blog Blogger Kita.

1. Silahkan siapkan gambar yang ingin di masukkan.
2. Disaat anda menulis artikel yang ingin di sisipi gambar tersebut silahkan klik icon yang saya bulati di bawah ini.

3. Maka akan keluar jendela baru seperti ini

Silahkan pilih posisi gambar, anda bisa meletakkan gambar di tengan, kanan, atau kiri. Kemudian klik telusur dan cari gambar yang ingin anda masukkan ke postingan blog setelah itu klik Upload Image.

Setelah proses upload selesai maka seharusnya gambar yang di upload tadi sudah terlihat di kolom isian postingan blogger.

Jika letaknya tidak sesuai dengan letak yang anda inginkan silahkan pidahkan ketempat yang anda inginkan, bisa dengan cara menariknya atau memindahkan kode html nya yaitu dengan cara mengklik Edit Html, jika anda masih bingung dimana bisa menemukan kode html tersebut silahkan baca artikel Cara Memasukkan Kode Html Di Posting Blogger.

Biasanya kode html gambar yang kita upload tadi akan terlihat seperti ini

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQSlbtgnuhiAsstJdzHaAdVZQlkx_tYLK-TYzoKZ0cVT7TkO7CDPYxecAiiUh7NrxdYKuqzWL0fxEB2imIAIDg4KQcc3gHecSZjLIEbwGJm-NByxTmlCFNTAC4zxmXJOfKdTJwzKHSLs/s1600/memasukkan+gambar+ke+postingan+blog.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQSlbtgnuhiAsstJdzHaAdVZQlkx_tYLK-TYzoKZ0cVT7TkO7CDPYxecAiiUh7NrxdYKuqzWL0fxEB2imIAIDg4KQcc3gHecSZjLIEbwGJm-NByxTmlCFNTAC4zxmXJOfKdTJwzKHSLs/s400/memasukkan+gambar+ke+postingan+blog.JPG" id="BLOGGER_PHOTO_ID_5489720834105500946" border="0" /></a>

Jika anda sudah menemukan kode html gambar tersebut silahkan pindahkan semua kode tersebut ke tempat yang anda inginkan.

Okey saya anggap ini selesai...

Lalu bagaimana jika gambar yang ingin kita masukkan ke postingan tersebut bukan dari komputer kita, dari situs lain masilnya.

Jika gambar tersebut dari situs lain maka yang harus anda lakukan hanyalah menuliskan kode html berikut ke dalam postingan.

<a href="Masukkan Url Gambar Disini"><img src="Masukkan Url Gambar Disini" /></a>

atau kode ini saja

<img src="Masukkan Url Gambar Disini" />

Anda juga bisa mengatur lebar dan tinggi gambar tersebut dengan menambahkan kode ini

width: 400px; height: 250px;

Sehingga jika kodenya di gabungkan akan terlihat seperti ini

<img src="Masukkan Url Gambar Disini" width: 400px; height: 250px;/>

Pada tulisan Masukkan Url Gambar Disini silahkan ganti tulisan tersebut dengan url gambar yang ingin anda masukkan tersebut.

Nah itulah 2 Cara Memasukkan gambar ke postingan blog blogger. Mudah-mudahan bisa di pahami.

Cara Membuat Scroll Pada Archive Blog

Cara Membuat Scroll Pada Archive Blog - ini hampir sama dengan membuat Fungsi Scroll Pada Label / Kategori yang telah saya posting sebelumnya, perbedaannya hanya terletak pada kata label dengan archive saja.


Untuk jelasnya langsung saja langkahnya seperti ini :

1. Login ke Acount Blogger atau Dashboard
2. Pilih Layout
3. Llalu klik Edit HTML
4. Centang dulu Expand Widget Templates
5. Cari kode yang seperti ini : <div id='ArchiveList'> atau kata Archive.
Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next.atau tanda panah(di google chrome).

6. Kalau sudah, tambahkan kode warna merah itu sebagai scollnya
Lengkapnya kode tersebut seperti dibawah ini :
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:220px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div></div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>

Angka 200px adalah tinggi kotak scroll itu, silahkan disesuaikan.

Mungkin saja diblog anda kodenya berbeda, Oleh karena itu carilah yang mirip dan perlu dicoba, terus jangan lupa templatenya dibackup dulu.ya

Kalau sudah jangan lupa save template .

Membuat fungsi scroll pada Arsip blog

Cara ini dibuat supaya blog kita terlihat cantik karena arsip yang di buka tak terlalu memanjang.
Langsung saja :
Tahap Pertama

• Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN 
• Klik Tambah Gadget
• kemudian pilih  arsip blog

Setelah itu tulis pada kotak judul dengan nama dari judul arsip sobat ...atau seperti contoh gambar di bawah ini.

Dan Klik simpan..selanjut nya ikutin tahap kedua

Tahap Kedua

Anda klik Edit HTML

• sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
• Jangan lupa di centang Expand Template Widget

• Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) 

• Cara judul yang kita buat tadi seperti contoh gambar di bawah ini..nah di contoh gambar ini kita mencari tulisan Arsip Blog

Klik gambar untuk melihat/lebih jelas.

• Setelah anda temukan sisipkan kode di bawah ini sesuai contoh gambar di atas

<div style='overflow:auto; width:ancho; height:250px;'>

</div>

Keterangan :

height:250px : adalah ukuran tinggi nya kotak scroll sedangkan untuk lebar nya sudah otomatis anda bisa ubah sesuai dengan ukuran yang anda sukai.

Di Pratinjau terlebih dahulu jika hasil nya dah mantap dan sesuai dengan yang di harap kan silahkan di simpan.

hasil nya seperti gambar di bawah ini.

 selamat mencoba !!!!

Cara Membuat LABEL Dengan Fungsi Scroll

Bagi sobat yang memiliki banyak LABEL mungkin sedikit kerepotan dengan banyaknya LABEL karena terlalu memanjang kebawah jelas tentu pemborosan tempat. Lebih jelas lihat gambar di bawah ini :

Cara Membuat Label Dengan Fungsi Scroll :
1.Login ke blog sobat.
2.Pilih Rancangan.
3.Pilih Edit HTML.
4.Centang Expand Template Widget.
5.Cari Kode di bawah ini :

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
6.Kemudian Copy dan paste Kode berikut Tepat dibawah kode tersebut.

<div style='overflow:auto; width:ancho; height:240px;'>
7.Kemudian cari kode di bawah ini :


</b:includable>
8.Copy dan paste kode dibawah ini tepat diatasnya.

</div>
9.Next Simpan.

Cara Buat Scroll Label Pada Blog

Begitu cek di tercela memaparkan postingan cara buat scroll label pada blog maka Love Moc mencoba dan alhasil mantap gan langsung berhasil. Maka secara garis besar Love Moc menganggap ini adalah hal yang pantas untuk di publish. Kenapa tidak..?? walaupun tutorial ini sudah banyak di pencarian Google akan tetapi gak ada salahnya jika kita berbagi dengan sobat² blogger.. hehe.. :)

Caranya :

Login Id Blog

Klik Rancangan

Klik edit html

Cari kode ]]></b:skin> 

Setelah kode ditemukan tambahkan kode di bawah ini dengan cara di copy dan di letakkan tepat diatas kode ]]></b:skin> 

Kode yang di copy :

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Ganti kode angka yang berwarna merah sesuai keinginan.

Cara Membuat Label Dengan Fungsi Scroll

kali ini saya akan menjelaskan Tutorial memasang label dengan fungsi scroll ini sengaja saya tulis semata-mata untuk membantu blogger yang mempunyai banyak label / kategori dalam blognya. Jika di pasang semua tentunya akan makan tempat, dan mungkin bisa membuat blog jadi timpang alias panjang sebelah antara postingan dengan sidebar.

Menu scroll tentunya sudah banyak yang tau, menu ini dapat ditarik ke bawah dan ke atas. Cara membuatnya sangat mudah, hanya dengan menyisipkan sedikit kode HTML maka jadilah label dengan fungsi scroll.

Untuk membuatnya, silahkan ikuti dengan cermat langkah-langkahnya berikut ini :

1. Login ke blogger dengan ID sobat tentunya.
   
   
2. Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul.
   
   
3. Anggap saja sobat telah membuat judul labelnya dengan nama “Kategori”.
   
   
4. Sekarang tuju ke Edit HTML.
   
   
5. Klik Expand Template Widgets.
   
   
6. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan “Kategori”, maka akan muncul kode HTML yang ribet, tapi jangan pusing melihat kode HTML tersebut.
   
   
7. Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat.
   
   
   <b:widget id='Label1' locked='false' title='Kategori' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
   <div style='overflow:auto; width:ancho; height:250px;'>
   <b:if cond='data:display == &quot;list&quot;'>
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </li>
   </b:loop>
   </ul>
   <b:else/>
   <b:loop values='data:labels' var='label'>
   <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </span>
   </b:loop>
   </b:if>
   <b:include name='quickedit'/>
   </div>

   </div> </b:includable>
   </b:widget>
   
   
8. Jangan lupa Simpan Template.

Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kode yang ada adalah

<div class='widget-content'>

bukan seperti yang ada di blog saya yaitu :

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> 

yang penting letak kode tambahan yang disisipkan harus benar meletakkannya.

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.

Saya kira itu cukup sekian pelajaran blog kita kali ini, terima kasih.

Sumber : http://m-wali.blogspot.com/2012/01/cara-membuat-label-dengan-fungsi-scroll.html#ixzz1vVDHCY4j

Cara Membuat Blogroll dengan Gaya Scroll

Sebenarnya cara ini sangat berguna sekali, apalagi kalau daftar blog yang anda masukkan sudah sangat banyak, jadi dapat membuat tampilan blog anda terlihat lebih rapi dan elegan. Caranya sangat mudah anda tinggal menambahkan fungsi html/javascript saja dan menambahkan kode berikut.

    <div style="border: 1px solid #eee; height: 30px; overflow: auto; padding: 20px; width: 500px;">
    <ol>
    <li><a href="url yang ingin dimasukkan">text</a></li>
    <li><a href="url yang ingin dimasukkan">text</a></li>
    <li><a href="url yang ingin dimasukkan">text</a></li>
    <li><a href="url yang ingin dimasukkan">text</a></li>
    </ol>
    </div>

Selamat Mencoba...

Membuat Arsip blog / Daftar isi dengan fungsi scroll

Pada postingan kali ini saya akan menguraikan cara membuat Arsip blog / Daftar isi dengan fungsi scroll.
Dibawah ini adalah screenshot pada saat posting ini saya tulis:

Bagi sobat yang ingin menampilkan widgat Arsip / Daftar isi dengan fungsi scroll silahkan ikuti tips ngeblog berikut ini:

1. Login terlebih dahulu mengunakan akun bloger
2. Buatlah Arsip blog dengan menambah Gadget pada sidebar, beri nama dengan "Arsip"  ( bisa diganti sesuai keingian )  pilih gaya hierarki
   
3. Simpan/save. sampai disini anda telah membuat Arsip ( tanpa fungsi scroll ).
4. Utuk menambahkan fungsi scroll pada Arsip Sekarang tuju Tata letak -- -->>Edit HTML.
5. Beri tanda centang pada Expand Template Widgets.
6. Cari Arsip yang sudah di buat tadi, dengan CTRL+F dan ketikkan kata “Arsip”, ( biasanya di pojok kanan bawah ). akan muncul kode hatml seperti di bawah ini:
   
   
   <b:widget id='BlogArchive2' locked='false' title='Arsip' type='BlogArchive'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <div style='overflow:auto; width:ancho;height:200px;'>
   <div id='ArchiveList'>
   <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
   <b:if cond='data:style == &quot;HIERARCHY&quot;'>
   <b:include data='data' name='interval'/>
   </b:if>
   <b:if cond='data:style == &quot;FLAT&quot;'>
   <b:include data='data' name='flat'/>
   </b:if>
   <b:if cond='data:style == &quot;MENU&quot;'>
   <b:include data='data' name='menu'/>
   </b:if>
   </div>
   </div></div>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   
   
7. Perhatikan tulisan yang berwarna merah di atas, kode itulah yang harus disisipkan kedalam arsip yang telah dibuat, sedangkan tulisan yang berwarna biru pada height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan )
   
8. Simpan template dan lihatlah hasilnya

Selamat mencoba.....

Cara Membuat Arsip Blog Dengan Fungsi Scroll

Karena masalah pembelajaran and untuk blogger pemula, ckckckc . . . (emangnya saya sendiri bukan pemula apa), kali ini saya akan sharing sedikit tentang and gak banyak-banyak hehehe . . . saya akan sharing tentang Cara Membuat Arsip Blog Dengan Fungsi Scroll di blogger! kalo biasanya arsip blog itu memanjang dan tidak bisa di tentukan ketinggiannya dan menghabiskan tempat di blog, nah makanya kita sekarang akan membuatnya menjadi lebih pendek bisa mengatur ketinggiannya plus dengan fungsi scroll jadi gak akan ngehabisin tempat deh, contohnya seperti ini:

contoh  Arsip Blog Dengan Fungsi Scroll

nah gimana gak ngehabisin tempaat kan? ketinggiannya juga bisa kita tentukan sendiri, biar gak berlama-lama lagi sekarang kita akan lansung membahas caranya:

1. Login ke blogger sobat.
2. Sebelumnya sobat harus memasang wigets Arsip Blog sobat jika sobat belum memasangnya.
3. Jika sudah selanjutnya pada menu pilih Rancangan ➨ Edit HTML ➨ Centang Expand Template Widget.
4. Sekarang kita akan menambahkan atau menyipkan kode <div style='overflow:auto; width:ancho; height:300px;'> dan </div> untuk mengatur ketinggian Arsip Blog, jadi coba sobat cari kode <h2><data:title/></h2> jika keslitan mencarinya coba baca Cara Cepat Mencari Kode HTML.
Keterangan; setiap template berbeda-beda jadi detailnya dan penyisipan kode <div style='overflow:auto; width:ancho; height:300px;'> dan </div> seperti ini:

 <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div style='overflow:auto; width:ancho; height:300px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

nah seperti itulah sobat harus menyispkan kodenya.

5. Jika sudah klick pertinjauan terlebih dahulu, jika sudah berhasil baru klick simpan tempalte.

Keterangan;

Untuk mengatur tinggi rendahnya Arsip Blog, sobat tinggal rubah height:300px sesuai selera sobat, seperti height:250px dan lain sebagainya, ok!

Cara Paling Mudah / Gampang Membuat Scroll Box pada Arsip Blog

Cara Paling Mudah / Gampang Membuat Scroll Box pada Arsip Blog.  teman teman bosan dan jenuh  dengan tampilan arsip blog yang terlalu panjang dan ingin menjadikannya lebih simpel dalam satu kotak, berikut akan saya jelaskan bagaimana cara membuat sroll box arsip pada blog. sebenarnya untuk tidak menampilakan bentuk arsib blog yang tidak  kepanjangan bisa dilakukan dengan pengaturan standar bawaan blogger sendiri, seperti membuat tampilan menu drop down atau tampilan flat bisa dilakukan secara gampang. tinggal masuk kepengaturan blog saja dan tinggal memilih tampilan mana yang anda suka.

Tapi bisakah kita tetap menggunakan pilihan menu Hierarchy dan terhindar dari tampilan arsib yang kepanjangan ?? maka dari itu Kali ini saya akan berbagi bagaimana trik membuat widget  arsib blog yang  mempunyai fungsi scrol .

berikut cara-caranya:
• Masuk ke blogger
• Klik Tata Letak
• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
• Tapi Anda harus pilih gaya Hierarki
• Setelah itu, klik Edit Html
• Beri tanda centang pada tulisan Expand Widget Template
• Lalu Anda cari kode seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

Kemudian tambahkan code ini <div style='overflow:auto; width:ancho; height:100px;'> persis dibawah code <div class='widget-content'> jadi hasilnya akan berbentuk seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<div style='overflow:auto; width:ancho; height:100px;'>

Setelah itu cari code ini tidak jauh kog dari code diatas

<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

Dan terakhir tinggal menutup code tersebut dengan perintah </div> jadi hasilnya akan seperti ini

<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

Dan bentuk script keseluruhan akan seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

<div style='overflow:auto; width:ancho; height:100px;'>
100 px adalah tinggi dari bidang tersebut jadi tinggal rubah nilainya sampai anda sudah merasa cocok dengan template anda.

Terakhir simpan template anda dan selamat sekarang anda sudah mempunyai widget arsib blog yang mempunyai fungsi scrol , semoga artikel Cara Paling Mudah / Gampang Membuat Scroll Box pada Arsip Blog bisa bermanfaat bagi kamu semua.

Tehnik Membuat Scroll Box untuk Desain Blog

Tehnik Membuat Scroll Box untuk Desain Blog. Untuk desain blog agar terlihat menarik dan rapi maka salahsatu hal yang kita lakukan adalah tekhnik membuat sroll box, scroll box sendiri berfungsi agar postingan kita bisa tertata sesuai judul, nah kali ini saya akan kasih tips cara tehnik membuat Scroll Box. Scroll Box banyak digunakan di web atau blog untuk desain blog nya. Scroll Box sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak artikel atau apa saja yang ingin tetap ditampilkan pada satu halaman. Scroll Box selain bisa digunakan untuk tempat artikel, banyak juga yang menggunakan Scroll Box sebagai tempat daftar isi.

Tehnik membuat Scroll Box sangat mudah, silahkan anda perhatikan contoh dibawah ini berikut kodenya :
 Berikut Kode untuk scroll box diatas :

 <div align="center">
 <table width="250" border="1">
 <tr> <th colspan="100%" scope="col"bgcolor="#F2F2F2">CONTOH DAFTAR ISI TUTORIAL BLOG</th> </tr><tr><td>
 <div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 250px; height: 250px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #EFEFFB;">

 <ul>
 <li><a href="http://internetblogcomputer.blogspot.com/2012/01/cara-membuat-email-di-gmail.html">Cara Membuat E-mail gmail</a></li>
 <li><a href="http://internetblogcomputer.blogspot.com/2012/01/cara-membuat-email-di-yahoo.html">Cara Membuat email Yahoo</a></li>
 </ul></div></div></td></tr></table></div>

Silahkan anda ganti teks berwarna merah dia atas dengan daftar isi milik anda. Untuk memilih warna beserta kodenya silahkan anda lihat tabel kode warna yang ada disebelah samping halaman ini.
Dan cara penulisan  link untuk daftar seperti diatas, semoga apa yang saya tulis Tehnik Membuat Scroll Box untuk Desain Blog bisa bermanfaat bagi kita semua.