Home » » Cara Membuat Sitemap/Daftar Isi Blog Ala CB

Cara Membuat Sitemap/Daftar Isi Blog Ala CB

Subratagoweser.com - Kata sitemap pastinya sudah tidak asing lagi untuk di dengar, apa lagi jika sudah berkecimpung di dunia Bloger. Pada post sebelumnya juga saya sudah pernah membahas Cara Membuat Sitemap/Daftar Isi Otomatis di Blog, Tapi kali ini saya akan membahas Cara Membuat Sitemap/Daftar Isi Blog Ala CB.
Sebelum kita bahas lebih jauh lagi, Apa sih itu Sitemap?

Baca juga: Cara Membuat Auto Readmore Responsive di Halaman Depan Blogger

Sitemap atau sering disebut peta situs kurang lebihnya adalah sesuatu yang menggambarkan tentang peta dari Blog, yaitu segala informasi mengenai halaman atau file-file yang ada pada sebuah website. Sitemap ini dimaksudkan agar mesin pencari ( search engine ) dapat dengan mudah mencari isi dari sebuah Blog.





Langsung Saja Cara Membuat Daftar Isi Blog

  1. Klik menu "Page" (Halaman) di Dashboard Blog
  2. Klik New Page  (Halaman Baru) 
  3. Isi nama halaman dengan SitemapPeta Situs, atau Daftar Isi
  4. Klik tombol mode HTML
  5. Copy dan Paste salah satu kode HTML daftar isi di bawah ini. Jangan lupa ganti dulu www.subratagoweser.com dengan nama blog Anda.
  6. Klik Publish! 

1. Kode Daftar Isi Blog Simple Berdasarkan Kategori/Label (DEMO)

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="http://
www.subratagoweser.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Baca juga: Cara Membuat Widget Fanspage Facebook Melayang di Blog

Alternatif:
Untuk tampilan daftar isi "lebih cantik" bisa gunakan kode di bawah ini:



<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.subratagoweser.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>


2. Kode Daftar Isi Berdasarkan Tanggal Publikasi

<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://www.subratagoweser.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


3. Kode Daftar Isi Berdasarkan Tanggal Publikasi Plus Kotak


<div style="background-color: none; border: 1px solid #000000; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://www.subratagoweser.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Demikian ulasan Cara Membuat Sitemap/Daftar Isi Blog Ala CB semoga bermanfaat...

Sumber: CB contohblog.com

0 komentar:

Post a Comment