Cara Membuat Table Of Content (TOC) Jump to di Postingan Blogger yang SEO Friendly
Cara Membuat Table Of Content (TOC) Jump to di Postingan Blogger yang SEO Friendly
Cara Membuat Table Of Content (TOC) Jump to di Postingan Blogger yang SEO Friendly - Table Of Content atau daftar isi postingan blog ini merupakan sebuah fitur yang terdiri atas point-point atau bagian-bagian pokok dalam sebuah artikel atau postingan blog. 

Sehingga dari poin-poin tersebut pengunjung bisa memilih pokok bahasan apa yang ingin ia baca, table of content atau daftar isi bahasan pokok postingan blog ini biasa kita temukan di situs-situs seperti wikipedia, ensiklopedia, jurnal, serta file-file PDF dari ebook yang diletakkan setelah kata pengantar. 

Untuk pembuatan atau pemasangan table of content di postingan blogger ini terdapat 2 pilihan, apakah ingin dipasang secara manual atau ingin secara otomatis. Jadi untuk yang otomatis, kita tidak perlu lagi menempelkan kode HTML kedalam postingan, table of content tersebut akan terpasang secara otomatis berdasarkan lokasi yang sudah kita tentukan didalam blog.

Sedangkan table of content yang tidak otomatis atau manual ini, kita diharuskan memasang sendiri kedalam postingan blog yang kita tulis. Sehingga peletakkan table of content manual ini bisa bebas dimana saja pada postingan blog, jadi tidak tetap seperti yang otomatis.


Pada table of content (toc) atau daftar isi bahasan pokok postingan blog diatas itu merupakan jenis yang manual, jadi saya membuat secara manual namun bagusnya TOC ini sudah SEO friendly. Dan jika kata kunci yang Anda gunakan pas, maka di halaman pencarian google Anda akan mendapatkan jump to link yang bisa langsung mengarahkan ke pokok bahasan yang ingin Anda baca.

CARA MEMBUAT TABLE OF CONTENT (TOC) JUMP TO LINK BLOGGER

Kalau di wordpress membuat table of contet sangatlah mudah, karena ada bantuan plugin yang hanya tinggal klik klik langsung jadi. Tapi berbeda dengan blogspot atau blogger yang tidak ada pluginya, alhasil kita sebagai pengguna platform blogger.com harus membuat table of content atau daftar isi postingan blog sendiri.

Untuk cara membuatnya saya akan memberikan panduan lengkap beserta script yang harus digunakan pada blog, agar table of content yang akan dibuat dapat berjalan dengan baik serta +lebih SEO Friendly.
  1. Masuk ke blogger.com. Pilih menu TEMA. Lalu klik tombol EDIT HTML
  2. COPY semua kode dibawah ini diatas </style> atau dibawah kode <style>, bebas.
  3. .toc {
        background-color: #f5f5f5;
        border: 1px solid #a2a9b1;
        padding: 10px 13px;
        display: table;
        line-height: 1.6em;
        width: 100%
    }
    
    .toc h2 {
        display: inline-block;
        margin-right: 10px
    }
    
    .toc a {
        text-decoration: none
    }
    
    .toc a:hover {
        text-decoration: underline
    }
    
    .toc ul {
        list-style-type: none;
        list-style-image: none;
        margin: 0px;
        padding: 0px;
        text-align: left
    }
    
    .toc ul li {
        list-style-type: none;
    }
    
    .toc ul li a {
        margin-left: .5em
    }
    
    .toc ul li ul {
        margin-left: 2em
    }
    
    .toctogglelabel {
        cursor: pointer;
        color: #0645ad
    }
    
    :not(:checked) &gt;
    .toctoggle {
        display: inline !important;
        position: absolute;
        opacity: 0
    }
    
    :not(:checked) &gt;
    .toctogglespan:before {
        content: &#39;
        [&#39;
    }
    
    .toctoggle:not(:checked)+.toctitle .toctogglelabel:after {
        content: &#39;
        sembunyikan&#39;
        ;
        display: inline
    }
    
    .toctoggle:checked+.toctitle .toctogglelabel:after {
        content: &#39;
        tampilkan&#39;
    }
    
    :not(:checked) &gt;
    .toctogglespan:after {
        content: &#39;
        ]&#39;
    }
    
    .toctoggle:checked~ul {
        display: none
    }
    
    :target::before {
        content: &#39;
        &#39;
        ;
        display: block;
        height: 0px;
        margin-top: 0px;
        visibility: hidden
    }
  4. Selanjutnya buat postingan baru lalu pilih mode HTML, lalu tempelkan kode table of content dibawah ini kedalam postingan blog Anda. Peletakkan TOC ini bisa dimana saja, mau diawal artikel atau di setelah paragraf ke 2, dsb. 
  5. <div class="toc">
      <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
      <ul>
        <li>1. <a href="#toc1" title="Cara Membuat Table Of Content di Blogger">Cara Membuat Table Of Content di Blogger</a></li>
        <li>2. <a href="#toc2" title="Cara Membuat Table Of Content di Blogger Otomatis">Cara Membuat Table Of Content di Blogger Otomatis</a></li>
      </ul>
    </div>
    Cara Membuat Sitelink Blog Muncul Lebih Cepat di Pencarian Google
  6. Selanjutnya silahkan atur penulisan heading dan sub-headingnya (saya tandai warna biru), lalu tambahkan ID (saya tandai warna merah) yang ada seperti kode diatas. Penulisan ID ini bebas, apakah ingin sama seperti heading agar lebih SEO atau hanya #toc1 #toc2 #toc3 sama saja. 
  7. SELESAI, artikel siap untuk di publish. 

