2 Cara Membuat Table of Contents di Blogger
Cara membuat table of contents (TOC) atau daftar isi postingan di Blogger otomatis dan manual.
Daftar isi
JejakTerkini.com - Hallo Sobat, mungkin Anda pernah melihat buku di mana pada halaman awalnya terpampang sebuah daftar isi, itu biasanya diberi nomor dan sub-topik dari keseluruhan buku agar memudahkan pembaca menemukan topik yang mereka cari.
Konsep seperti ini juga dapat kita terapkan di Blogger lho? Bahkan telah digunakan oleh banyak pengelola web untuk memudahkan pengunjung dalam membaca postingan mereka.
Nah jika kalian berminat, kami siap memberikan tata cara pembuatannya, baik versi manual maupun otomatis. So, silahkan simak laman ini sampai akhir.
Apa itu Table of Contents?
Intinya, sebuah daftar topik yang mencakup poin-poin utama dalam postingan. Umumnya diletakkan pada paragraf awal atau sesudah judul artikel.ketika, pengunjung mengklik salah satu tautan maka segera dilompatkan ke bagian penting sesuai minat mereka di laman tersebut.
Biasanya digunakan oleh artikel yang panjang, bahkan jika memenuhi kriteria SEO, Google akan memberi cuplikan unggulan di mesin telusur (SERPs).
Apa itu Cuplikan Unggulan?
Suatu format khusus dari daftar reguler sebuah laman web di search engine yang menampilkan ringkasan deskripsi.Secara teknis dipilih berdasarkan pencarian dan otomatis ditentukan langsung oleh sistem Google.
Kemunculannya bisa dalam bentuk pertanyaan yang diutarakan pengguna, atau berdasarkan jumlah volume keywords.
Simak penjelasan lengkapnya disini.
Apa Manfaat Menambahkan Table of Contents?
Sebelum kita menyelam lebih jauh, mari cari tahu mengapa mode ini sangat populer, dimana disebutkan sebagai terobosan baru untuk meningkatkan pengalaman pengguna dan SEO Anda.Berikut beberapa keuntungan kalau Sobat menggunakan TOC dalam artikel.
- Google menyukai halaman web yang terstruktur dengan baik, sehingga postingan mu akan terlihat lebih berkarakter.
- Jika beruntung, Google bisa menampilkan cuplikan unggulan serta link langsung di hasil pencarian.
- Pengoptimalan pada SERPs yang dapat membuat peringkat Anda cepat naik.
- Membantu meningkatkan pengalaman pembaca, bahkan menurut penelitian ada sekitar 70% pengunjung hanya memindai poin-poin vital di suatu laman web.
- Mempermudah mereka untuk melihat informasi utama, kemudian menavigasinya.
Sekarang pertanyaannya adalah bagaimana cara menambahkan daftar isi itu? Jawabanya ada dibawah ini Guys?
2 Cara Mudah Membuat Table of Contents di Blogger
Di WordPress, platform sudah menawarkan plugin pendukung untuk memudahkan pekerjaan mereka. Sebaliknya pada BlogSpot, kita harus membuatnya sendiri secara manual melalui kode HTML.Namun ketahuilah, hanya artikel panjang yang memerlukan TOC, dan hindari pemuatan mode ini ke postingan pendek.
Sekali lagi kami katakan, inti dari penambahan daftar isi adalah memberi pengunjung pengalaman membaca agar lebih baik.
Catatan: Sebelum kita memulai proses kustomisasi, sebaiknya cadangkan template Anda. Pasalnya jika terjadi kesalahan, Sobat memiliki opsi pemulihkan.
1. TOC Manual
Pertama, menambahan TOC secara manual ke setiap artikel Anda. Konsep ini agak sedikit memakan waktu, tetapi lebih efektif karena kita dapat menentukan sendiri postingan apa saja yang ingin dibuatkan daftar isinya.So, berikut step-by-step dari rancangan pengkodeannya.
Informasi: Double Click to Copy.
Langkah Pertama
Login ke akun Blogger Anda, kemudian tab menu tema "Template" > Pilih opsi edit HTML dan masukkan CSS berikut diatas kode ]]></b:skin>
/* Table of Contents */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute; opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
:target::beforeheightmargin-topheight:50pxmargin-top:-50px
Keterangan: Jika Template Anda menggunakan sidebar sticky, silahkan atur angka kode yang ditandai paling bawah menyesuaikan lebar sidebar.
Langkah Kedua
Selanjutnya, beralih ke artikel lalu tambahkan kode dibawah ini sesudah Judul atau diakhir paragraf pertama.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#toc1" title="Judul Pertama">Judul Pertama</a></li>
<li>2 <a href="#toc2" title="Judul Kedua">Judul Kedua</a></li>
<li>3 <a href="#toc3" title="Judul Ketiga">Judul Ketiga</a>
<ul>
<li>3.1 <a href="#toc3-1" title="Sub Judul Ketiga Part Satu">Sub Judul Ketga Part Satu</a></li>
<li>3.2 <a href="#toc3-2" title="Sub Judul Ketiga Part Dua">Sub Judul Ketiga Part Dua</a></li>
</ul>
</li>
<li>4 <a href="#toc4" title="Judul Keempat">Judul Keempat</a></li>
</ul>
</div>
Langkah Ketiga
Sekarang, lihatlah bagaimana cara menggunakan tag-tag diatas.Masukkan kode id="toc1" dibagian depan judul (Heading) maupun sub-judul (Sub-Heading) dalam artikel sehingga menjadi terlihat seperti ini.
<h2 id="toc1">Judul Pertama</h2>
Isi paragraf pertama...
<h2 id="toc3">Judul Kedua</h2>
Isi paragraf ketiga...
<h2 id="toc3-1">Sub Judul Ketiga</h2>
Isi paragraf sub ketiga...
Dan seterusnya...
Jangan lupa, ubah dan sesuaikan juga kode pada langkah ke-2 tadi. Untuk demo, silahkan kamu lihat langsung pada halaman ini.
2. TOC Otomatis
Kalau metode pertama barusan adalah bertipe manual, sekarang mari kita perhatikan bagaimana cara membuat secara otomatis.Pengkodean ini juga sama mudahnya, tetapi prinsifnya agak berbeda dalam hal penempatan ke tata letak HTML.
Informasi: Script berikut adalah buatan Idnxmus, kami hanya memberi panduan pemasangan.
Step 1
Silahkan letakkan CSS berikut pada template HTML Sobat diatas menu ]]></b:skin>
/* 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;
}
}
Keterangan: Harap sesuaikan entri yang disorot dengan lebar sidebar blog Agan, atau bisa hapus.
Step 2
Setelah itu, taruh script ini diatas kode </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>
Step 3
Terakhir, cari kemudian ganti code <data:post.body/> dengan script dibawah ini.
<div id='body-post-it'>
<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>
<data:post.body/>
<script>tockeren();</script>
</div>
Note: Biasanya <data:post.body/> ada 3 - 4 buah, tergantung tema masing-masing. Namun, Kamu dapat memasangnya di posisi paling akhir.
Untuk melihat demonya, pencet aja halaman berikut:
Kelebihan dan Kekurangan
| Pro | Kontra |
|---|---|
| Artikel terlihat keren | Hanya cocok untuk artikel yang panjang |
| Mempermudah pengunjung memindai informasi utama | Agak ribet karena harus memasukkan kode pada tiap postingan |
| Menambah nilai SEO |
Post a Comment for "2 Cara Membuat Table of Contents di Blogger"