Omnirank.id – Halo sahabat Omni! Sekarang ini banyak orang yang tertarik untuk mempelajari cara membuat blog karena blog mempunyai banyak manfaat. Untuk membuat blog cukup mudah caranya begitu juga dengan membuat daftar isinya. Bagi yang belum mengetahui bagaimana caranya bisa lihat tata caranya di ulasan berikut ini.

Daftar Isi

Apa Itu Daftar Isi Atau Table Of Content?

Sebelum membahas cara membuat blog di blogger ada baiknya untuk mengetahui dulu tata cara membuat daftar isi. Daftar isi sendiri atau dikenal dengan nama table of content merupakan pembuatan daftar isi yang dilakukan secara otomatis dan dinamis. Biasanya pembuatannya dilakukan mengikuti heading yang sudah dibuat di tulisan Anda.

Fungsi Daftar Isi

Daftar isi sangat penting untuk dibuat karena bagian ini memiliki banyak sekali fungsi yang dapat membuat pembaca merasa puas. Fungsinya bisa dilihat di bawah ini.

1. Merapikan Tata Letak Postingan

Daftar isi sudah terbukti mampu merubah tampilan postingan yang ada di blog menjadi lebih rapi terutama pada bagian tata letak postingan yang menjadi lebih friendly untuk pembaca sehingga pembaca bisa merasa sangat senang. Untuk merasakan fungsi ini sudah pasti harus mengetahui terlebih dahulu cara membuat blog.

2. Menaikkan Peringkat Blog di Mesin Pencari

Mempelajari cara membuat blog dan daftar isi nantinya bisa membantu pemilik blog menjadi lebih terkenal karena blog yang dimiliki selalu berada di peringkat teratas mesin pencari, seperti Google. Hal tersebut bisa terjadi dikarenakan pengunjung yang mendatangi blog menghabiskan waktu cukup lama untuk membaca postingan. Dalam matrix di Google Analytics, durasi pengunjung merupakan hal yang paling penting.

Apakah Daftar Isi Meningkatkan SEO?

Kalau bertanya daftar isi itu bisa meningkatkan SEO atau tidak maka jawabannya adalah iya. Karena yang namanya daftar isi dapat memberikan intisari konten yang ada di sebuah halaman website yang nantinya bisa bermanfaat untuk pengunjung dan juga mesin pencari. Kalau daftar isi dimanfaatkan secara maksimal, nantinya bisa membantu meningkatkan rasio klik situs website.

Cara Membuat Daftar Isi di Dalam Blog Post di Blogspot

Cara membuat daftar isi di WordPress terbilang cukup mudah untuk dilakukan asalkan sudah mengetahui coding-coding yang nantinya akan dipakai. Agar nantinya tidak salah dalam proses pembuatannya sebaiknya lihat proses pembuatannya berikut ini.

1. Backup Theme Blog Terlebih Dahulu

Cara membuat blog bagian daftar isi yang pertama adalah perlu melakukan back up terlebih dahulu untuk tema yang digunakan. Untuk membackup tema blog caranya cukup mudah yaitu memilih menu Theme terletak di Dashboard dan kemudian klik tanda panah bawah yang letaknya di tombol Customise. Kemudian tinggal memilih menu Back up dan simpan file.

2. Tambahkan Kode untuk Generate Link Daftar Isi

Setelah selesai melakukan back up kemudian mengedit HTML dari tema blog yang dipakai. Caranya adalah mencari baris di mana tag berada dengan menekan tombol ctrl + F. Selanjutnya masukkan kode yang ada di bawah ini pada bagian kotak pink atau di atas tag.

<b:if cond=’data:blog.pageType == “item” or data:blog.pageType == “static_page”‘>

