Skip to main content

Cara Membuat Sitemap/Daftar Isi Dengan Urutan Label di Blog


Cara Membuat Sitemap/Daftar Isi Dengan Urutan Label di Blog - Kali ini saya akan mengajarkan kepada anda Cara Membuat Sitemap/Daftar Isi Dengan Label di Blog. Sitemap/Daftar Isi merupakan suatu halaman yang berfungsi untuk menampilkan semua isi artikel suatu Blog. Caranya pun juga bermacam-macam, ada yang berdasarkan urutan tanggal, ada yang berdasarkan urutan Label. Nah kalai ini saya akan mengajarkanya berdasarkan urutan Lebel. Caranya tidak susah kok gan cuma Copas Script aja.

Berikut langkah-langkahnya:
  1. Silahkan Login Blogger dulu.
  2. Pilih Laman -> Laman Baru -> Laman Kosong
  3. Lalu ganti metode postingannya menjadi HTML. 
  4. Masukan judul dulu misalnya "SITEMAP" Tambahkan kode berikut: 

<style>
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Loading Sitemap ... Please Wait...</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://namablog.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="https://iwan-namikaze.googlecode.com/files/sitemapkeren.js" type="text/javascript"></script> 
Catatan: Tulisan yang berwarna Merah silahkan ganti dengan alamat blog anda.

  • Terakhir Simpan dan lihat hasilnya.
KLIK DISINI UNTUK DOWNLOAD



Comments

Popular posts from this blog

Cara memasang tombol follow dan dashboard di blog

Cara memasang tombol follow dan dashboard di blog Log in ke akun blog sobat. Klik rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript. Masukkan kode berikut pada kotak yang sudah tersedia. <div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID= 3317277797834091679 " target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left

Contoh Surat Lamaran Kerja Bahasa Inggris

Contoh Surat Lamaran Kerja Bahasa Inggris - Informasi Terbaru -  Contoh Surat Lamaran Kerja Bahasa Inggris  - Setelah sebelumnya saya telah share informasi mengenai cara cek pulsa smartfren dan kumpulan puisi cinta romantis kini saya akan update lagi blog tercinta ini dengan postingan mengenai  Contoh Surat Lamaran Kerja Bahasa Inggris  dan saya harap dapat bermanfaat untuk sahabat netter semua. Oke langsung saja lihat contoh surat lamaran pekerjaan bahasa inggris berikut ini: Bali, To; PT. Era Netter Indonesia Human Resources Department Jl. Raya Kuta No. 101 Kuta, Badung - Bali Dear Sir, I know that PT. Era Netter Indonesia is one of the biggest retail product distributors in Indonesia, and I am sure it would be an excellent career opportunity to join in and work for this respective company. I would like to apply for direct marketing and sales officer position in your company. I am in good health, willing to work, fast learning, and work well with others. I have my own vehicle, dr

Versi Teks Dragon Ball Z Episode 200 Bagian 3

Sebelumnya : Dragon Ball Z Episode 200 Bagian 2 "Hei Videl, apa menurutmu dia lebih kuat dari ayahmu?" Teman gadis di sebelah kirinya bertanya. "Jangan bodoh, ayah Videl adalah Mr.Satan, penyelamat Bumi!" ucap siswa yang duduk di depan Videl. "Tak seorangpun di dunia ini yang lebih kuat darinya." Setelahnya, pak guru masuk kelas. Videl kembali duduk di kursinya, dan pelajaran akan segera dimulai. Namun sebelum itu, pak guru hendak memperkenalkan seorang siswa baru. ya, dia tak lain adalah Son Gohan. "Selamat pagi semuanya, hari ini kita kedatangan mahasiswa baru. Silakan masuk." "Perkenalkan, namaku Son Gohan. Senang bertemu dengan kalian." "Wah, tampan sekali, dia adalah tipeku." ucap teman Videl. "Gohan? nama yang aneh." ucap siswa di depan Videl. Sejenak Videl terdiam, dan kemudian teringat kalau, "Sepertinya aku pernah bertemu dengannya." "Fufufu, dia terlihat seperti seorang kutu buku." ucap