Menulis sebuah blog itu hampir sama dengan menulis sebuah laporan ataupun skripsi. Dimana pada sebuah tulisan di tujukan kepada para pembaca guna memberikan informasi. Setiap informasi harus memiliki daftar isi, dimana cara membuat daftar isi memudahkan pembaca agar langsung bisa melompat ke topik pembahasan informasi tersebut. Layaknya sebuah makalah, Postingan Blogger juga di haruskan membuat Table of Content atau Daftar isi untuk memudahkan pengunjung membaca isi dari postingan anda.
Tidak sedikit pengunjung situs web yang malas membaca, sehingga kebanyakan pengunjung meninggalkan blog sebelum membaca habis seluruh isi dari postingan. Hal ini sangat berpengaruh pada Bounce Rate, yang dapat menyebabkan situs web atau blog anda di anggap tidak memiliki standar SEO (Search Engine Optimization).
Hal yang menarik dari metode ini adalah mesin penelusuran akan meng-aktifkan fitur langsung kepada pengunjung situs web atau blog mu untuk melompat ke topik pembahasan tertentu. Tentu saja ini adalah hal yang sangat menarik.
Terlebih untuk kamu pengelola situs web blog yang memberikan informasi seputar tutorial, mesin penelusuran google akan meng-aktifkan fitur keren nya untuk artikel yang sudah kamu posting, tentunya yang memiliki Daftar isi di dalamnya.
Pada artikel ini, kami akan membagikan Cara membuat Daftar Isi di dalam Postingan secara manual dan otomatis.
Cara Membuat Daftar Isi (TOC) di Blogger secara Manual
Kamu dapat memilih 2 (dua) metode untuk Membuat Daftar isi pada postingan, yaitu Metode secara Manual dan secara Otomatis.
Berikut ini adalah Langkah Membuat Daftar isi dalam postingan secara otomatis, ikuti langkah-langkah berikut:
Tempelkan Kode CSS
1. Masuk ke akun Blogger masing-masing.
2. Klik Tema atau Template
3. Klik EDIT HTML (untuk Blogger versi lama)
Untuk Blogger versi Baru, klik tombol , kemudian klik Edit HTML ( Lihat Gambar )
4. Salin kode CSS berikut dan tempel tepat di atas Tag </head> atau </head><!--<head/>-->
<style type='text/css'>
/* CSS Table of Contents by arlinadzgn.com*/
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>Menyisipkan Kode Javascript
5. Salin kode Javascript berikut, dan tempelkan tepat di atas tag </head> atau <!--</body>--></body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>6. Simpan Tema.
Cara Pemasangan di dalam Artikel
Pastikan dalam langkah berikut ini, anda menulis dalam mode HTML. Hal ini berpengaruh pada link yang terdapat di kode TOC yang akan dipasang. Jika anda menulis dalam mode COMPOSE, metode ini tidak akan berfungsi dengan baik.
7. Untuk penggunaan dalam postingan, anda dapat menggunakan kode berikut dan tempelkan pada Tulisan yang sedang anda buat.
<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
</ol>
</div>
</div>Keterangan :
a. Tulisan yang di tandai dengan warna merah berfungsi untuk memanggil bagian Subheading yang akan anda buat.
b. Tulisan yang di tandai dengan warna hijau silahkan anda ubah sesuai dengan selera dan keinginan anda. Namun, disarankan untuk melakukannya sesuai dengan subheading yang anda buat.
Untuk melakukan pemanggilan kepada Subheading anda, anda harus menyisipkan id pemanggil pada setiap heading. Contohnya:
<li><a href="#toc_1" title="Heading 1">Bagian Heading 1</a></li>Anda harus memasang pemanggil pada heading, seperti berikut
<h1 id="toc_1">Bagian Heading 1</h3>
<div>
.......
.......
.......
</div>
<h1 id="toc_2">Bagian Heading 2</h3>
<div>
.......
.......
.......
</div>
<h1 id="toc_3">Bagian Heading 3</h3>
<div>
.......
.......
.......
</div>
<h2 id="toc_3_1">Bagian Subheading 3.1</h3>
<div>
.......
.......
.......
</div>Nah, dalam tahap membuat Daftar isi secara manual anda sudah selesai. Jika anda masih belum paham untuk bagian ini, silahkan ulangi langkah di atas untuk beberapa kali, jika masih belum berhasil, silahkan hubungi kami melalui halaman kontak.
Jika anda sudah paham pada tahap sebelumnya atau anda tidak ingin susah-susah untuk membuat daftar isi pada setiap artikel, anda dapat mencoba langkah-langkah berikut untuk membuat daftar isi otomatis di blogger.
Cara Membuat Daftar Isi (TOC) di Blogger secara Otomatis
Untuk Membuat Daftar isi secara otomatis di Blogger, anda dapat mengikuti langkah-langlah berikut:
Menyisipkan Kode Javascript
1. Masuk ke akun Blogger masing-masing.
2. Klik Tema atau Template
3. Klik EDIT HTML (untuk Blogger versi lama)
Untuk Blogger versi Baru, klik tombol , kemudian klik Edit HTML ( Lihat Gambar )
4. Salin kode Javascript berikut dan tempel tepat di atas Tag </head> atau </head><!--<head/>-->
<script type='text/javascript'>
//<![CDATA[
function tockeren(){
var a=1,b=0,c="";
document.getElementById("postMiddle").innerHTML=document.getElementById("postMiddle").innerHTML.replace(/<h([d]).*?>(n.*?|.*?)</h([d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#'+f.replace(/[^a-z0-9]/gi," ").trim().replace(/s/g,"_")+'" title="'+f+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='"+f.replace(/[^a-z0-9]/gi," ").trim().replace(/s/g,"_")+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("tocContent").innerHTML+=c}
//]]>
</script>Mengubah Kode HTML
5. Kemudian cari Kode <data:post.body/> menggunakan CTRL+F, terdapat 3 (tiga) kode yang sama pada setiap template. Di rekomendasikan untuk menggunakan kode terakhir.
6. Ganti kode tersebut menggunakan kode HTML berikut ini.
<div id='postMiddle'>
<div class='tableOfContent'>
<input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
<span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
<div id='tocContent'></div>
</div>
<data:post.body/>
<script>tockeren();</script>
</div>Menyisipkan Kode CSS
7. Tempelkan kode CSS berikut di atas tag penutup </head> atau </head><!--<head/>-->
<style type"text/css">
/* TOC Otomatis by idnxmus.com */
.post-body .tableOfContent {
padding:12px 15px;
margin:20px 0;
background-color:#f8f9fa;
border:1px solid #e4e9ef;
border-radius:4px;
font-size:16px;
line-height:1.5em;
}
.post-body .tableOfContent #tocContent {
margin:5px 0;
}
.post-body .tableOfContent #tocContent ol, .post-body .tableOfContent #tocContent ul {
margin:0 0 10px;
padding:10px 0 0 17px;
position:relative;
}
.post-body .tableOfContent #tocContent ol ol, .post-body .tableOfContent #tocContent ul ul, .post-body .tableOfContent #tocContent ol ul, .post-body .tableOfContent #tocContent ul ol {
padding-left:30px;
}
.post-body .tableOfContent #tocContent li {
position:relative;
margin:0 0 10px;
}
.post-body .tableOfContent #tocContent ol ul:before, .post-body .tableOfContent ol ol:before, .post-body .tableOfContent #tocContent ul ol:before, .post-body .tableOfContent ul ul:before {
content:'';
display:block;
width:1px;
height:calc(100% - 10px);
position:absolute;
left:-11px;
border-left:1px dashed rgba(0,0,0,.2);
top:0;
}
.post-body ol.point2 li:before {
content:'';
display:block;
height:1px;
width:15px;
border-top:1px dashed rgba(0,0,0,.2);
position:absolute;
left:-38px;
top:10px;
}
.post-body .tableOfContent #tocContent a {
display:inline-table;
margin-left:5px;
}
.post-body .tableOfContent #tocContent .point2 a {
margin:0;
}
.post-body .tableOfContent #tocContent a:hover {
text-decoration:underline;
}
.post-body .tableOfContent .toctogglelabel {
display:block;
cursor:pointer;
}
.post-body .tableOfContent .toctogglespan i.icon.icon-dropdown {
float:right;
margin:0;
}
ol.point2 li {
list-style-type:circle;
position:relative;
}
:not(:checked) > .toctoggle {
display:inline !important;
position:absolute;
opacity:0;
}
.tableOfContent .toctogglespan .toctogglelabel:before {
content:'Daftar Isi :';
font-weight:600;
}
.toctoggle:checked ~ #tocContent {
display:none;
}
label.toctogglelabel:after {
background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z' fill='%2309204C'/></svg>");
content:'';
margin-top:3px;
width:16px;
height:16px;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
float:right;
transition:all .3s ease;
-webkit-transition:all .3s ease;
}
.toctoggle:checked + .toctogglespan .toctogglelabel:after {
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.post-body ol.point2 {
padding-top:10px;
}
:target::before {
content:"";
display:block;
height:60px;
margin-top:-60px;
visibility:hidden;
}
@media screen and (max-width:480px) {
.post-body .tableOfContent {
font-size:15px;
}
}
</style>Keterangan :
Jika menggunakan header melayang (sticky header), atur tinggi header pada code css :target::before { yang sudah di tandai. Jika tidak, silahkan hapus kode tersebut.
8. Simpan Tema, dan Selesai
Nah, untuk di tahap membuat daftar isi secara otomatis kami rasa sudah selesai. Dengan ini, kami mengakhiri isi postingan kam tentang Cara Membuat Daftar Isi (TOC) di Blogger ini, semoga bermanfaat.
No comments:
Post a Comment