Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Cara Membuat Table of Content Otomatis Dan Semi-Otomatis Akun Blogger Atau Blogspot

Cara Membuat Table of Content Otomatis Dan Semi-Otomatis Akun Blogger Atau Blogspot

Kalian Tahukan akun Website yang terkenal pasti ada Table Of Conten di dalam artikelnya bagi anda yang belum tahu sikalan buka situs yang ternama seperti wikiPedia dan lain masih banyak yang isi conten ada table of conten yang di otomatis oleh pembuatnyya agar pembaca isi conten artikel biar enak dan bisa anda langsung klik bisa di tuju ke bagian anda baca lainnya.

Bagi Anda mencari tutorial Cara Membuat Table di dalam konten postingan anda di blogger atau blogspot bisa simak di bawah ini saya akan membuatnya tutorial semudah mungkin agar kalian semua bisa mempahami tentang caranya membuatnya silakan baca dengan teliti ya kawan-kawan.


Table of content Otomatis Di Blogger

Sering disebut daftar isi adalah yang mengandung poin-poin daftar isi dalam pembahasan yang terdapat didalam isi conten artikel. Table of content anda bisa anda pasang yang di dalamnya yang membuat conten artikel yang panjang. agar kamu bisa mengerti di dalam mana yang poin yang terpenting ini juga sangat penting dalam isi konten merupakan konten yang sangat SEO.


Cara Membuat Table of Content Otomatis Akun Blog


1. Buka dashboard Blogspot atau Blogger Yang Mau di Pasang Table of content Otomatis Di Blogger.

2. Pilih menu Template atau Tema --> Klik Edit HTML.

3. Codenya CSS Table of Content Otomatis Akun Blog berikut tepat di atas kode ]]></b:skin> atau diantara <style> bisa juga di penutup tulisan </style>.



/* CSS Mboton Dev*/
.TOCopit {
    line-height: 1.4em;
    padding: 0 30px 20px 10px;
    display: block;
    width: 95%;
    margin: 0 auto;
    background: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 3px/6px
}
.TOCopit ol,
.TOCopit ul {
    margin: 0;
    padding: 0;
}
.TOCopit ul {
    list-style: none;
}
.TOCopit ol li,
.TOCopit ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}
.TOCopit a {
 font-weight: 700;
    color: #4f4f4f;
    text-decoration: none;
}
.TOCopit a:hover {
    text-decoration: underline;
}
.TOCopit button {
    background: #eaeaea;
    font-family: oswald, arial;
    font-size: 20px;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    color: #2d2d2d;
    padding: 20px 0 0 20px;
}
:target::before{content:"";display:block;height:50px;margin-top:-50px;visibility:hidden}


4. Setelah itu jika sudah Di paste codenya yang di atas, Anda langsung Menuju Ke Code </head>

Letakkan kode JavaScript yang bagian kedua ini Codenya Sebelum Code </head>.



<script type='text/javascript'>
    //<![CDATA[                   
    function TOCopit() {
        var TOCopit = i = headlength = gethead = 0;
        headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
        for (i = 0; i < headlength; i++) {
            gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
            document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
            TOCopit = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("TOCopit").innerHTML += TOCopit;
        }
    }

function mbtToggle() {
    var mbt = document.getElementById('TOCopit');
    if (mbt.style.display === 'none') {
        mbt.style.display = 'block';
    } else {
        mbt.style.display = 'none';
    }
}
//]]>             
</script>


Cara membuat isi conten Table Otomatis Di Blogger


Bagi anda suka membuat conten artikel 800 atau 600 isi conten anda bisa membuatnya itu sangat penting untuk anda dan dibaca oleh pengunjung bisa terlinat singkat dan terlihat rapi saya sarankan untuk memasang table of content yang otomatis ini.

Jika anda mempunyai isi artikel Conten Di blogger yang pendek sangat tidak cocok untuk di kasih conten isi conten Table Otomatis Di Blogger.

Maka jika anda sudah meletakan kodenya semua anda bisa melakukan pencarian Code <data:post.body/> Ganti codenya <data:post.body/>  agar Terterdeteksi didalam isi conten Table of content Otomatis Di Blogger.

  • Caranya untuk menganti <data:post.body/>
  • Buka kembali halaman Tema > Edit HTML.
  • Cari kode <data:post.body/>, kemudian ganti dengan kode berikut:

 
<div id='post-toc'>
<div class='TOCopit'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOCopit' />
</div>
<data:post.body/>
<script>
    TOCopit();
</script>
</div>

jika sudah di paste klik Simpan template atau Tema.

Cara Membuat Table of Content Semi-otomatis di Blogger Atau Blogspot


Bagi yang mempunyai Isi Konten artikel yang pendek bisa anda pasang di ini agar terlihat rapi didalam isi conten tersebut.

jika postingan anda yang pendek dan panjang anda bisa melakukan ini untuk di kasih daftar yang bagian yang isi konten artikel yang panjang saja.

1. Silakan Buka Isi halaman Posting anda. pilih artikel yang panjang dan ingin kasih table of content Semi-otomatis di Blogger.

2. Letakkan kodenya berikut di awal postingan yang paling atas sendiri.

<div id='post-toc'>
<div class='TOCopit'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOCopit' />
</div>

3.Jika anda sudah Copy code yang di bawah di taruh yang paling bawah sendiri atau akhir postingan Anda Tersebut.


<script>
    TOCopit();
</script>
</div>

Ketika anda sudah mempastekan 2 codenya atas dan bawah di silakan anda simpan atau publikkan untuk mengecek sudah berfungsi atau belum, jika anda sudah berfungsi dengan baik dan benar makanya begitu caranya untuk membuat conten semi-otomatis di blogger.

Semoga bermanfaat untuk Anda dan yang Berkunjung di website Mboton Dev Terima Kasih Semua Yang sudah berkunjung di sini Jika ada kesulitan silakan anda berkomentar di bawah ini atau di Contact Us kami akan saya jawab nanti.
Mboton
Mboton Spesialis pembuat Blogger sejak tahun 2013.

Post a Comment for "Cara Membuat Table of Content Otomatis Dan Semi-Otomatis Akun Blogger Atau Blogspot"

IDCloudHost | SSD Cloud Hosting Indonesia

Subscribe via Email