Cara Membuat Daftar Isi untuk Artikel Blog dengan Fitur Auto Melayang

Cara Membuat Daftar Isi Di Dalam Artikel Blog Dengan Fitur Otomatis Melayang

Memasang daftar isi (table of contents / TOC) di dalam artikel blog merupakan salah satu fitur ekstra yang sudah banyak digunakan para blogger untuk menampilkan poin-poin penting yang ada di dalam artikel blog. Biasanya kotak daftar isi dipasang pada artikel blog yang lumayan panjang, sehingga untuk memudahkan pengunjung blog mengetahui hal apa saja yang akan dibahas di dalam postingan artikel tersebut.

Daftar isi untuk artikel blog sangat diperlukan untuk memudahkan pembaca dalam menjelajahi dan memahami poin-poin dalam postingan artikel blog, selain itu penggunaan daftar isi pada postingan juga akan meningkatkan daya tarik awal kepada pembaca / pengunjung blog anda, terlebih lagi jika apa yang anda sampaikan pada daftar isi merupakan poin-poin yang memang dicari oleh pembaca.

Selain manfaat diatas, pembuatan daftar isi ini juga akan memungkinkan postingan tampil lebih menarik di hasil penelusuran mesin pencari. Untuk beberapa kasus, mesin pencari google akan menampilkan daftar isi ini pada hasil pencarian. Hal ini secara bersamaan akan membuat postingan anda terlihat lebih menarik dan profesional.

Daftar isi untuk postingan artikel blog yang admin bahas merupakan daftar isi yang admin terapkan di blog codeflare ini, dengan tampilan dasar biru dan fitur auto floating (melayang) ketika melewati layar (viewport) browser. Daftar isi ala codeflare ini sudah kompatible dengan semua browser di berbagai perangkat, baik perangkat mobile maupun PC, mengadopsi tampilan responsive dan secara native menggunakan kode HTML 5, CSS 3 dan library jQuery.

Beberapa keunggulan dari daftar isi ala codeflare ini, sebagai berikut.

Mudah dan fleksibel untuk digunakan disemua platform website dan blog.
Tampilan dan style dapat dikonfiguarsi sesuai dengan tema blog yang digunakan.
Tampilan dinamis dengan animasi yang menarik.
Tidak memberatkan waktu loading dan proses randering browser.
Menggunakan ketentuan standar SEO Google.
Tampilan auto float (melayang) ketika melewati layar (viewport) browser.

Sebagai contoh penerapan langsung dari daftar isi ala codeflare ini, seperti yang terlihat pada daftar isi yang ada di bawah ini.

Informasi Singkat

Daftar isi, biasanya tautan link dari ringkasan dan disingkat secara informal sebagai TOC (table of contents), adalah daftar, biasanya ditemukan di halaman sebelum dimulainya karya tertulis, dari bab atau judul bagiannya atau deskripsi singkat dengan nomor halaman yang dimulai.

Daftar isi biasanya mencakup judul atau deskripsi judul tingkat pertama (bab dalam karya yang lebih panjang), dan sering menyertakan judul tingkat kedua (bagian atau kepala-A) dalam bab juga, dan kadang-kadang bahkan menyertakan judul tingkat ketiga (subbagian atau kepala B) di dalam bagian juga. Kedalaman detail dalam daftar isi tergantung pada panjang pekerjaan, dengan pekerjaan yang lebih lama memiliki lebih sedikit. Laporan formal (sepuluh halaman atau lebih dan terlalu lama untuk dimasukkan ke dalam memo atau huruf) juga memiliki daftar isi. Dalam buku berbahasa Inggris, daftar isi biasanya muncul setelah halaman judul, pemberitahuan hak cipta, dan, dalam jurnal teknis, abstrak; dan sebelum daftar tabel atau angka, kata pengantar, dan kata pengantar.

Daftar isi yang dicetak menunjukkan nomor halaman di mana setiap bagian dimulai, sementara yang digital menawarkan link untuk masuk ke setiap bagian. Format dan lokasi nomor halaman adalah masalah gaya bagi penerbit. Jika nomor halaman muncul setelah teks judul, nomor halaman mungkin didahului oleh karakter yang disebut pemandu, biasanya titik atau titik, yang berjalan dari judul bab atau bagian di sisi halaman yang berlawanan, atau nomor halaman mungkin tetap lebih dekat ke judul. Dalam beberapa kasus, nomor halaman muncul sebelum teks.

Jika buku atau dokumen berisi bab, artikel, atau cerita oleh penulis yang berbeda, nama mereka biasanya muncul dalam daftar isi.

Materi sebelum daftar isi umumnya tidak tercantum di sana. Namun, semua halaman kecuali sampul luar dihitung, dan daftar isi sering dijumlahkan dengan nomor halaman angka Romawi huruf kecil. Banyak pengolah kata populer, seperti Microsoft Word, WordPerfect, dan StarWriter mampu secara otomatis menghasilkan daftar isi jika penulis teks menggunakan gaya tertentu untuk bab, bagian, subbagian, dll.

Sumber : Wikipedia

DAFTAR ISI

Cara Membuat Tautan (Link) Sebagai Kode Pemanggil

Cara Membuat Penanda Unik Sebagai Kode Tujuan

Konsep Dasar Elemen Tag Untuk Membuat Daftar Isi

Cara Pemasangan Kode Utama Untuk Daftar Isi Ala CodeFlare

Cara Penggunaan Kode Untuk Membuat Daftar Isi Ala CodeFlare

#1 Cara Membuat Tautan (Link) Sebagai Kode Pemanggil

Sebuah tautan (link) di dalam halaman web atau artikel blog merupakan link yang akan mengarahkan ke bagian-bagian topik tertentu yang terdapat di dalam suatu artikel blog. Link tersebut dibuat bisa menggunakan tombol sisipkan link, bisa juga melalui kode HTML standar menggunakan elemen anchor tag.

Cara membuat tautan (link) menggunakan tombol sisipkan link pada tampilan antar muka blogspot cukup mudah, anda cukup mensorot kata atau beberapa kata yang akan dijadikan tautan kemudian tekan tombol sisipkan link dan masukan tujuan dari tautan tersebut. Hal ini juga berlaku jika anda hendak membuat link pada gambar, dalam mode tulisan silakan anda pilih gambar yang akan dijadikan link kemudian tekan tombol sisipkan link.

Jika anda ingin membuat link manual menggunakan kode HTML maka anda perlu merubah tampilan antar muka editor artikel dari mode tampilan menulis menjadi mode tampilan HTML.

Pembuatan link pada kode HTML umumnya adalah menggunakan elemen anchor tag (<a href="link tujuan">Link Anda</a>) yang memang fungsinya adalah sebagai elemen untuk link, namun untuk elemen lain seperti tag button, tag input dan elemen tag div atau elemen tag lainnya memerlukan sedikit sentuhan dari kode javascript agar bisa menjadi elemen link.

Elemen anchor bersifat flexible dan impact di dalam kode HTML yang berarti :

Bersifat flexible
Elemen anchor bebas diletakan dimana saja di dalam halaman web HTML, selama elemen anchor masih dalam lingkup elemen Body tag (<body>).

Contoh Umum :
<body>
.
.
<a href="tujuan">Link</a>
.
.
</body>

Bersifat impact
Semua elemen HTML yang berada di dalam lingkup elemen anchor tag maka elemen tersebut akan menjadi elemen link secara otomatis.

Contoh Umum :
<a href="tujuan"><div>Kalimat Teks</div></a>

<a href="tujuan"><p>Kalimat Teks</p></a>

Pada contoh tulisan Kalimat Teks di atas, karena diletakan di dalam elemen anchor tag maka tulisan tersebut akan berubah menjadi tautan (link) di dalam halaman web / artikel blog.

Baca Juga
CSS Animasi Tombol Download Super Premium Unik Dan Menarik

Referensi Tujuan Tautan (Link)
Pada halaman web / artikel blog tujuan dari tautan (link) dibagi menjadi dua, yaitu tujuan untuk link luar halaman dan tujuan untuk link dalam halaman web. Tujuan untuk luar halaman web / artikel blog bearti link tersebut akan mengacu kepada penggunaan URL alamat halaman web tertentu baik didalam URL untuk web / blog itu sendiri maupun URL web / blog yang lain, sedangkan tujuan untuk link dalam halaman web akan mengacu kepada kode HTML ID (penanda unik) yang ada di dalam suatu halaman web / artikel blog.

Contoh Umum Link External (Luar):
<a href="https://google.com">Tombol Link</a>

<a href="https://alamat-website/buka-halaman.html">Tombol Link</a>

<a href="/p/lokasi-halaman-lain/">Tombol Link</a>

Contoh Umum Link Internal (Dalam):
<a href="#pembahasan1">Tombol Link</a>

<a href="#bab2">Tombol Link</a>

<a href="#paragraf3">Tombol Link</a>

Pembahasan lebih lanjut mengenai Link Internal (Dalam) bisa anda baca pada bab selanjutnya di bawah ini.

#2 Cara Membuat Penanda Unik Sebagai Kode Tujuan

Sebuah tautan (link) di dalam artikel blog merupakan link yang akan mengarahkan ke bagian-bagian topik tertentu yang terdapat di dalam suatu artikel blog. Link tersebut dibuat berdasarkan penanda unik yang diimplementasikan pada saat pembuatan artikel blog. Penanda unik ini jika digunakan pada artikel blog akan mengacu kepada standarisasi kode HTML yang berupa atribut ID di dalam suatu elemen tag HTML.

Jika anda pengguna blogspot maka pada antar muka editor artikel, silakan anda rubah tampilan mode menjadi tampilan HTML. Sebagai catatan, penanda unik ini merupakan bagian dari standarisasi kode HTML maka untuk penerapannya pada artikel blog harus melalui tampilan HTML.

Saya asumsikan bahwa anda sudah memahami pembahasan sebelumnya. Pembuatan daftar isi sebuah halaman web / artikel blog berfungsi dinamis yang artinya daftar teks yang ditampilkan dari daftar isi tersebut akan memiliki tautan (link) internal yang bisa diklik untuk menuju ke topik pembahasan tertentu pada suatu halaman web / artikel blog. Link internal tentu saja akan mengacu terhadap penanda unik atau yang disebut sebagai atribut ID di dalam suatu elemen kode HTML.

Hal penting yang harus anda ketahui adalah atribut ID harus memiliki value (nilai) yang bersifat unik. Dengan kata lain, setiap atribut value ID harus berbeda dengan atribut value ID lainnya (dalam satu halaman). Anda bisa membuat atribut ID untuk kebutuhan daftar isi ini dengan format yang konsisten untuk mempermudah dalam proses pembuatan dan menghindari kesamaan penamaan di dalam atribut value ID, seperti misalnya paragraf1, paragraf2, dan seterusnya.

Penulisan atribut value dari ID di dalam elemen pada kode HTML cukup mencantumkan satu atribut id dalam satu elemen dan tidak bisa digabungkan seperti layaknya atribut CLASS. Adapun cara menggunakan penanda unik ini (atribut ID) adalah sebagai berikut.

Contoh Umum :
<div id="bab1">Contoh teks kalimat untuk bab 1 dalam artikel</div>

<div id="bab2">Contoh teks kalimat untuk bab 2 dalam artikel</div>

dan seterusnya...

Jadi kode HTML untuk menggabungkan antara tombol link dan tujuan link seperti contoh di bawah ini.

Kode Pemanggil (Tombol Link)
<a href="#bab1">Tombol Link</a>

