Browse » Home » » Cara membuat kotak daftar isi blog

Cara membuat kotak daftar isi blog

Kemarin ada salah satu pertanyaan buat saya dari pengunjung blog ini yang mana dia menanyakan bagaimana cara membuat kotak daftar isi seperti yang terlihat pada kanan blog ini,sayapun menjawabnya langsung melalui sms kalo daftar isi dikanan blog ini hanya dibuat secara manual dengan fungsi scroll,tapi untuk jelasnya biar aq posting saja ya...

Ya walau tutorial seperti hanya untuk pemula tapi gk apalah lha wong saya juga baru kemarin ko9k belajar ngeblognya,he he he....
ok.langsung aja ke tkp!

  1. Loggin ke blogger
  2. Klik rancangan/tata letak
  3. Add gadget/tambah gadget
  4. Masukkan kode dibawah ini:
    <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:220px; height:350px; background-color: #fffff; border:0px solid #000000;">


    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/membuat-footer-3-kolom-dibawah-posting.html">Membuat footer 3 kolom dibawah posting</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/cara-memasang-toolbar-wibiya-blog.html">Cara memasang toolbar Wibiya pada blog</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/membuat-background-berwarna-pada.html">Membuat background berwarna pada postingan</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/cara-membuat-text-area-dengan.html">Cara membuat text area dengan background warna dan gambar</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/membuat-background-pada-relate.html">Membuat background pada relate post/artikel terkait</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/cara-memasang-search-engin-pada-blog.html">Cara Memasang search engin pada blog</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/cara-membuat-kotak-banner.html">Cara membuat kotak banner</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/membuat-search-engin-pada-navbar-blog.html">Membuat search engin pada navbar blog</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/cara-menghapus-widget-yang-terkunci.html">Cara Menghapus widget yang terkunci</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/cara-membuat-navbar-auto-hidden.html">Cara membuat navbar auto hidden</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/cara-menghapus-komentar-blog.html">Cara menghapus komentar blog</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/membuat-dua-element-dibawah-header.html">Membuat dua element dibawah header</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/membuat-3-kolom-element-dibawah-header.html">Membuat 3 kolom element dibawah header</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/bertukar-link-dengan-adil.html">Bertukar link dengan adil</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/cara-membuat-widget-hanya-tampil-di.html">Cara membuat widget hanya tampil di homepage</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/membuat-breadcrumb-navigation-pada.html">Membuat Breadcrumb Navigation pada blogger</a></div>

    <div class="list">
    <a href="http://infonetmu.blogspot.com/2010/05/membuat-menu-horisontal-pada-blogger.html">Membuat Menu Horisontal pada blogger</a></div>



    </div>
  5. Maka akan tampil seperti dibawah ini:




Keterangan:
  • yang saya beri warna merah adalah ukuran lebar dan tinggi kotaknya,sesuaikan dengan ukuran sidebar kamu
  • yang berwarna hijau adalah alamat/URL dari artikel kamu
  • sedangkan tulisan yang berkedip adalah salah satu contoh ancor untuk judul postinganya.


Mudah kan? selamat mencoba!


BACA JUGA!
- Cara supaya domain co.cc bisa diakses tanpa www(redirect tanpa www)
- Merubah Domain Blogspot menjadi co.cc
- Membuat scroll pada komentar blog
- Fungsi Gadget Followers pada Blog
- Cara mudah memasang meta tag blogger
- Mengubah tampilan iklan kumpulblogger
- Cara membuat label menjadi berwarna
- Membuat widget hanya muncul pada postingan
- Cara membuat daftar isi otomatis pada blogger
- Membuat Menu Horisontal pada blogger
- Membuat Breadcrumb Navigation pada blogger
- Cara membuat widget hanya tampil di homepage
- bertukar link dengan adil
- Membuat 3 kolom element dibawah header
- Membuat dua element dibawah header
- Cara menghapus komentar blog
- Cara membuat navbar auto hidden
- Membuat search engin pada navbar blog
- Cara membuat kotak banner
- Cara Memasang search engin pada blog
- Membuat background pada relate post/artikel terkait
- Cara membuat text area dengan background warna dan gambar
- Membuat footer tiga kolom di bawah posting
- Cara memasang sitemeter pada blog
Terima kasih telah membaca artikel Cara membuat kotak daftar isi blog.Silahkan baca artikel INFONETMU tentang yang lainya dibawah ini!

Comment With Facebook!

Diposting oleh di Jumat, Juni 25, 2010
Label:
Cara membuat kotak daftar isi blog © 2008