Saturday, February 19, 2011

Cara membuat daftar isi Blog

D
aftar isi pada blog sangat berperanpenting. Fungsi dari Daftar isi sama halnya dengan fungsi Navigasi halaman yang sebelumnya sudah dibahas cara membuat navigasi halaman. Fungsinya yaitu sebagai navigsi bagi pemilik maupun pengunjung untuk mencari isi dari blog anda. Model dari daftar isi pada umunya ada dua yaitu Daftar isi manual dan daftar isi otomatis. Daftar isi manual anda harus memasang secara manual sedang Daftar isi otomatis akan secara otomatis menampilkan isi blog anda. Pada posting kali ini full-information hayan akan membahas menganai Cara membuat Daftar isi Manual Untuk Cara membuat daftar isi secara otomatif akan dibahas pada posting berikutnya. Daftar isi yang akan kita buat adalah seperti ini:



Langakah-langkah untuk membuat daftar isi seperti diatas adalah sbb:
  1. Pastikan anda login keblog anda
  2. Pilih menu Rancangan  >Elemen halaman >add Gadget
  3. Cari dan Pilih HTML/Javascript
  4. Copas kode dibawah kedalam Box yang sudah tersedia


  5.  <style>
    .list {
    background: url("http://i1011.photobucket.com/albums/af239/sabarmuanas/sideicon.gif") 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:305px; height:250px; background-color: #eeeeee; border: 3px inset rgb(8, 8, 8);">


    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-membuat-link-download.html"target="_blank">Cara membuat link download</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-menambahkan-tracker-atau-sitimeter.html"target="_blank">Cara menambahkan tracker atau sitimeter kedalam blog</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/membuat-reply-komen-pada-blog.html"target="_blank">Membuat reply komen</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/membuat-page-navigation.html"target="_blank">Membuat Navigasi halaman</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-menampilkan-pengunjung-blog-yang.html"target="_blank">Cara menampilkan pengunjung blog online</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-membuat-buku-tamu-blogger.html"target="_blank">Cara membuat buku tamu blogger</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/kode-warna-html.html"target="_blank">Kode warna HTML</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-mudah-mengirim-site-map-ke-yahoo.html"target="_blank">Cara mudah kirim site map ke yahoo</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-membuat-form-berlangganan-artikel.html"target="_blank">Cara Membuat Form berlangganan artikel</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/memmbuat-pupup-massage.html"target="_blank">Membuat PupUp Massage</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-menghilangkan-navbar_07.html"target="_blank">Cara Menghilangkan NavBar(Navigasi Bar)</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-membuat-e-mail-yahoo.html"target="_blank">Cara membuat E-Mail yahoo</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/mendaftar-blog-ke-search-engine-dengan.html"target="_blank">Cara mendaftar blog ke search engine</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/menampilkan-huruf-besar-diawal-posting.html"target="_blank">Cara menampilkan huruf besar diawal posting</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/b-logger-stnadar-pada-umumnya-memiliki.html"target="_blank">Membuat Navbar menjadi autohiden</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/mengganti-template-standar-blogger.html"target="_blank">Cara mengganti template standar blogger</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/02/cara-membuat-posting-artikel-dengan.html"target="_blank">Cara posting artikel dengan blogger</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/01/cara-buat-website-gratis-dengan-blogger.html"target="_blank">Cara membuat website gratis dengan blogger</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/01/smadav-antivirus-lokal.html"target="_blank">Smadav(antivirus lokal)</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/01/dobe-flash-player-adalah-salah-satu.html"target="_blank">Adobe Flash Player</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/p/kategory.html"target="_blank">Download Software</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/01/usb-safely-remove-v424.html"target="_blank">USB Safely Remove</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/01/pa-itu-ipad-ipad-adalah-sebuah-produk.html"target="_blank">Teknologi baru Ipad!</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/01/u-dah-ngebet-pengen-punya-motor-sport.html"target="_blank">Honda CBR250R Sudah siap Stock di Indonesia!</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/01/cara-pengarisapan-file-dengan-winrar.html"target="_blank">cara pengarsipan menggunakan Winrar</a></div>

    <div class="list">
    <a href="http://generasi-two.blogspot.com/2011/01/internet-download-manager-perangkat.html"target="_blank">Internet Download Manager+Crack</a></div>

    <div class="list">
    <a href="http://www.generasi-two.blogspot.com/p/wisata-pulau-belitung_17.html"target="_blank">Wisata Pulau Belitung</a></div>

    <div class="list">
    <a href="http://www.full-information.co.cc/2011/01/k-lite-codec-pack-apa-sih-k-lite-codec.html"target="_blank">K-Lite_codec(Media Player Calssic)</a></div>

    <div class="list">
    <a href="http://generasi-two.blogspot.com/2011/01/winrar.html"target="_blank">Winrar</a></div>

  6. Jangan Lupa klik Save/Simpan
  7. Terakhir ganti kode warna merah dengan link posting anda dan ganti warna biru dengan mana posting anda <a href="http://www.full-information.co.cc/2011/02/cara-membuat-link-download.html"target="_blank">Cara membuat link download</a></div>

Keterangan :
  • http://i1011.photobucket.com/albums/af239/sabarmuanas/sideicon.gif adalah URL gambar tanda panah yang berkedip. anda dapat mengganti dengan URL gambar sesuai keinginan anda
  • background-color: #eeeeee warna latar dari daftar isi anda Silahkan sesuaikan untuk kode warna klik DISINI
  • border-bottom:1px adalah tebal border daftar isi anda
  • width:305px; adalah lebar dari kotak daftar isi anda
  • height:250px; Adalah tinggi dari daftar isi anda

Sekian mengenai cara membuat daftar isi manual untuk daftar isi otomatis tunggu posting berikutnya. Terimakasih atas kunjungannya!

Artikel Terkait:

0 komentar:

Post a Comment