3 Cara Membuat Daftar Isi Atau Table of Content di Blogspot

cara membuat table of content
Cara Membuat Daftar Isi / Table Of Content – Albabbarrosa.com

 SEO Off Page menjadi salah satu langkah seorang blogger agar blog atau website mereka bisa bersaing di halaman pertaman google, salah satu dari SEO Off Page adalah dengan membuat artikel berkualitas. Artikel berkualitas secara tidak langsung akan membantu menaikkan peringkat blog atau website di mesin pencari dalam jangka panjang. Bagaimana ciri-ciri artikel berkualitas? Secara lengkap kamu bisa membaca di artikel saya tentang Artikel Berkualitas.

 
Secara umum artikel berkualitas adalah artikel yang dibuat dengan terstruktur. Terdapat point-point utama pembahasan dan ditulis secara rapi. Agar pembaca mudah melihat point utama yang ada, maka kamu perlu menambahkan Daftar Isi di sebuah artikel. Yang bertujuan agar pembaca bisa melihat daftar isi dari point utama pembahasan.
 
Membuat daftar isi di sebuah artikel tidaklah sulit, kamu hanya perlu membuat sebuah daftar pembahasan, dan menaruh link agar menuju ke Sub pembahasan. Misalnya kamu membuat artikel dengan Sub Pembahasan :
 
Cara Membuat Jus Jambu
Manfaat Jus jambu
 
Maka kamu tinggal membuat daftar isi yang mengarahkan ke sub pembahasan tersebut (cara membuat jus jambu dan manfaat jus jambu).
 
Bagi kalian yang masih bingung dengan cara membuat daftar isi di artikel. Berikut saya berikan 3 cara membuat daftar isi atau table of content di artikel.

Cara Pertama Membuat Daftar Isi atau Table Of Content

Ini merupakan cara termudah dalam membuat daftar isi atau table of content. Sebelumnya, pastikan bahwa artikelmu terdapat beberapa sub pembahasan atau sub heading. Kalau tidak ada sub menunya daftar isi apa yang akan kamu sajikan.
  • Masuk ke setting > Edit Html
  • Cari kode ]]></b:skin>
  • Pastekan kode dibawah sebelum kode atau tepat di atas kode  ]]></b:skin>
 .dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
  • Stelah itu, simpan template.
  • Selanjutnya, Edit artikel yang ingin ditambahkan daftar isi
  • Edit artikel > Ubah tampilan compose menjadi Html
  • Pastekan kode dibawah dibagian paling atas artikel kamu, atau dimanapun, tapi yang terbaik adalah dibagian paling atas artikel.
 Kode
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
  • Ganti Link1, Link2, link 3 dan seterusnya dengan Sub Pembahasan artikel kamu. Ganti juga # dengan #subhead1 dan seterusnya. Jika di artikel terdapat lebih dari 3 sub pembahasan, tinggal tambahkan kode    <a href=”#”>Link 4</a>  dan seterusnya.
  • Masih di tampilan html. Cari Sub Pembahasan kamu atau Subheading kamu. Dan tambahkan kode id=”subhead1”setelah kode <span dan seterusnya pada setiap sub pembahasan kamu.
  • Klik pratinjau, setelah oke, baru klik perbarui.
Baca Juga :  Membuat Subdomain free Gratis Tanpa hosting Dengan Domain Utama
DEMO

Cara Kedua Membuat Daftar Isi atau Table Of Content

Cara yang kedua ini dibilang hampir sama dengan cara yang pertama, hanya saja memiliki tampilan yang lebih bagu dan lebih variatif.
  • Pertama, Masuk ke Setelan Html Blogger Kamu > Pilih edit Html
  • Pastekan kode berikut sebelum kode </head> atau Sebelum kode ]]></b:skin>
 /* Versi Kedua */
.daftarisi {
    width:100%;
    border:1px solid #d3d3d3;
}
.daftarisi div {
    width:100%;
}
.daftarisi .daftar {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.daftarisi .content {
    display: none;
    padding : 5px;
}
    • Kemudian Pastekan kode berikut sebelum kode </body>
 <script>
$(".daftar").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Tutup" : "Daftar Isi";
        });
    });

});
</script>
  • Klik Simpan Template.
  • Selanjutnya, edit artikel yang ingin dikasih Tombol Daftar Isi
  • Ubah tampilan Compose menjadi html
  • Pastekan kode berikut dibagian paling atas artikelmu
 <div class="daftarisi">
    <div class="daftar"><span>Daftar Isi</span>

    </div>
    <div class="content">
        <ul>
            <li><a href="#subhead1">This is just some random content.</a></li>
            <li><a href="#subhead2">This is just some random content.</a></li>
        </ul>
    </div>
</div>
  • Jangan Lupa, ganti “This is random content” dengan Daftar pembahasan kamu
  • Masih di tampilan html. Cari Sub Pembahasan kamu atau Subheading kamu. Dan tambahkan kodeid=”subhead1” setelah kode <span dan seterusnya pada setiap sub pembahasan kamu.
  • Klik pratinjau, setelah oke, baru klik perbarui.

DEMO

Satu pemikiran pada “3 Cara Membuat Daftar Isi Atau Table of Content di Blogspot”

Komentar ditutup.