Skip to main content

Auto TOC (Table Of Content) Blogger Mirip WP SEO Friendly

masticmasnasih - Nasib seorang blogger yang ngeblog pake blogger adalah saat kepingin bikin artikel yang full optimasi harus serba manual termasuk memasang TOC juga harus manual. Nah ternyata eh ternyata beberapa hari yang lalu ada seorang blogger yang berhasil menciptakan script TOC di blogger secara otomatis tanpa harus bikin secara manual. Jadi udah bisa ngerasain fitur ini layaknya pengguna Wordpress.

Auto TOC (Table Of Content) Blogger Mirip WP SEO Friendly

Oke bro langsung saja saya kasih scriptnya. Ini adalah Script karya seorang blogger yang cerdas si empunya blog bibit.ws

Copy kode di bawah ini dan letakkan DI ATAS </head> atau bisa DI BAWAH<body> pilih salah satu saja:

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'> <style media='all' type='text/css'> /* * Blogger TOC * bibit.ws/toc-di-blogspot.php */ .bibittoc { margin: 10px 0; background: #F0F0F0; border: 1px solid #ddd; } .bibittoc ol, .bibittoc ul { margin: 0 0 15px 20px; padding: 0; } .bibittoc ul { list-style: disc; } .bibittoc ol li, .bibittoc ul li { font-size: 95%; padding: 5px 10px 0 0; margin: 0 0 0 30px; } .bibittoc a { text-decoration: none; } .bibittoc a:hover { text-decoration: underline; } .bibittoc .bibittocHeader { font-weight: bold; font-size: 100%; position: relative; outline: none; border: none; padding: 5px 15px 5px 5px; margin: 5px 10px; } .bibittoc .bibittocHeader a { text-decoration: none; cursor: pointer; } .bibittoc .bibittocHeader a:hover { text-decoration: underline; } </style> <!-- Blogger TOC --> <script type='text/javascript'> /* * SEO Table Of Contents * bibit.ws/ */ //<![CDATA[ function bibittoc() { var bibittoc = i = headinglength = getheading = 0; headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length; if (headinglength > 1) { // Tampil Jika ada Minimal 2 Heading for (i = 0; i < headinglength; i++) { getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent; var bibit_1 = getheading.replace(/[^a-z0-9]/gi," "); var bibit_2 = bibit_1.trim(); var getHeadUri = bibit_2.replace(/\s/g, "_"); document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri); bibittoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>"; document.getElementById("bibittoc").innerHTML += bibittoc; } } else { document.write("<style>.bibittoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); } } function bibittocShow() { var bibittocBtn = document.getElementById('bibittoc'); var bibittocWrapID = document.getElementById('bibittocwrap'); var bibittocLink = document.getElementById('bibittocLink'); if (bibittocBtn.style.display === 'none') { bibittocBtn.style.display = 'block'; bibittocWrapID.style.display = 'block'; bibittocLink.innerHTML = 'Tutup'; } else { bibittocBtn.style.display = 'none'; bibittocWrapID.style.display = 'inline-block'; bibittocLink.innerHTML = 'Tampil'; } } //]]> </script> <noscript><style media='all' type='text/css'>#bibittocwrap,.bibittoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript> </b:if>

Kemudian cari kode <data:post.body/> dan ganti dengan kode ini:

<div id='post-toc'> <div id='bibittocwrap' class='bibittoc' style='display:inline-block;'><div class='bibittocHeader'>Konten [<a id='bibittocLink' onclick='bibittocShow()'>Tampilkan</a>]</div><ul id='bibittoc' style='display:none'/></div> <data:post.body/> <script>bibittoc();</script> </div><!-- end TOC -->

Nah di template kan ada 2 atau 3 kode <data:post.body/>. Jadi ganti semua.

Kalo udah selesai klik tombol “Simpan Tema” dan coba cek tampilannya.

Oke jadi seperti itulah cara membuat toc otomatis di blogger seo friendly. Jika masih bingung jangan sungkan-sungkan untuk bertanya bro.

To be continue

