Cara Membuat Daftar Isi dengan Scroll Bar



Pengen tahu cara membuatnya ikuti langkah-langkahnya di bawah ini :

1. Login ke akun Blogger
2. Buka menu Layout > Page Elements
3. Klik Add a Gadget > HTML/Javascript.
4. Masukkan kode dibawah ini kedalam kotak.


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


<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #000000; border:1px solid #ffffff;">


<div class="list">
<a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>


<div class="list">
<a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>


<div class="list">
<a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>


</div>


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


<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #000000; border:1px solid #ffffff;">


<div class="list">
1. <a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>


<div class="list">
2. <a href="http://Alamat Url yang ingin di Tampilkan">Judul Postingan Anda</a></div>


</div>


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

Ingat:
Ganti tulisan yang berwarna Merah dengan URL postingan anda dan ganti tulisan berwarna Biru dengan judul postingan anda.

5. Kalau sudah klik Save Template.

"Selamat Mencoba"

0 komentar:

isi dengan keterangan gambar

SILAHKAN TULISKAN KOMENTAR SOBAT DISINI
» Berkomentarlah dengan baik dan bijak, tidak mengandung unsur SPAM, SARA, P*RNO, LINK. dan komentar yang tidak sopan serta menyinggung apapun tanpa terkecuali, komentar yang melanggar ketentuan tidak akan saya tampilkan ..

Terima Kasih !

 

Design by Ojezz Lastfriend | Powered by Blogger | Published by Dunia Blogspot.com