Design of indonesian: Cara Membuat Daftar Isi di Blog

Membuat Daftar Isi di Blog sangat dianjurkan karena sangat mempermudah pengunjung untuk mengakses semua isi blog anda. Tips/trik kali ini yaitu membuat daftar isi otomatis keren di blog, Otomatis berarti tidak manual keunggulan dari trik ini sobat blogger tidak repot-repot menulis daftar ini satu persatu dan terasa tidak mungkin untuk dilakukan karena barang tentu isi blog sangat banyak. oleh karena itu kita gunakan daftar isi blog otomatis akan tampil semua daftar isi yang berada di blog anda.

Daftar Isi atau sitemap Untuk memasangnya sebenarnya sangat mudah tetapi jika tidak tau caranya sudah pasti tidak bisa dilakukan. saya akan berikan beberapa koleksi sitemap atau daftar isi keren bisa sobat pilih sesuai dengan kebutuhan. Berikut beberapa sitemat (daftar isi) keren di blog:

Ikuti tutorial dibawah ini :

1. Masuk ke account blogger anda.
2. Pilih New post (Halaman Baru)
3. Jangan Lupa Pilih HTML (bukan compose).

4. Beri Judul postingan tersebut dengan Daftar Isi, atau sitemap sesuai keinginan anda.
5. Copy Kode script Sitemap dibawah ini:

<script src="https://sitemapku-blog.googlecode.com/files/contentt.js"></script><script src="http://www.zainelhasany.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

6. Ganti yang berwarna biru dengan URL blog sobat.

7. Publikasikan dan lihat hasilnya.

Daftar Isi Dengan Baground keren, berikut kodennya:

<style type="text/css">
#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>
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://www.zainelhasany.com/" style="display: block; font: normal bold 8px Tahoma,Sans-Serif; margin: 9px; text-align: right; text-decoration: none;" title="ARSIP">arsip</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://kesiangansekolah.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>

Keterangan:

Cara memasangnya sama seperti diatas.

Design of indonesian

Customer Translate

Senin, 20 Januari 2014

Cara Membuat Daftar Isi di Blog

Keterangan: