Friday, December 3, 2010

Cara mudah membuat menu daftar isi pada blog

Daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog.Posting ini akan membahas khusus soal alat navigasi berupa Daftar Isi seperti pada Blog kampus baca ini, 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 abjat pada lable 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 Cara Pasang Daftar Isi Manual Di Blogspot, silahkan ikuti langkah-langkahnya sebagai berikut :


  1. Login ke Blogger, Klik Rancangan/Design;


  2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;


  3. Cari dan pilih HTML/Javascript;


  4. Copy paste kode di bawah ini ke dalam Content yang telah tersedia, berikut ini kodenya :


    • <style>

      .list {

      background: url("http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0160/bullet_go.png") 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:333px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/12/memasang-tombol-share-dan.html">Cara memasang tombol share dan bookmark</a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/12/cara-menuliskan-kode-html-pada.html">Cara menuliskan kode HTML pada blog</a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/12/memasang-email-subscriptions.html">Cara memasang email subscriptions</a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/12/meningkatkan-traffic-dengan-membuat.html">Cara membuat banner tukeran link </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/12/cara-ikut-kumpul-blogger.html">Cara ikut kumpul blogger</a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/cara-mengganti-favicon-di-blogger.html">Cara mengganti logo favicon di blog</a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/membuat-sidebar-dalam-kotak-kotak.html">Cara membuat sidebar dalam kotak-kotak </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/buat-kolom-dibawah-header-pada-magazine.html">Cara buat kolom di bawah header pada magazine</a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/free-html-dan-php-editor.html">free HTML dan php editor </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/tutorial-pasang-widget-alexa-di-blog.html">tutorial pasang widget alexa di blog </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/tips-meningkatkan-alexa-rank.html">tips meningkatkan alexa rank pada blog </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/apa-sih-situs-social-bookmarking.html">apa sih situs sosial bookmarking itu? </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/solusi-mengatasi-kotak-komentar-yang.html">solusi mengatasi kotak komentar yang bermasalah </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/tutorial-membuat-horizontal-navigasi.html">tutorial membuat horizontal navigasi menu </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/buat-logo-image-button.html">cara buat logo image button pada blog </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/cara-pasang-musik-pada-blog-mohon-maaf.html">tutorial memasang background musik pada blog </a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/pasang-statistik-dan-tracker.html">cara pasang statistik dan tracker di blog</a></div>

      <div class="list">

      <a href="http://kampusbaca.blogspot.com/2010/11/membuat-foto-animasi.html">Cara membuat foto animasi di blog </a></div></div>



    6. Klik Tombol Save/Simpan.

 

 

2 komentar:

Anonymous said...

makasih ya,,,eh ternyata mudah banget,,tapi meski ngedit link nya ya...

Kampus Baca said...

ya,,,tapi sebenarnya ini,,hasil copy paste,,buat panduan aku sendiri,,soalnya,,aku baru ngerti blog,,,eh aku merasa bersalah,,copy paste punya orang,,gk aku kasih source nya..tapi sebenarnya ini mau tak buat panduan blog bagi aku sendiri..

Post a Comment