Membuat Daftar Isi Manual Di Blogspot

membuat menu blogspot

Daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. 

Hasil yang akan kita capai adalah seperti berikut:

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.

Langkah-langkah membuat menu blog manual adalah 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://4.bp.blogspot.com/-7X3yw_YzfPM/Un64WkP63oI/AAAAAAAAAoE/dHxoyC7Edmk/s1600/iconpenunjuk.gif”) 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”>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/11/membuat-daftar-isi-manual-di-blogspot.html”>Membuat daftar isi manual di blogspot</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/11/menghapus-project-pada-google.html”>menghapus project pada google</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/11/cara-membuat-menu-blog-keren.html”>cara membuat menu blog keren</a></div>
    <div class=”list”>
    <a href=”http://syaiflash.blogspot.com/”>Blog terlengkap</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/11/office-2013-dan-activasi-office-2013.html”>office 2013 dan activasi</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/11/cara-memecah-file-split-file.html”>cara memecah file split file</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/11/al-quran-pada-ms-word.html”>al quran pada ms word</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/11/membuat-blog-gratis-dg-word-press.html”>membuat blog gratis dg word press</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/10/cara-memasang-vidio-youtube-ke-blog.html”>cara memasang vidio youtube ke blog</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/10/membuat-blog-gratis.html”>membuat blog gratis</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/09/blog-post.html”>Membuat Blog tidak bisa clik kanan</a></div>
    <div class=”list”>
    <a href=”http://trik-internet-komputer.blogspot.com/2013/09/kotak-kopy-paste-pada-blog.html”>kotak kopy paste pada blog</a></div>
    <div class=”list”>
    <a href=”http://syaiflash.blogspot.com/”>Blog terlengkap</a></div></div>
  5. 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.

Be the first to comment

Leave a Reply

Your email address will not be published.


*