Cara Membuat Sitemap / Daftar isi Keren Di Blog - Xudhax Blog

Sudah taukah kalian apa itu Sitemap? yap... kurang lebih Sitemap itu adalah Daftar Isi, disini kita memudahkan pengunjung untuk mencari artikel yang diinginkan sehingga pengunjung lebih betah di blog kita ^_^. Tapi jika design daftar isi yang kita buat kurang menarik pastinya akan mengurangi niat pengunjung anda dan meningglakan blog anda.
Disini saya akan berbagi sebuah kreatifitas yang ada di dunia IT :p

1. Buka Dashboard -> Template -> Template HTML
2. Lalu tambahkan kode dibawah diatas kode ]]></b:skin> atau </style> 

Kode CSS :

/*Sitemap
----------------------------------------------- */

#tabbed-toc {
width:99%;
margin:0 auto;
background-color:#1abc9c;
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
color:#333
}

#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:#FFF
}

#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
margin:0;
padding: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 Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}

#tabbed-toc .toc-tabs li a:hover {
background-color:#c0392b;
color:#FFF
}

#tabbed-toc .toc-tabs li a.active-tab {
background-color:#e74c3c;
color:#FFF;
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:#FFF;
border-left:5px solid #e74c3c;
box-sizing:border-box
}

#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
box-shadow:0 0 7px rgba(0,0,0,.7)
}

#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif
}

#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px;
color:#333;
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}

#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right
}

#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
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;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa
}

#tabbed-toc .panel li:nth-child(even) {
background-color:#f1f1f1;
font-size:10px;
color:#fff
}

#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:#3498db;
color:#FFF;
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 {
background-color:#fff;
border:0 solid #888
}

#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:#111;
color:#ccc;
box-shadow:2px 0 7px rgba(0,0,0,.4)
}

#tabbed-toc .toc-tabs li a.active-tab {
background-color:#DF1010;
color:#fff
}

#tabbed-toc .toc-content {
border:none
}

#tabbed-toc .divider-layer,#tabbed-toc .panel li time {
display:none
}
}

3. Simpan Template
4. Untuk menampilkannya di halaman kita buat Laman baru ( Dashboard -> Laman -> Laman Baru )
5. Lalu masukkan kode JavaScript dibawah ini di Palette HTML

1234567891011121314151617181920212223242526272829303132<div id="tabbed-toc">
<span class="loading">Loading, Please wait...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://xudhax.tk",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: true,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 9999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="https://sites.google.com/site/daffaditya11/sitemapkeren.js" type="text/javascript"></script>

6. Ganti http://xudhax.tk dengan URL Blog anda.
7. Klik Publikasikan, Done ^_^

Jika Cara Ini Tidak Berhasil, Bisa Pakai Cara Ini:   

Cara Membuat Sitemap / Daftar isi Keren Di Blog # 2?

sumber : http://dfc48.blogspot.com

Related Posts