Beberapa pakar SEO mengatakan bahwa salah satu esensial konten dalam artikel untuk mununjang SEO adalah keberadaan TOC. Meskipun penulis pribadi belum menelusuri lebih lanjut tentang kebenaran hal ini dan memutuskan untuk mencobanya langsung melalui experimen. Nah untuk itu sebagai bentuk sharing berikut sebuah artikel tentang Cara Membuat Tabel of Conten di artikel blog secara otomatis.
 |
| Table Of Content |
Pengertian TOC
TOC adalah akronim dari table of content yang dalam bahasa familiar dikenal sebagai istilah daftar isi. Seperti hal nya daftar isi buku, TOC juga memberikan daftar tentang pokok materi atau kontent dalam sebuah tulisan. Dalam hal ini tulisan yang dimaksud adalah artikel blog.
Kalau masih bingung tentang TOC ini, coba anda kunjungi situs wikipedia dimana hampir di setiap artikelnya selalu di dahului Oleh Tabel Of content.
Bagi pembaca sendiri kehadiran TOC dapat mempermudah mencari informasi yang mereka butuhkan. Meskipun sisi negatifnya kehadiran TOC ini dapat mengurangi time of Content read yang secara logika dan pengetahuan seo penulis dapat berdampak pada posisi artikel. Tapi mencoba memnggunakan TOC tidak mengapa kan ?
TOC Automatis
Menurut saya pribadi berdasarkan beberapa artikel page one di google tentang cara pemasangan TOC cukup ribet karena harus mengedit Artikel secara HTML.
Dengan TOC automatis ini, TOC dapat dipasang jauh lebih simple dan mudah. Perlu penekanan lebih lanjut “automatis” yang penulis maksud bukan instant, tapi masih perlu beberapa penambahan kode html dalam postingan tapi menurut penulis pribadi cara ini jauh lebih mudah untuk diterapkan.
Tutorial Pemasangan TOC Pengeditan tamplate
Tutorial ini dapat anda ikuti untuk memasang TOC di platform Blogspot.
1. Loging ke dasbor blog anda, lalu 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 kode dibawah sebelum kode </head>
1. Loging ke dasbor blog anda, lalu 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 kode 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> |
/*####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;} |
<div id="post-toc"><data:post.body/></div>.
|
Langkah Pemasangan TOC di artikel.
Langkah yang efesien seperti berikut
1. Ketik seluru artikel yang hendak anda posting di bagian 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 kode berikut Pastekan kode dibawah pada posisi dimana anda ingin meletakkan TOC.
1. Ketik seluru artikel yang hendak anda posting di bagian 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 kode berikut Pastekan kode dibawah pada posisi dimana anda ingin meletakkan TOC.
| <div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div> |
4. Langkah penutup pastekan kode dibawah pada bagian html tepat dibagian paling akhir dari postingan <script>mbtTOC();</script>
5. Terakhir tingal posting artikel anda. Catatan : Opsi Pratinjau artikel tidak membuat halaman postingan tidak dapat di klik jadi untuk mengunji apakah TOC berfungsi adalah dengan menposting artikel.
EmoticonEmoticon