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

Kata Kata Tulisan Arab La Tahzan Jangan Bersedih

masticmasnasih - Semua orang pasti pernah bersedih. Baik sedih karena harta maupun sedih karena berdosa. Kata Kata Tulisan Arab La Tahzan Jangan Bersedih لَاتَحزَنٴ. Adalah salah satu cara untuk mengatasi sebuah kesedihan yang mendalam. Mengingat kalimat ini dan berdzikir mampu menenangkan hati yang galau karena bersedih. Kata Kata Tulisan Arab La Tahzan Jangan Bersedih La Tahzan Ya Ukhti لا تحزن يااختي Jangan Bersedih wahai saudaraku (perempuan). Seorang perempuan mempunyai perasaan yang sensitive. Jika melihat sesuatu yang merugikan ataupun membuatnya kaget tak lebih dari ekspektasi yang diharapkan. Perempuan mempunyai hati yang gampang tersakiti. Ia tidak bisa diingatkan secara terang-terangan menyalahkan. Ia ingin diluruskan dengan penuh kasih sayang bukan cacian dan makian. Bagi siapa saja lelaki yang berurusan dengan wanita, agar harus selalu bi...
Post a Comment
Read more