Pada panduan diatas merupakan table of content yang dibuat secara manual, jadi pemilik blog harus harus menuliskan sendiri daftar isi kedalam postingan blog, untuk link serta headingnya dapat dimodifikasi sendiri.

Pada panduan yang akan saya bahas dibawah ini merupakan jenis table of content yang sudah otomatis, jadi pemilik blog tidak perlu lagi menempelkan kode kedalam postingan blog karena table of content sudah otomatis terbuat setelah artikel di publikasikan.

Namun sayangnya heading yang ada tidak dapat dimodifikasi sendiri, jadi pastikan heading yang Anda buat sudah ada kata kunci yang Anda targetkan. Hal ini penting karena nantinya table of content otomatis ini akan mengikuti heading yang Anda buat didalam postingan blog.


CARA MEMBUAT TABLE OF CONTENT OTOMATIS DI BLOG 

Tidak perlu panjang lebar lagi, berikut panduan Cara Membuat Table Of Content otomatis didalam postingan blog dan lebih SEO Friendly.
  1. Masuk ke akun blogger. Pilih menu TEMA, lalu pilih EDIT HTML. 
  2. Copy semua kode dibawah ini, lalu tempel diatas kode </head>  atau bisa juga dibawah <body>, bebas.
  3. <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
    <style media='all' type='text/css'>
    .bwstoc {
     margin: 10px 0;
     background: #F0F0F0;
     border: 1px solid #ddd;
    }
    .bwstoc ol, .bwstoc ul {
     margin: 0 0 15px 20px;
     padding: 0;
    }
    .bwstoc ul {
     list-style: disc;
    }
    .bwstoc ol li, .bwstoc ul li {
     font-size: 95%;
     padding: 5px 10px 0 0;
     margin: 0 0 0 30px;
    }
    .bwstoc a {
     text-decoration: none;
    }
    .bwstoc a:hover {
     text-decoration: underline;
    }
    .bwstoc .bwstocHeader {
     font-weight: bold;
     font-size: 100%;
     position: relative;
     outline: none;
     border: none;
     padding: 5px 15px 5px 5px;
     margin: 5px 10px;
    }
    .bwstoc .bwstocHeader a {
     text-decoration: none;
     cursor: pointer;
    }
    .bwstoc .bwstocHeader a:hover {
     text-decoration: underline;
    }
    </style>
    <!-- Blogger TOC -->
    <script type='text/javascript'>
    //<![CDATA[
    function bwstoc() {
     var bwstoc = i = headinglength = getheading = 0;
     headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
     if (headinglength > 1) { 
     // Hanya Tampil Jika Ditemukan Minimal 2 Heading
     for (i = 0; i < headinglength; i++) {
     getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
     var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
     var bws_2 = bws_1.trim();
     var getHeadUri = bws_2.replace(/s/g, "_");
     document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
     bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
     document.getElementById("bwstoc").innerHTML += bwstoc;
     }
     } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
    }
    function bwstocShow() {
        var bwstocBtn = document.getElementById('bwstoc');
     var bwstocWrapID = document.getElementById('bwstocwrap');
     var bwstocLink = document.getElementById('bwstocLink');
        if (bwstocBtn.style.display === 'none') {
            bwstocBtn.style.display = 'block';
     bwstocWrapID.style.display = 'block';
     bwstocLink.innerHTML = 'Tutup';
     
        } else {
            bwstocBtn.style.display = 'none';
     bwstocWrapID.style.display = 'inline-block';
     bwstocLink.innerHTML = 'Tampil';
        }
    }
    //]]>
    </script>
    <noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
    </b:if>
  4. Selanjutnya, biar Anda tidak menuliskan kode dalam postingan blog secara manual. Silahkan cari kode <data:post.body/> dalam EDIT HTML (gunakan CTRL+F untuk mencarinya)

  5. Cari kode <data:post.body/> dan ganti dengan kode di bawah ini:
    <div id='post-toc'>
    <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div>
    <data:post.body/>
    <script>bwstoc();</script>
    </div><!-- end TOC -->
    Akan ada beberapa (2 atau 3) kode <data:post.body/> di dalam Tema blogspot anda, jadi silakan ganti semua. Anda bisa mencarinya dengan shortcode keyboard ‘Ctrl+F’.

  6. SELESAI, klik tombol simpan tema/template. DAN lihat hasilnya. 
Sebagai info tambahan, selain URL hasilnya lebih SEO friendly, script TOC blogspot di atas juga tidak memakai jQuery, tanpa Google Fonts dan tanpa Font Awesome, sehingga diharapkan lebih ringan.

Demikian terkait panduan Cara Membuat Table Of Content (TOC) Jump to di Postingan Blogger yang SEO Friendly

Related Posts

Postingan Lebih Baru Postingan Lama

Komentar

Postingan Lebih Baru Postingan Lama