![Cara Membuat Daftar Isi di Postingan Blog - Table Of Content [Responsive]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Cg8BwNmKknaaM1Y0UNQFdmFcy9UCw3zhTl2UGfNMjBW6-OF5JGg4xmlcNgxGLvGtwje8YDXiiZBy9gxaNT-HsKgCYGqtL5coxFoMsCjsrrd_CoPpi_tW-MLdTAe0CfnceTuhCt8E-Phh_CGSYOjzMj7ceIP3wetR3cgqlE53HvWXunKtS5uUZg/s6912/Table%20Of%20Content.png "Cara Membuat Daftar Isi di Postingan Blog - Table Of Content [Responsive]")
T
able of Content (TOC) adalah fitur dalam postingan atau artikel yang mengandung subtitle. Berikut cara membuat daftar isi otomatis (Daftar Isi Blogger) di postingan blog. Daftar isi ini mendukung SEO blog.Di blog WordPress yang dihosting sendiri, membuat daftar isi dalam posting sangat mudah menggunakan plugin seperti Easy Table of Content.
DAFTAR ISI
- Apa itu Table Of Content?
- Fungsi Table Of Content
- Untuk postingan panjang
- Cara Pemasangan Script Table Of Content ala Blogkoopedia
- Cara Menampilkan Table Of Content dalam Postingan Blog
- Penutup
Apa itu Table Of Content?
Daftar isi atau Table Of Content adalah daftar isi dalam sebuah posting. TOC dalam artikel ini memudahkan pembaca untuk menemukan inti dari setiap artikel.
Sertakan poin artikel yang disorot sebagai subpos atau subpos (H2/H3), dan mengklik tautan subpos dalam daftar isi akan mengarahkan pembaca ke poin yang diinginkan. Berikut adalah contoh TOC dari posting blog.
![Cara Membuat Daftar Isi di Postingan Blog - Table Of Content [Responsive]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPFz6DKoGUOldDKWAufywGr5xEyixum_0dyibpGemwiMSbcHQW59Qo_lj3j3jwnpx5sKsFR2K-NcK86OqetDIaIJGxjX5qHtQf9ZkGAdnPphK5jKRpCJtS-Jhxp1SX3PuF9W8oelumz8jeszPUED2t-3T9UMP2Hws0eGScgiInqzPMWMxG_KNKg/s699/67.png "Cara Membuat Daftar Isi di Postingan Blog - Table Of Content [Responsive]")
Fungsi Table Of Content
Daftar isi dalam artikel ini memudahkan pembaca untuk menemukan inti dari artikel tersebut.
Juga, Table of Content ini dapat menyebabkan peningkatan SEO.
Misalnya, Wikipedia suka menambahkan daftar isi otomatis untuk setiap artikel yang diterbitkan karena menarik pembaca dengan menyediakan lebih banyak aksesibilitas dan navigasi yang lebih baik.
Google lebih menyukai konten berkualitas tinggi yang terorganisir dengan baik dan diformat dengan baik. Menambahkan elemen seperti tabel, bagian bernomor, dan TOC yang dibuat secara otomatis adalah bonus besar untuk peringkat tinggi di SERP.
Google selalu menyukai posting dan halaman blog yang detail dan terstruktur dengan baik. Dengan menambahkan daftar isi ke posting blog Blogger Anda, Anda dapat membuat posting blog Anda terstruktur dengan baik dan ramah pengguna. Tambahkan daftar isi ke blog Anda untuk hasil yang lebih baik.Jika Anda menambahkan daftar isi ke posting blog Anda, itu akan terstruktur dan mudah dibaca. Google dapat menampilkan tautan lompat di halaman hasil pencarian, yang sangat bermanfaat bagi webmaster dan dapat meningkatkan rasio klik-tayang Anda.
Baca Juga -- Apa itu Anchor Text dan Bagaimana Penggunaannya?
Menurut penelitian NN Group, lebih dari 79% pembaca web adalah pemindai yang hanya membaca sorotan halaman web. Kami juga suka membaca artikel terperinci.
Pengalaman pengguna sangat penting untuk mendapatkan peringkat yang lebih tinggi di SERP (Halaman Hasil Pencarian).
Pengalaman pengguna adalah bagian yang sangat penting dari peringkat blogger yang lebih cepat. Dafta isi akan membantu Anda meningkatkan pengalaman pengguna blog Anda.
Menambahkan daftar isi ke Blogger akan memungkinkan pembaca untuk melompat ke bagian penting dari posting blog Anda. Pembaca akan lebih mudah memahami isinya.
untuk postingan panjang
Daftar isi atau TOC hanya boleh ditambahkan untuk artikel yang panjang atau mengandung setidaknya dua subjudul.
Kode TOC untuk blog ini secara otomatis akan menampilkan TOC dengan keterangan dengan tag judul H3 (subtitle).
Anda dapat mengubah ini ke header H2 jika perlu. CB masih menggunakan H3 karena biasanya ia memberi caption pada postingan dengan tag H3 (subtitle).
Cara Pemasangan Script Table Of Content ala Blogkoopedia
Tutorial untuk menerapkan daftar isi (table of content) sangat mudah. Anda hanya saja menyesuaikan dengan pengaturan blog anda.
Silahkan login akun blogger anda,
Pilih Tema,
Edit HTML.
Letakkan kode berikut diatas kode </body>
<style>
/* --- Main CSS Color Setting --- */
a {color:#0083da;}
.headerFeedAtc{
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#89c403),color-stop(1,#77a809));
background:-moz-linear-gradient(top,#89c403 5%,#77a809 100%);
background:-webkit-linear-gradient(top,#89c403 5%,#77a809 100%);
background:-o-linear-gradient(top,#89c403 5%,#77a809 100%);
background:-ms-linear-gradient(top,#89c403 5%,#77a809 100%);
background:linear-gradient(to bottom,#89c403 5%,#77a809 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403',endColorstr='#77a809',GradientType=0);
background-color:#89c403;
}
.h2TitlePost2::before {
background: linear-gradient(to bottom,#8fc800 0%,#8fc800 100%);
}
/* --- In-Post Style --- */
a, a:visited {
text-decoration: none;
}
.headerFeedAtc {
width: 93%;
-moz-box-shadow: inset 0px 1px 0px 0px #a4e271;
-webkit-box-shadow: inset 0px 1px 0px 0px #a4e271;
box-shadow: inset 0px 1px 0px 0px #a4e271;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #74b807;
display: block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #528009;
}
.h2TitlePost2:hover::before,.h2TitlePost2:focus::before,.h2TitlePost2:active::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52,1.64,0.37,0.66);
transition-timing-function: cubic-bezier(0.52,1.64,0.37,0.66);
box-shadow: inset 0px 1px 0px 0px #EAFFBA;
}
.h2TitlePost2:hover,.h2TitlePost2:focus,.h2TitlePost2:active {
color: #000;
padding-left: 15px;
border: 1px solid #28AD00;
}
.h2TitlePost2::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.h2TitlePost2 {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
position: relative;
width: 100%;
box-sizing: border-box;
background-color: #0083da;
border: 1px solid #337fed;
display: inline-block;
cursor: pointer;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 5px 10px;
text-decoration: none;
box-shadow: inset 0px 1px 0px 0px #97c4fe;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
#daftarIsiPost2 {
clear: both;
width: 100%;
text-align: left;
position: relative;
display: block;
margin: 5px 0px 10px 0;
padding: 0;
}
#daftarIsiPost2 li a {
text-decoration: none;
color: #000;
}
#daftarIsiPost2 li:hover a {
color: #0083da;
}
#daftarIsiPost2:hover li,#daftarIsiPost2:focus li,#daftarIsiPost2:activeli {
opacity: 0.2;
}
#daftarIsiPost2 li {
list-style-type: decimal;
list-style-position: inside;
margin: 0px 5px;
padding: 5px;
transition: all 0.5s ease;
}
#daftarIsiPost2 li:hover,#daftarIsiPost2 li:focus,#daftarIsiPost2 li:active {
color: #0083da;
cursor: pointer;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
opacity: 1;
}
</style>
<script>
//<![CDATA[
$( "#btnDaftarIsi" ).click(function() {
$( "#daftarIsiPost2" ).toggle( "slow", function() {
if($('#iconPostList').hasClass('fa fa-list')){
$('#iconPostList').fadeOut('normal', function(){
$('#iconPostList').removeClass('fa fa-list').addClass('fa fa-bars');$('#iconPostList').fadeIn();
});}else{
$('#iconPostList').fadeOut('normal', function(){
$('#iconPostList').removeClass('fa fa-bars').addClass('fa fa-list');$('#iconPostList').fadeIn();
});}});});
</script>
<style>
.sticky{
position:fixed;top:0;padding:0;background-color:#fff;z-index:+99;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
<script>
var stickyHashGoto=0;
function make_sticky(id) {
var a = false;var b = false;var c = false;
var e = $(id);var w = $(window);var x = e.parent().width();
$('#btnDaftarIsi,#daftarIsiPost2').appendTo('#stickyDaftarIsi');
$('<div/>').insertBefore(id);
$('<div/>').hide().css('height',e.outerHeight()).insertAfter(id);
var n = e.next();var p = e.prev();
function sticky_relocate() {
var window_top = w.scrollTop();
var div_top = p.offset().top;
if (window_top > div_top){
if (b==false){e.addClass('sticky');e.css('width', x);n.show();b=true;c=false;stickyHashGoto=$('#stickyDaftarIsi').height()+5;}
if ($('#iconPostList').hasClass('fa fa-list')==true&&a==false){$('#btnDaftarIsi').click();a=true;}
}else{e.removeClass('sticky');n.hide();b=false;a=false;
if($('#iconPostList').hasClass('fa fa-list')==false&&c==false){$('#btnDaftarIsi').click();c=true;}}}
if($('#btnDaftarIsi').length>0){w.scroll(sticky_relocate);sticky_relocate();w.resize(function(){x = e.parent().width();e.css('width', x);});}}
$(document).ready(function(){$('<div id="stickyDaftarIsi"/>').insertBefore('#btnDaftarIsi');
if($('#btnDaftarIsi').length>0){make_sticky('#stickyDaftarIsi');}});
//]]>
</script>
Cara Menampilkan Table Of Content dalam Postingan Blog
Untuk menampilkan daftar isi pada postingan blog cukup menuliskan format seperti dibawah ini.
<div class="h2TitlePost2" id="btnDaftarIsi">
DAFTAR ISI <span id="openCloseDaftarIsi" style="float: right;"><i id="iconPostList" class="fa fa-list"></i></span></div>
<ol id="daftarIsiPost2" class="selectAllNoCopy">
<a href="#btnDaftarIsi-1"><li>teks</li></a>
<a href="#btnDaftarIsi-2"><li>teks</li></a>
<a href="#btnDaftarIsi-3"><li>teks</li></a>
</ol>
Perhatikan cara atau struktur penulisan pada mode HTML pada blog anda dibawah ini.
Contoh:
<div class="h2TitlePost2" id="btnDaftarIsi" style="text-align: justify;"><span style="font-family: arial;">
DAFTAR ISI </span><span id="openCloseDaftarIsi" style="float: right;"><span style="font-family: arial;"><i class="fa fa-list" id="iconPostList"></i></span></span></div>
<ol class="selectAllNoCopy" id="daftarIsiPost2">
<span style="font-family: arial;">
<a href="#di-1"><li style="text-align: justify;">Subheading1</li></a>
<a href="#di-2"><li style="text-align: justify;">Subheading2</li></a>
<a href="#di-3"><li style="text-align: justify;">Subheading3</li></a>
<a href="#di-4"><li style="text-align: justify;">Subheading4</li></a>
</span></ol>
<div class="h2TitlePost2" id="di-1" style="text-align: justify;">Sub Heading1:</div>
<div style="text-align: justify;">Paragraf Pertama</div><br />
<div class="h2TitlePost2" id="di-2" style="text-align: justify;">Sub Heading2:</div>
<div style="text-align: justify;">Paragraf Kedua</div><br />
<div class="h2TitlePost2" id="di-3" style="text-align: justify;">Sub Heading3:</div>
<div style="text-align: justify;">Paragraf Ketiga</div><br />
<div class="h2TitlePost2" id="di-4" style="text-align: justify;">Sub Heading4:</div>
<div style="text-align: justify;">Paragraf Penutup</div><br />
Penutup
Itulah artikel tentang Cara Membuat Daftar Isi di Postingan Blog - Table Of Content [Responsive]. Jika ada kendala dalam pemasangan script boleh ditambahkan dikolom komentar. Terimakasih
Keyword
Table Of Content On Blog, Cara Membuat Daftar Isi Pada Blog
.png)
No comments:
Tulis comments