Pada kode pemanggil untuk menandakan sebuah atribut ID maka pada atribut href diisikan kode ID ditambahkan karakter tanda pagar (#).

Kode Tujuan (atribut ID)
<div id="bab1">Contoh teks kalimat untuk bab 1 dalam artikel</div>

Pada kode tujuan untuk posisi elemen tujuan bisa dimana saja selama berada di dalam artikel blog jadi dapat digunakan sesuai dengan kebutuhan, tidak harus berdekatan seperti contoh di atas yang penting konsepnya adalah atribut ID hanya bisa ada satu disetiap elemen tag HTML dan nilai ID harus unik (tidak boleh ada yang sama) di dalam satu halaman web / artikel blog. Apabila ada nilai ID yang sama lebih dari satu di dalam satu halaman web / artikel blog maka yang bisa berfungsi hanya satu dan biasanya yang berada pada elemen paling pertama yang memiliki nilai ID tersebut.

#3 Konsep Dasar Elemen Tag Untuk Membuat Daftar Isi

Konsep dasar untuk membuat daftar isi di dalam postingan artikel adalah dengan membuat tombol link yang disusun di dalam elemen HTML dan juga agar tampilannya terlihat bagus dan unik maka dipadukan dengan kode CSS. Berikut contoh konsep kode dasar untuk membuat daftar isi di dalam artikel.

Contoh Konsep Dasar HTML Daftar Isi:
<ol>
  <li><a href='#bab1'>Judul BAB 1</a></li>
  <li><a href='#bab2'>Judul BAB 2</a></li>
  <li><a href='#bab3'>Judul BAB 3</a></li>
</ol>

Pada kode di atas untuk tag ol atau disebut juga tag ordered list biasa digunakan sebagai elemen HTML untuk membuat daftar yang berurut dengan urutan angka kemudian diikuti tag li sebagai tag untuk urutan pengisi. Selain tag ol anda juga bisa menggunakan tag ul atau disebut juga sebagai tag unordered list yaitu elemen HTML untuk membuat daftar yang berurut tanpa menggunakan urutan angka.

Info lengkap lebih lanjut mengenai elemen tag HTML bisa anda pelajari di situs https://www.w3schools.com

#4 Cara Pemasangan Kode Untuk Daftar Isi Ala CodeFlare

Tutorial untuk membuat daftar isi ala codeflare ini cukup mudah untuk diterapkan, namun membutuhkan sedikit pengaturan apabila hendak disesuaikan dengan tema blog yang anda gunakan. Berikut cara membuat daftar isi ala codeflare.

Silakan login dahulu ke blog Anda.

Klik tombol Tema untuk masuk ke tema editor.

Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.

Geser scrollbar ke posisi paling bawah.

Letakan kode dibawah ini tepat 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>

script code here...
KETERANGAN
- Gunakan tombol Add to Blogger apabila anda menggunakan platform blogspot, tombol tersebut berguna untuk mempercepat proses pemasangan kode utama pada blogger. Kode tersebut akan tersimpan pada kotak gadget.
  
  Apabila muncul pesan kesalahan pada saat kode template hendak disimpan ke dalam kode HTML template blogspot maka kode Javascript di atas bisa diparsing terlebih dahulu. Tool untuk parsing kode HTML blogspot bisa dilihat pada artikel Cara Membuat Alat Parse HTML Coverter Di Blogger untuk melihat artikel tersebut silakan tekan tombol link di bawah ini.
  
  Catatan !
  Cukup kode javascript saja yang diparser karena hanya kode javascript yang perlu dikonversi agar tidak menimbulkan pesan error ketika kode template blogspot sudah diimplementasikan dengan kode safelink codeflare.
  
  <script>
  
  semua kode script yang di dalam tag script dimasukan ke dalam kotak parser editor, tag script (text berwarna merah) tidak perlu diikutsertakan.
  
  </script>
- Penggantian warna latar maupun settingan jenis huruf dan sebagainya bisa anda modifikasi melalui kode style CSS.
  
  Contoh :
  Misalkan untuk mengganti warna text tulisan maka anda perlu merubah kode css, seperti berikut ini.
  a {color:#0083da;}
  
  Ganti kode warna #0083da dengan kode warna yang ingin anda gunakan, misalkan warna merah, maka kode tersebut dapat dirubah menjadi seperti di bawah ini.
  
  a {color:red;}
  
  Silakan klik link tombol di bawah ini untuk mengetahui kode warna HTML lainnya.
  
  Modifikasi pada kode CSS lainnya bisa anda coba utak-atik sendiri agar bisa menyesuaikan dengan tema blog yang anda gunakan.

#5 Cara Penggunaan Kode Untuk Membuat Daftar Isi Ala CodeFlare

Cara menggunakan kode untuk membuat daftar isi ala codeflare cukup mudah tinggal gunakan format kode yang ada di bawah 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>

Silakan anda ganti tulisan teks dengan judul bab yang ada pada blog anda.

Penambahan menu daftar isi bisa anda lakukan dengan menambahkan parameter elemen tag li, sedangkan untuk pengurangan anda tinggal menghapus elemen tag li yang tidak ingin anda gunakan.

Contoh Penambahan Isi Daftar Menu :
<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>
<a href="#btnDaftarIsi-4"><li>teks</li></a>
</ol>

Perhatikan kode yang berwarna biru setiap penambahan menu daftar isi maka atribut href juga harus menyesuaikan.

Pastikan nilai atribut href sudah anda sesuaikan dengan tujuan link untuk atribut ID.

Contoh penggunaan kode jika diterapkan pada artikel sederhana dalam mode HTML.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat quis nisi vel viverra. Maecenas tincidunt egestas tristique. Phasellus rhoncus tortor in elit vehicula, eu venenatis erat vestibulum. In ut neque et ante ornare venenatis. Morbi quis enim a metus gravida imperdiet. In hac habitasse platea dictumst. In maximus id nulla in ullamcorper. Suspendisse auctor rhoncus mi non laoreet. Aliquam erat volutpat.
<br /><br />
<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="#cthIDBab-1"><li>Judul BAB 1</li></a>
<a href="#cthIDBab-2"><li>Judul BAB 2</li></a>
</ol>
<br /><br />
<h2 id="cthIDBab-1">Judul BAB 1<h2>
<br />
Vestibulum at rutrum ligula. Vivamus vel pulvinar ipsum. Aliquam quis ipsum turpis. Nulla lobortis tortor id ornare finibus. Etiam porta, sem eu condimentum viverra, eros quam aliquet ex, ut suscipit orci quam a diam. Nullam neque lacus, venenatis quis gravida a, fringilla ut metus. Quisque id ante velit. Curabitur suscipit ipsum nec ante venenatis, et mattis lacus porttitor. Proin pharetra dui vel lectus ultrices, vel pharetra turpis facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br /><br />
Pellentesque vitae sapien nisi. Nam semper nunc ut orci venenatis placerat quis ac dui. Cras suscipit odio sapien, vitae mattis est ultrices mattis. Etiam varius sagittis eros, sit amet accumsan lorem congue nec. Praesent nec arcu arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi quam, scelerisque in dui at, fringilla pharetra lacus. Curabitur ultricies laoreet tellus pharetra lobortis. Phasellus laoreet libero non lorem tincidunt faucibus. Sed sem neque, vulputate in ante eu, auctor gravida urna.
<br /><br />
<h2 id="cthIDBab-2">Judul BAB 2<h2>
<br />
Cras nisl nisi, varius quis nunc eu, auctor vehicula dui. Maecenas leo sapien, mattis sed tristique quis, lacinia vitae arcu. Morbi vehicula elementum sodales. Aliquam sit amet diam quis augue finibus sagittis sed sit amet urna. Morbi egestas mauris in felis tempor, vel tristique massa mattis. Sed fringilla, quam at gravida porttitor, quam justo tristique tellus, id vulputate nisl metus nec tellus. Proin semper orci quis tincidunt aliquet. Praesent at leo pellentesque, egestas quam in, tempor nulla. Vivamus risus metus, efficitur ut faucibus eget, imperdiet ac magna. Sed consequat libero velit, nec facilisis metus eleifend vehicula. Ut sed molestie ante. Mauris porta et lacus et pharetra. Integer erat urna, rhoncus et fringilla sed, bibendum vel lectus. Quisque maximus enim in lectus facilisis, id dictum libero bibendum. Duis sed accumsan quam, id suscipit elit.
<br /><br />
Integer gravida posuere molestie. Suspendisse ligula odio, aliquet a sollicitudin viverra, rhoncus non justo. Nullam congue, ante quis pharetra sagittis, nulla ex iaculis risus, eu porttitor nibh velit id nunc. In a nisi elit. Morbi porttitor leo metus, facilisis porta odio accumsan ac. Donec ultricies sed ligula efficitur blandit. Aenean iaculis nisl non sapien lobortis tincidunt. Aenean condimentum est vitae sollicitudin volutpat. Suspendisse libero mi, semper sit amet volutpat eu, tempor quis magna. Curabitur quam ipsum, pulvinar mollis nulla ut, efficitur condimentum odio. Aenean vel sapien dictum nunc sagittis aliquam id vitae nulla.

Demikian artikel blog tentang Cara Membuat Daftar Isi untuk Artikel Blog dengan Fitur Auto Melayang terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

cara, membuat, memasang, menggunakan, daftar, isi, menu, blog, blogger, blogspot, table, content, fly, float, melayang, terbang, keren, unik, premium, super, menarik, cool, fancy, beda, bagus, terbaik

Incoming Search Term

Daftar isi blog sederhana, Cara Bikin Daftar Isi Sederhana dan Otomatis di Blog, cara pasang daftar isi blog responsive, cara menaruh daftar isi blog berdasarkan label, Tutorial membuat daftar isi di postingan blog, Belajar membuat table of content (toc) di blog, cara membuat daftar isi blog wordpress, tutorial membuat daftar isi blog sederhana, cara membuat daftar isi di wordpress tanpa plugin, cara membuat daftar isi sitemap di blog yang keren dan mudah, kode script Daftar isi sederhana tanpa label, Cara bikin daftar isi blog yang premium