KODE HTML

Cara membuat Java scriv Daptar Isi
====================================================

Topik hari ini adalah bagaiman cara membuat daftar isi pada blog dengan menggunakan HTML/JavaScript. Mungkin ini bukanlah topik baru lagi, tapi bagi teman-teman yang masih binggung cara membuatnya, langsung saja ikuti langkah-langkahnya :

1. Login ke Blogger.

2. Buka menu Layout -> Page Elements

3. Klik Add a Gadget -> HTML/Javascript.

4. Masukkan kode dibawah ini kedalam kotak


* Daftar Isi menggunakan icon kecil disampingnya :
====================================================

<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdtgpxMVM2v44vEjU6yv3XnGpYHyQL1cIUCoe1_ArE5R6cH9oZOMQhWb52CfwuReilD1SjZfsClcrR5XAd70OssXc5DhaTuc4KErD5ML8etGcz__6noKq_DGQttwT9gFj0vDq799BU0nD/") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;
}
</style>

<div style="height: 180px; margin: 0px; overflow: auto; padding: 3px; width: 284px;">

<div class="list">
<a href="http://shindublog.blogspot.com/2009/09/cara-menghilangkan-icon-obeng-dan-tang.html">Cara Menghilangkan Icon Obeng &amp; Tang di Blog</a></div>

<div class="list">
<a href="http://shindublog.blogspot.com/2009/09/cara-membuat-link-berkelip-kelip.html">Cara Membuat Link Berkelip-Kelip</a></div>

<div class="list">
<a href="http://shindublog.blogspot.com/2009/09/cara-membuat-tulisan-berjalan-marquee.html">Cara Membuat Tulisan Berjalan "MARQUEE"</a></div>

</div>

====================================================

* Daftar Isi menggunakan angka disampingnya :
====================================================
<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

<div style="background-color: white; border: 1px solid rgb(255, 255, 255); height: 180px; margin: 0px; overflow: auto; padding: 3px; width: 380px;">

<div class="list">
1. <a href="http://alamat%20url%20yang%20ingin%20di%20tampilkan/">Cara Mnghilangkan Navbar</a></div>

<div class="list">
2. <a href="http://alamat%20url%20yang%20ingin%20di%20tampilkan/">Panduan membuat blog di blogger</a></div>

</div>
====================================================

Keterangan:380px merupakan lebar kotak, 180px merupakan tinggi kotak, #ffffff pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis pinggir. Silahkan diganti sesuai dengan template anda.
Ingat:

Ganti tulisan yang berwarna Merah dengan alamat postingan anda dan ganti tulisan berwarna Biru yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode
Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.
5. Kalau sudah klik Save Template.

Nah jadinya akan seperti ini









SELESAI DAH