.bwstoc { margin: 10px 0; background: #f0f0f0; border: 1px solid #ddd; }

.bwstoc ol, .bwstoc ul { margin: 0 0 15px 15px !important; padding: 0 !important; }

.bwstoc ul { background: 0 0; list-style-type: none; list-style: none; }

.bwstoc ol li, .bwstoc ul li { font-size: 95%; padding: 5px 10px 0 0; margin: 0 !important; }

.bwstoc ol li:before, .bwstoc ul li:before { display: none; }

.bwstoc li.toc-h3 { padding-left: 15px; }

.bwstoc li.toc-h4 { padding-left: 30px; }

.bwstoc a { text-decoration: none; }

.bwstoc a:hover { text-decoration: underline; }

.bwstoc .bwstocHeader { font-weight: bold; font-size: 100%; position: relative; outline: none; border: none; padding: 5px 15px 5px 5px; margin: 5px 10px; }

.bwstoc .bwstocHeader a { text-decoration: none; cursor: pointer; }

.bwstoc .bwstocHeader a:hover { text-decoration: underline; }

</style>

//<![CDATA[

function bwstoc() {

var bwstoc = (i = headinglength = getheading = 0);

headinglength = document.getElementById(“post-toc”).querySelectorAll(“h2, h3, h4”).length;

if (headinglength > 1) {

for (i = 0; i < headinglength; i++) {

getheading = document.getElementById(“post-toc”).querySelectorAll(“h2, h3, h4”)[i].textContent;

var toc_class = document.getElementById(“post-toc”).querySelectorAll(“h2, h3, h4″)[i].tagName.toLowerCase();

var bws_1 = getheading.replace(/[^a-z0-9]/gi, ” “);

var bws_2 = bws_1.trim();

var getHeadUri = bws_2.replace(/\s/g, “_”);

document.getElementById(“post-toc”).querySelectorAll(“h2, h3, h4”)[i].setAttribute(“id”, getHeadUri);

bwstoc = “<li class=’toc-“+ toc_class +”‘><a href=’#” + getHeadUri + “‘>” + getheading + “</a></li>”;

document.getElementById(“bwstoc”).innerHTML += bwstoc;

}

} else {

document.write(“<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>”);

}

function bwstocShow() {

var bwstocBtn = document.getElementById(“bwstoc”);

var bwstocWrapID = document.getElementById(“bwstocwrap”);

var bwstocLink = document.getElementById(“bwstocLink”);

if (bwstocBtn.style.display === “none”) {

bwstocBtn.style.display = “block”;

bwstocWrapID.style.display = “block”;

bwstocLink.innerHTML = “Tutup”;

} else {

bwstocBtn.style.display = “none”;

bwstocWrapID.style.display = “inline-block”;

bwstocLink.innerHTML = “Tampil”;

}

//]]>

</script>

#bwstocwrap,

.bwstoc { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; }

</style>

</noscript>

</b:if>

3. Tambahkan Kode untuk Menampilkan Daftar Isi

Setelah memasukkan kode yang ada di atas tadi, cara membuat blog yang selanjutnya tinggal mencari code <data:post.body/>, kemudian ganti code yang di atas tag dengan code berikut ini.

<div class=’bwstocHeader’>Konten [<a id=’bwstocLink’ onclick=’bwstocShow()’>Tampil</a>]</div>

</div>

<data:post.body/>

bwstoc();

</script>

</div>

4. Simpan Theme Blogspot dan Cek Hasilnya

Setelah semua kode sudah dimasukkan, langkah yang terakhir tinggal mengklik tombol save dan memeriksa artikel yang diposting sudah memiliki heading atau tidak. Pemilik blog juga harus mengecek daftar isi yang dibuat sudah sesuai harapan atau tidak.

Cara Membuat Halaman Daftar Isi Blog di Blogspot

Agar tampilan blog bisa lebih menarik, selain harus mempelajari bagaimana cara membuat blog juga harus mengetahui cara membuat halaman daftar isi atau yang biasa disebut sitemap. Caranya sendiri bisa dilihat secara lengkap berikut ini.

1. Aktifkan Blog Feed pada Blogspot

Pada saat proses pembuatan sitemap maka perlu mengaktifkan blog feed terlebih dahulu. Caranya adalah masuk ke menu pengaturan dan scroll sampai akhirnya menemukan Site Feed. Selanjutnya pada opsi Allow Blog Feed jika isinya selain None maka sudah aktif tapi kalau belum tinggal diaktifkan saja.

2. Buat Halaman Baru untuk Daftar Isi

Cara membuat blog berikutnya yaitu mulai membuat page daftar isi. Caranya adalah pilih menu Pages dan pilih New Page. Kemudian, ubah tampilan editor halaman menjadi HTML View yaitu dengan klik icon pensil.

3. Tambahkan Kode untuk Membuat Daftar Isi

Setelah selesai membuat halaman kemudian tinggal mengcopy kode ke bagian editor dan pilih opsi publish. Untuk kodenya sendiri dibedakan berdasarkan bentuk daftar isi dan berikut daftar kode-kodenya.

Kode untuk Daftar Isi di Blogspot Berupa List

Cara membuat blog dengan daftar isi berupa list maka perlu memasukkan kode yang ada di bawah ini.

var numposts = 150;

var standardstyling = true;

function showrecentposts(json) {

for (var i = 0; i < numposts; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == “alternate”) {

posturl = entry.link[k].href;

break;

}

posttitle = posttitle.link(posturl);

if (standardstyling) document.write(“<li>”);

document.write(posttitle);

}

if (standardstyling) document.write(“</li>”);

}

</script>

<ol>

</ol>

Kode untuk Daftar Isi di Blogspot Dikelompokkan Per Label

Kalau tidak terlalu suka dengan bentuk list dan ingin menggunakan bentuk label maka cara membuat blog beserta daftar isinya adalah memasukkan kode-kode yang ada di bawah ini.

#toc{width:99%;margin:5px auto;border:1px solid #cccccc;box-shadow:4px 4px 4px -2px rgba(0,0,0, 0.2);}

.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background: #225375;border:1px solid #2D96DF;border-radius:4px;box-shadow:3px 3px 1px #bbb;display:block;}

.labl a{color:#fff;}

.labl:first-letter{text-transform:uppercase;}

.new{color:#FF5F00;font-weight:bold;font-style:italic;}

.postname{font-weight:normal;background:#fff;margin-left: 35px;}

.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}

</style>

</div>

Kode untuk Daftar Isi di Blogspot Dikelompokkan Per Bulan

Kalau pemilik blog ingin membuat daftar isinya dikelompokkan berdasarkan bulan maka bisa memasukkan kode-kode berikut ini.

.toc-link { display: flex; margin-bottom: 8px; line-height: normal; }

.toc-month { color: #000; font-weight: bold; font-size: 12px; margin-bottom: 5px; }

.toc-date { color: #000; flex: 0 0 30px; font-weight: bold; padding-right: 4px; text-align: right; }

</style>

function LoadTheArchive(TotalFeed) {

var PostTitles = new Array();

var PostURLs = new Array();

var PostYears = new Array();

var PostMonths = new Array();

var PostDays = new Array();

if (“entry” in TotalFeed.feed) {

var PostEntries = TotalFeed.feed.entry.length;

for (var PostNum = 0; PostNum < PostEntries; PostNum++) {

var ThisPost = TotalFeed.feed.entry[PostNum];

PostTitles.push(ThisPost.title.$t);

PostYears.push(ThisPost.published.$t.substring(0, 4));

PostMonths.push(ThisPost.published.$t.substring(5, 7));

PostDays.push(ThisPost.published.$t.substring(8, 10));

var ThisPostURL;

for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {

if (ThisPost.link[LinkNum].rel == “alternate”) {

ThisPostURL = ThisPost.link[LinkNum].href;

break;

}

PostURLs.push(ThisPostURL);

}

DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays);

}

function DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {

var MonthNames = [“Januari”, “Februari”, “Maret”, “April”, “Mei”, “Juni”, “Juli”, “Agustus”, “September”, “Oktober”, “November”, “Desember”];

var NumberOfEntries = PostTitles.length;

var currentMonth = “”;

var currentYear = “”;

for (var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {

NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum], 10) – 1];

if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {

currentMonth = NameOfMonth;

currentYear = PostYears[EntryNum];

document.write(“<div class=’toc-month’><br />” + currentMonth + ” ” + currentYear + ” </div>”);

}

document.write(‘<a href =”‘ + PostURLs[EntryNum] + ‘” class=”toc-link”><div class=”toc-date”>’ + parseInt(PostDays[EntryNum], 10) + ” :</div><div>” + PostTitles[EntryNum] + “</div></a>”);

}

</script>

Kelebihan dan Kekurangan Pembuatan Daftar Isi di Blogspot

Setelah mengetahui cara membuat blog, selanjutnya tinggal mempelajari kelebihan dan kekurangan melakukan proses pembuatan daftar isi. Kelebihannya adalah bisa membuat pemilik blog berkreasi membuat daftar isi seperti apapun sesuai dengan kode yang ada di atas tadi. Kekurangannya adalah harus menghabiskan banyak waktu untuk menciptakan daftar isi yang bagus karena banyak proses yang perlu dilakukan.

Bagi yang ingin tahu cara membuat blog di WordPress, cara optimasi website atau ingin belajar seputar SEO bisa baca informasinya di Omnirank. Langsung saja Daftar Gratis sekarang dan Anda bisa gunakan berbagai macam layanan Service Omnirank untuk meningkatkan peringkat website di Google dan juga untuk meningkat traffic pengunjung website Anda.