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

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

Lakukan Hal ini Sebelum Ganti Template Blog Agar Aman

masticmasnasih - Template blog adalah salah satu bagian penting di dalam kelangsungan hidup sebuah blog. Template yang baik akan berdampak baik pula bagi blog, dan template yang acak adul akan berdampak tak baik bagi blog. Blog diibaratkan perpustakaan, dan template blog adalah bangunan dari perpustakaan itu sendiri. Perpustakaan yang bagus dengan desain yang klop dengan memperhatikan kenyamanan pengunjung akan membuat pengunjung betah berlama-lama dan balik lagi dan balik lagi. Sedangkan perpustakaan yang desainnya saldi (asal jadi) tidak memperhatikan kenyamanan pengunjung maka tentunya tak disukai oleh pengunjung itu sediri. Datang sekali dan tak pernah kembali karena pengunjung tak nyaman tinggal disitu. Mengganti template blog itu bisa saja penting atau bisa saja tidak penting bahkan merugikan. Di artikel ini saya sampaikan pertimbangan sebelum mengganti template blog. Lakukan Hal ini Sebelum Ganti Template Blog Agar Aman Berikut ini adalah cara menentukan pilihan antara men...
Post a Comment
Read more