Labels:

Comments

Post a Comment

Popular posts from this blog

Tulisan Arab La Tahzan Innallaha Ma`ana Ayat

masticmasnasih - Tulisan Arab La Tahzan Innallaha Ma`ana Ayat. Dalam kehidupan sehari-hari kita tak lepas dari berbagai masalah yang datang kapan saja dan terkadang datangnya tak terprediksi. Sebagai seorang muslim hendaknya berpegang teguh pada ajaran agama. Berpegang teguh pada ajaran-ajaran yang telah diajarkan Rasulllah SAW. yaitu selalu bertaqwa kepada Allah. Tulisan Arab La Tahzan Innallaha Ma`ana Ayat La Tahzan Arab Berikut ini adalah tulisan arab la tahzan beserta artinya berharakat dan tanpa harakat atau gundul. Tulisan Arab La Tahzan Innallaha Ma´ana لا تحزن إن الله معنا لَاتَحزَن اِنَّ اللّٰهَ مَعَنَا ´Jangan Bersedih Sesungguhnya Allah Bersama Kita.` Masalah memang menjadi sebab kesedihan bagi setiap insan. Masalah adalah bumbu kehidupan yang tak enak untuk dirasakan namun indah untuk dikenang. La tahzan ya ukhti ya akhi. Semua akan indah pada waktunya. Berusahalah yang terbaik, Insya Allah Allah membukakan jalan keluarnya. La Tahzan Artinya La T...
Post a Comment
Read more

Berteman Dengan Orang Baik Ternyata Dapat Merubah Perilaku Tak Baik Menjadi Baik

Orang yang baik adalah orang yang perilakunya sesuai dengan norma-norma yang ada di masyarakat. Orang baik bisa menjadi sebab perilaku seseorang berubah setelah berteman dengan orang baik. Orang tak baik adalah orang yang perilakunya tak sesuai dengan norma yang berlaku di masyarakat. Siapa saja yang berteman dengan orang tak baik maka ia akan ikut tak baik. Pernyataan di atas adalah di kiyaskan dengan berteman dengan penjual minyak wangi maka akan wangi. Berteman dengan tukang sedot wc maka akan bau tak sedap juga hehe... Jadi berteman dengan orang yang baik perangainya akan membuat kita menjadi baik juga. Kenapa kok bisa seperti itu? Menurut masnasih.com , Teman yang baik akan membuat diri kita menjadi baik. Teman yang baik akan menghantarkan energi positif ke dalam diri kita sehingga kita pun merasakan energi positif tersebut. Setiap perilaku yang dilakukan oleh teman baik adalah sebuah kebaikan. Maka perasaan kita tak bisa mengelak bahwa yang dilakukan teman baik adalah sesuatu...
Post a Comment
Read more

Fitur Terbaru Facebook ini Bikin Semua Pengguna Terpana Part 2

masticmanasih - Postingan sebelumnya sudah saya sampaikan beberapa fitur baru diantaranya adalah video, acara, marketplace, game dan pekerjaan. Nah sekarang saya akan melanjutkan pembahasannya yaitu tentang local, kenangan, Foto Unggulan, Tahukah Anda, Sorotan Cerita, dan Foto profil cyrcle. Baiklah langsung saja kita bahas satu persatu. Fitur Terbaru Facebook ini Bikin Semua Pengguna Terpana Part 2 Local Local adalah fitur terbaru facebook. Ia menyajikan informasi berupa tempat-tempat terdekat yang bisa kita kunjungi, dari mulai tempat rekreasi, hiburan, ibadah, dan kuliner, serta penginapan/hotel. Adanya local mempermudah pengguna menemukan tempat-tempat penting untuk menunjang kebutuhan hidupnya. Namun fitur local ini masih diragukan keabsahannya karena selain tak ada kontributor relawannya juga tak ada persyaratan resmi untuk mendaftarkan suatu tempat. Sistem local di facebook ini berbeda dengan sistem yang diterapkan oleh google. Google menggunakan local guides untuk membantu...
Post a Comment
Read more