Cara Membuat Daftar Isi Manual Di Blogspot
4 Maret 2013
Add Comment
Kali ini artikel saya akan membahas tentang daftar isi sebuah bllog atau website. Daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog dan bicara soal alat navigasi sebetulnya juga pernah dibahas pada posting saya yang berjudul Membuat Menu Scroll di Blogspot, namun posting ini akan membahas khusus soal alat navigasi berupa Daftar Isi seperti pada Ferlyando Sandala, contohnya seperti di bawah ini:
Pada umumnya jenis daftar isi ada 2 (dua) macam yaitu daftar isi manual dan daftar isi otomatis. Perbedaan dari kedua daftar isi tersebut adalah jika daftar isi manual sesuai dengan namanya dipasang dan diatur secara manual sesuai keinginan pemilik blog, sedangkan jika daftar isi otomatis akan secara otomatis menampilkan isi blog berdasarkan urutan abjad pada label dan judul postingan.
Baiklah saya rasa penjelasan singkat tentang fungsi daftar isi pada blog sudah cukup dan sekarang mari mulai bahas sesuai judul posting ini Membuat Daftar Isi Manual Di Blogspot, silahkan ikuti langkah-langkahnya sebagai berikut :
Login ke Blogger, Klik Rancangan/Design;
Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
Cari dan pilih HTML/Javascript;
Copy paste kode di bawah ini ke dalam Content yang telah tersedia, berikut ini kodenya :
<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0pAAPXf_njy4twYbE2YG-sobjOR2lIBHeb69AgrGOyuHnSXLKOQ4OaBj1uC7STGAry4XufkCI9eEDd-f1vcNqOZG22Pwpyx-ISKz1sWpxStojke7kXn8KClgeLKnpXVk47GSexUhOJe2H/") no-repeat left center;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>
<div style="background-color: #f7f7f7; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 300px;">
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/download-template-joss-untuk-review.html">Download Template Joss untuk Review Film</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-memasang-meta-tag-otomatis-di.html">Cara memasang Meta Tag Otomatis di Setiap Posting</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/tips-lengkap-26-posisi-bercinta-terbaik.html">Tips Lengkap 26 Posisi Bercinta Terbaik di Dunia</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/bagi-sidebar-menjadi-2-kolom-di.html">Bagi Sidebar Menjadi 2 Kolom di Blogspot atau Website</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-membuat-kotak-pencarisearch-di.html">Cara Membuat Kotak Pencari/Search di Blogspot</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/mitos-kendaraan-berhantu.html">Mitos Kendaraan Berhantu</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/google-jadi-perhatian-tersendiri-di-2013.html">Google+ Jadi Perhatian Tersendiri di 2013</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/mengetahui-fungsi-fungsi-menu-setting.html">Mengetahui Fungsi - fungsi Menu Setting Blog</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-membuat-kotak-pencarisearch-di.html">Cara Membuat Kotak Pencari/Search di Blogspot</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/ganti-header-blog-di-blogspot.html">Ganti Header Blog di Blogspot</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-merubah-warna-link-pada-blogspot.html">Cara Merubah Warna Link Pada Blogspot</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-menghilangkan-langgan-entri-atom.html">Cara Menghilangkan Langgan : Entri (Atom)</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/sejumlah-foto-gadis-cantik-sedang.html">Sejumlah Foto Gadis Cantik Sedang Telanjang</a></div>
</div>
Klik Tombol Save/Simpan.
Keterangan :
Link dan Teks, silahkan diganti dengan link dan teks Anda;
width : 230px; adalah merupakan lebar dari kotak daftar isi manual dan boleh anda sesuaikan;
height : 180px; adalah merupakan tinggi dari kotak daftar isi manual dan boleh anda sesuaikan.
Untuk tutorial membuat daftar isi manual sudah selesai, silahkan tunggu tutorial berikutnya tentang cara pasang daftar isi otomatis di Blogspot.
Semoga bermanfaat....
Baiklah saya rasa penjelasan singkat tentang fungsi daftar isi pada blog sudah cukup dan sekarang mari mulai bahas sesuai judul posting ini Membuat Daftar Isi Manual Di Blogspot, silahkan ikuti langkah-langkahnya sebagai berikut :
Login ke Blogger, Klik Rancangan/Design;
Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
Cari dan pilih HTML/Javascript;
Copy paste kode di bawah ini ke dalam Content yang telah tersedia, berikut ini kodenya :
<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0pAAPXf_njy4twYbE2YG-sobjOR2lIBHeb69AgrGOyuHnSXLKOQ4OaBj1uC7STGAry4XufkCI9eEDd-f1vcNqOZG22Pwpyx-ISKz1sWpxStojke7kXn8KClgeLKnpXVk47GSexUhOJe2H/") no-repeat left center;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>
<div style="background-color: #f7f7f7; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 300px;">
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/download-template-joss-untuk-review.html">Download Template Joss untuk Review Film</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-memasang-meta-tag-otomatis-di.html">Cara memasang Meta Tag Otomatis di Setiap Posting</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/tips-lengkap-26-posisi-bercinta-terbaik.html">Tips Lengkap 26 Posisi Bercinta Terbaik di Dunia</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/bagi-sidebar-menjadi-2-kolom-di.html">Bagi Sidebar Menjadi 2 Kolom di Blogspot atau Website</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-membuat-kotak-pencarisearch-di.html">Cara Membuat Kotak Pencari/Search di Blogspot</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/mitos-kendaraan-berhantu.html">Mitos Kendaraan Berhantu</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/google-jadi-perhatian-tersendiri-di-2013.html">Google+ Jadi Perhatian Tersendiri di 2013</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/mengetahui-fungsi-fungsi-menu-setting.html">Mengetahui Fungsi - fungsi Menu Setting Blog</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-membuat-kotak-pencarisearch-di.html">Cara Membuat Kotak Pencari/Search di Blogspot</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/ganti-header-blog-di-blogspot.html">Ganti Header Blog di Blogspot</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-merubah-warna-link-pada-blogspot.html">Cara Merubah Warna Link Pada Blogspot</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/cara-menghilangkan-langgan-entri-atom.html">Cara Menghilangkan Langgan : Entri (Atom)</a></div>
<div class="list">
<a href="https://ferlyandosandala.my.id/2013/03/sejumlah-foto-gadis-cantik-sedang.html">Sejumlah Foto Gadis Cantik Sedang Telanjang</a></div>
</div>
Klik Tombol Save/Simpan.
Keterangan :
Link dan Teks, silahkan diganti dengan link dan teks Anda;
width : 230px; adalah merupakan lebar dari kotak daftar isi manual dan boleh anda sesuaikan;
height : 180px; adalah merupakan tinggi dari kotak daftar isi manual dan boleh anda sesuaikan.
Untuk tutorial membuat daftar isi manual sudah selesai, silahkan tunggu tutorial berikutnya tentang cara pasang daftar isi otomatis di Blogspot.
Semoga bermanfaat....
0 Response to "Cara Membuat Daftar Isi Manual Di Blogspot"
Posting Komentar
Jangan melakukan SPAM... Aturan tidak ada link dan bicara kotor dalam komentar Sobat.