Bukan hanya di buku maupun novel, dll. Daftar isi juga sering digunakan di website maupun blog. Fungsinya sama, yaitu memudahkan kita mencari article yang ada di web, blog, maupun buku tersebut. Nah, sekarang kami akan share tentang Cara Mudah membuat Sitemap Daftar Isi Blog Keren. Bagaimana caranya ? langsung saja, ini dia
Membuat Daftar Isi sebagai postingan
1. Pertama yang harus kita lakukan adalah log in di blogger tentunya
2. Seperti biasa,klik tombol pensil seperti kita akan blogging dan posting
3. Klik pada tab HTML, dan tuliskan kode rahasia ( kode ada di bagian bawah postingan )
4. Lalu klik Publikasikan
Membuat Daftar Isi sebagai Laman
2. Klik buat laman baru
3. Klik pada tab HTML, dan tuliskan kode rahasia ( kode ada di bagian bawah postingan )
Membuat Daftar Isi Sebagai Widget
2. Klik tambahkan Gadget
3. Pilih Gadget HTML
4. Tuliskan kode rahasia ( kode ada di bagian bawah postingan )
Kode Rahasia
<style type="text/css">Keterangan
#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...</span></div>
<a href="http://www.blogger.com/blogger.g?blogID=1214246444595948000#" style="display: block; font: normal bold 8px Tahoma,Sans-Serif; margin: 9px; text-align: right; text-decoration: none;" title="Tabbed TOC">Get The Sitemap like this</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://www.secrinfo.blogspot.com",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: false,
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="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>
1. Ganti URL berwarna merah menjadi URL blog anda
2. showDates: false ( ganti menjadi true jika ingin menampilkan waktu postingan)
3. showSummaries: false ( ganti menjadi true jika ingin menampilkan ringkasan singat postingan )
4. showThumbnails: false ( ubah menjadi true jika ingin menampilkan gambar )
5. newTabLink: true ( ubah menjadi false jika anda ingin membuka link pada tab yang sama )
6. maxResults: 99999 ( jumlah maksimal postingan yang ditampilkan )
Mudah bukan ?
Jika berhasil maka kurang lebih akan seperti ini
Mudah bukan ?
Sekian article tentang Cara Mudah membuat Sitemap Daftar Isi Blog Keren . Mudah-mudahan ada guna dan manfaatnya,
Thanks
Codesource : http://www.dte.web.id
Saya copy dulu codenya pak.. siapa tau lain waktu kepikiran buat bikin sitemap...
BalasHapussilahkan bos :D
Hapuswah, boleh di coba nih, makasih bang Ficar
BalasHapussama-sama bos
Hapusini sudah saya terapkan gan, :)
BalasHapussaya sukses Folback, atas nama Daniel (Style Admin)
thanks
makasih juga gan :)
HapusWahh bagus kyanya nihh.. Keep posting om.. i'm still watching.. ;)
BalasHapusBy; Deafile Bedah Blog
Okay,, :)
Hapusmakasih gan infonya
BalasHapusIjin nyoba mas ,
BalasHapusternyata emang bener keren mas , makasih >
BalasHapus