Cara Membuat Sitemap dengan Pilihan Sortir Di Blog

Advertisement

Cara Membuat Sitemap dengan Pilihan Sortir Di Blog | Nah, pada hari ini dimana saya sedang menjalankan ibadah puasa saya, saya akan memberikan satu lagi contoh membuat sitemap dengan pilihan Sortir di blog. Mungkin sitemap dengan pilihan sortir ini sudah banyak diperbincangkan di kalangan para blogger, tapi tidak ada salahnya saya mencoba memberikan lagi sitemap dengan pilihan sortir ini yang mana menurut saya sangat bagus digunakan.

Kelebihan Daftar Isi dengan Pilihan Sortir adalah :

• Loading Tidak Terlalu Lama.
• Warna Background Berbeda Sesuai Konten.
• Mengurutkan Posting berdasarkan Abjad dan Label
• Tidak Terlalu Besar.
• Lebih Teratur.

nah cara untuk  memasukkannya kedalam blog bagaimana? ikuti langkah-langkah dibawah ini:

• Login ke dashboard Blogger Sobat.
• Buat Halaman Baru (New Page).
• Setelah itu, Klik Tombol HTML yang ada di samping Tombol Compose.
• Masukan Kode Berikut ini:

<style>
#tocTable {
  border:2px solid white;
  font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
  margin:0 0 5px;
}
#tocTable th,
#tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}
#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
  width:60%;
  background-color:#5A930D;
}
#th-2,#th-3 {width:20%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
  padding:0 !important;
  background-color:#2372A7;
}
#tocTable td.toc-header-col-3 {background-color:#D7DEF0}
#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
  display:block;
  width:220px;
  font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  cursor:pointer;
  border:none;
  outline:none;
  background-color:#eee;
  margin:0 0 2px 0;
  padding:5px;
}
</style>
<script>
var theTotalPosts  = 9999, // Tentukan jumlah maksimal posting
    theOptions     = "Sortir...",                // Label opsi 1
    theSortPosts   = "Sortir berdasarkan Abjad", // Label opsi 2
    theSortLabels  = "Sortir berdasarkan Label", // Label opsi 3
    theTitles      = "Judul Artikel",  // Header tabel 1
    theLabels      = "Label Artikel",  // Header tabel 2
    theDates       = "Bulan Terbit",   // Header tabel 3
    theBlankLabels = "Tak Berlabel",   // Label kosong
    theSiteUrl     = "http://www.alltutorials.info"; //
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/toc-table-sort.js"></script>

Ganti Kode yang berwarna merah dengan alamat URL Blog sobat.

• Setelah Itu Klik Tombol Publikasikan.

Semoga berkenan untuk digunakan ya.

Found an article helpful? Donate via Paypal

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.