Widget Daftar Isi Untuk Blogger

Widget ini akan bertindak sebagai "Daftar Isi". Ini akan mencantumkan setiap posting blog Anda dalam tabel gaya. Ketika Anda mengarahkan kursor ke judul posting, Anda akan melihat ringkasan posting tersebut. Widget ini juga menampilkan tanggal dan label Posting. Ini akan memungkinkan Anda untuk mengurutkan posting berdasarkan judul atau tanggal posting. Saya menggunakan algoritma semacam gelembung untuk mengurutkan posting sesuai.

Penghargaan : Widget ini dibuat oleh Hans of Beautiful Beta . Saya telah men-tweak untuk memperbaiki batas 500 post

Cara Menambahkan Daftar Isi ke Blogger

Langkah 1 - Buat Halaman baru di Blogger dengan judul yang sesuai

Di halaman editor, beralih ke mode HTML, dan rekatkan kode berikut ke dalam Post Editor

<div id = "bp_toc"> Memuat TOC. Harap tunggu .... </div>
<script src = "http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type = "text / javascript"> </script>
<script src = "/ feeds / posts / ringkasan? alt = json-in-script & max-results = 500 & callback = loadtoc" type = "teks / javascript"> </script>

Publikasikan Halaman dan buka di browser web Anda. Anda akan dapat melihat TOC, tetapi itu akan kacau

Langkah 2 - Jadi sekarang saatnya untuk Gaya TOC menggunakan beberapa kode CSS. Pergi ke Perancang Template. Jika Anda menggunakan UI Blogger baru, maka Anda dapat menemukan Perancang Template di Template> Kustomisasi. Jika Anda masih menggunakan UI lama, maka Anda dapat menemukannya di tab Layout. Sekarang buka Advanced > Add CSS

dan rekatkan potongan CSS berikut di sana.

#bp_toc {
  perbatasan: 0px solid # 000000;
  latar belakang: #ffffff;
  padding: 5px;
  lebar: 500px;
  margin-top: 10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  latar belakang: # ffd595;
  warna: # 000000;
  padding-left: 5px;
  lebar: 250px;
}
.toc-header-col2 {
  lebar: 75px;
}
.toc-header-col3 {
  lebar: 125px;
}
.toc-header-col1 a: tautan, .toc-header-col1 a: dikunjungi, .toc-header-col2 a: tautan, .toc-header-col2 a: dikunjungi, .toc-header-col3 a: tautan, .toc-header-col3 a: visited {
  ukuran font: 80%;
  teks-dekorasi: tidak ada;
}
.toc-header-col1 a: hover, .toc-header-col2 a: hover, .toc-header-col3 a: hover {
  ukuran font: 80%;
  teks-dekorasi: garis bawah;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  ukuran font: 70%;
}

Terapkan perubahan ke Blog Anda dan periksa halaman TOC Anda sekali lagi. :)

Terapkan Demo Langsung

Memuat TOC. Tunggu sebentar....

Simpan Templat, dan Anda akan melihat Tabel Daftar Isi yang rapi. Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya di bagian komentar :).