TUTORIAL

Trend 2015

Rabu, Oktober 6

Membuat Daftar Isi Dalam Kotak Scrol Bar

Mempermudah para pengunjung yang kebetulan singgah di blog yang Anda kelola guna mencari informasi yang dibutuhkannya perlu anda lakukan. Salah satu cara yang efektif yaitu dengan membuat Daftar Isi Blog. Dengan adanya daftar isi blog maka pengunjung dengan mudah menemukan judul artikel yang dibutuhkannya.
Agar Daftar isi Blog tampil menarik dan tidak menghabiskan tempat, maka sebaiknya dibuat dalam sebuah kotak scroll bar, seperti yang terlihat di blog ini. Nah jika Anda berminat untuk membuat Daftar Isi dalam kotak scroll bar ikuti langkah-langkah berikut ini;

1. Login ke blogger dengan ID anda sampai ke dashboard
2. Klik Rancangan lalu klik Tambah gadget di tempat yang strategis
3. Klik tambah html
4. Setelah terbuka halamannya tulis judul Daftar Isi atau terserah anda
5. Lalu buatlah kode di bawah ini;

<div style="border:1px solid rgb(153,153,153);overflow:auto;width:300px;height:200;text-align:left;">

<li> <a href=http://sinma68.blogspot.com/2010/08/mencari-arah-kiblat-shalat.html target="new">1.Mencari Arah Kiblat Shalat</a></li>

<li> <a href=http://sinma68.blogspot.com/2010/09/cara-menjadi-anggota-peoplestring.html target="new">2. Cara Menjadi Anggota PeopleString</a></li>

Keterangan:
Width:300px artinya lebar kotak 300 pixel, height:200 artinya tinggi kotak 200 pixel, angka tersebut dapat anda ubah sesuai dengan keadaan blog anda.
Ganti tulisan yang berwarna merah dengan alamat url blog anda. Tulisan warna merah merupakan alamat url dan judul artikel anda lengkap dengan waktu diposting. Agar Link ini ketika diklik dapat memunculkan artikelnya menulisnya harus benar-benar teliti, karena sedikit saja salah artikel anda tidak dapat keluar.
Teks berwarna biru adalah judul artikel yang akan muncul di dalam kotak daftar isi, gantilah sesuai dengan judul artikel anda.
Setelah semuanya selesai jangan lupa klik simpan, jika berhasil blog anda akan bertambah keren dengan tampilnya daftar ini dalam bentuk kotak scroll bar.
Selamat mencoba, semoga berhasil




Menarik untuk Dibaca:

7 Comments:

PartaWinata Blog said...

makasih pak

Ahmad syaifudin said...

kode nya ditarok di bagian mana ya mas..

Makhasin said...

letakkan di bagian sidebar atas, kanan atau kiri. buka rancangan dan klik tambah gadget lalu pastekan kode di atas.
silakan coba

S. RIYADI RAMLI said...

saya boleh tnya lagi ttg pembuatan "home", "profil", "kontak, "informasi", dst. pada saat saya mendekatkan kursor ke "informasi" maka akan muncul "pendidikan", "kesehatan", "agamis", dan "finansial". itu bagaimana cara buatnya. tolong bantuannya. trima kasih bnyak.

Makhasin said...

@S. RIYADI RAMLI, Trims Kunjungannya, saya sudah buatkan 2 tutorial tentang cara membuat menu, silahkan klik di Tutorial; Membuat Menu Navigasi Horizontal dan Trik Membuat Menu Horizontal di Bawah Header.

Laku.com belanja online grosir eceran murah dan aman said...

informasi yang bermanfaat. terima kasih atas tutorialnya

CV. KARYA BHAKTI said...

Ini yang kucari..
Maksih bos buat infonya..
tar kunjg kmbl kalo lg ksulitan.. salam bloger.

blogger templates | Make Money Online