Cara Menciptakan Daftar Isi Automatis Di Artikel Blog Plaform Blogspot

Beberapa pakar SEO menyampaikan bahwa salah satu esensial konten dalam artikel untuk mununjang SEO yakni keberadaan TOC. Toc disini yakni nama lain dari daftar isi yang sering anda temui di sejumlah blog-blog. . Nah untuk itu sebagai bentuk sharing berikut sebuah artikel wacana Cara Membuat Daftar isi atau Tabel of Conten (TOC) di artikel blog secara otomatis.

Table Of Content

Pengertian Daftar isi/ TOC

daftar isi pada blog yang selanjutnya akan kita istilahkan dengan TOC yakni abreviasi dari table of content yang dalam bahasa familiar dikenal sebagai istilah daftar isi. Seperti hal nya daftar isi buku, TOC juga menawarkan daftar wacana pokok materi atau kontent dalam sebuah tulisan. Dalam hal ini goresan pena yang dimaksud yakni artikel blog.

Kalau masih resah wacana TOC ini, coba anda kunjungi situs wikipedia dimana hampir di setiap artikelnya selalu di dahului Oleh Tabel Of content.

Bagi pembaca sendiri kehadiran TOC sanggup mempermudah mencari gosip yang mereka butuhkan.  Meskipun sisi negatifnya kehadiran TOC ini sanggup mengurangi time of Content read yang secara kebijaksanaan dan pengetahuan seo penulis sanggup berdampak pada posisi artikel. Tapi mencoba memnggunakan TOC tidak mengapa kan ?

TOC Automatis

Menurut saya langsung berdasarkan beberapa artikel page one di google wacana cara pemasangan TOC cukup ribet alasannya harus mengedit Artikel secara HTML.

Dengan TOC automatis ini, TOC sanggup dipasang jauh lebih simple dan mudah. Perlu aksentuasi lebih lanjut “automatis” yang penulis maksud bukan instant, tapi masih perlu beberapa penambahan arahan html dalam postingan tapi berdasarkan penulis langsung cara ini jauh lebih gampang untuk diterapkan.

Tutorial Pemasangan TOC Pengeditan tamplate

Tutorial ini sanggup anda ikuti untuk memasang TOC di platform Blogspot.
1.     Loging ke dasbor blog anda, kemudian pilih Tema>Edit HTML
2.  Sebelum memulai pengeditan sebagai langkah pengamanan backup tamplate anda terlebih dahulu. Cara simpelnya cukup dengan menyalin seluru HTML tamplate anda ke perangkat komputer anda.
3.     Copy dan pastekan arahan dibawah sebelum kode </head>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <script type='text/javascript'> //<![CDATA[ //*************TOC reTutor Bloginfokuhaku.blogspot.com function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}} //]]> </script>

4.     Selanjutnya pastekan arahan di bawah dan letakkan sebelum ]]></b:skin>

/*####Automatic TOC Plugin by MyBloggerTricks####*/ .mbtTOC{border:3px solid #4169E1;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFFF;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 90%;} .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}.mbtTOC ul {list-style:none;} .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .mbtTOC a{color:#0080ff;text-decoration:none;} .mbtTOC a:hover{text-decoration:underline; }.mbtTOC button{background:#FFFFFF; font-family:oswald, arial; fontsize:20px;position:relative;outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;} .mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

5.     Langkah pengeditan html tamplate simpulan yakni mengganti semua  kode  <data:post.body/> gantikan dengan

<div id="post-toc"><data:post.body/></div>.

Langkah Pemasangan TOC di artikel.

Langkah yang efesien menyerupai berikut
1.     Ketik seluru artikel yang hendak anda posting di bab pemostingan
2.  Kemudian beri beberapa heading dan jadikan format H2. Caranya dengan memblok kalimat yang hendak anda jadikan heading pada postingan, kemudian pilih heading pada taskbar.  

3.    Pada halaman post artikel pilih HTML kemudian pastekan arahan berikut Pastekan arahan dibawah pada posisi dimana anda ingin meletakkan TOC.

<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div>

4.  Langkah epilog pastekan arahan dibawah pada bab html sempurna dibagian  paling simpulan dari postingan  <script>mbtTOC();</script>

5.  Terakhir tingal posting artikel anda. Catatan : Opsi Pratinjau artikel tidak menciptakan halaman postingan tidak sanggup di klik jadi untuk mengunji apakah TOC berfungsi yakni dengan menposting artikel.

Sumber https://bloginfokuhaku.blogspot.com/

Bagikan Artikel ini