Widget archive atau daftar isi atau sitemap merupakan laman khusus yang memungkinkan pengunjung melihat seluruh daftar artikel yang terdapat pada blog yang sedang dikunjunginnya. Terdapat banyak versi daftar isi yang ada di luar sana. Namun yang paling mendukung untuk pengguna template mobile friendly, teknik archive atau daftar isi yang saya bagikan kali ini mendukung hal tersebut. Selain itu, cara ini benar-benar telah divalidasi HTML5 dan CSS3, sehingga tidak perlu merasa khawatir menggunakannya bagi anda yang menerapkan validasi HTML5 dan CSS3 di template blogger anda.
Berikut ini widget daftar isi dengan versi tampilan untuk tanggal dan bulan terbit dengan penerapan fitur valid CSS3 dan HTML5. Silahkan ikuti langkah penerapannya berikut ini.
Atau jika ingin menyingkat kodenya, maka akan menjadi seperti ini.
Buatlah judul laman, misalnya �Daftar Isi� lalu klik HTML. Kopi kode di atas lalu masukkan ke dalam laman tersebut.
Demikian artikel ini, semoga membantu.
Tampilan daftar isi
Berikut ini widget daftar isi dengan versi tampilan untuk tanggal dan bulan terbit dengan penerapan fitur valid CSS3 dan HTML5. Silahkan ikuti langkah penerapannya berikut ini.
Kode untuk membuat archive/daftar isi/sitemap di blogger.
<style type='text/css'>
/* Daftar Isi */
.table-of-content {
background-color:#333;
border:2px solid #fafafa;
font:normal normal 11px/normal Verdana,Geneva,"DejaVu Sans",Tahoma,Arial,Sans-serif;
color:#999;
margin-bottom:5px;
overflow:hidden;
box-shadow:0 1px 2px black;
}
.table-of-content .toc-header {
margin:0;
padding:10px 15px;
overflow:hidden;
cursor:pointer;
font:inherit;
font-size:13px;
color:#bbb;
text-shadow:0 1px 1px rgba(0,0,0,.3);
background-color:#3a3a3a;
margin-bottom:1px
}
.table-of-content .toc-header.active, .table-of-content .toc-header:hover {
color:#efefef;
background-color:#248AB0;
}
.table-of-content .loading {
display:block;
padding:10px 15px;
text-decoration:blink;
}
.table-of-content ol {
margin:0;
padding:0;
list-style:none;
}
.table-of-content li {
line-height:normal;
margin:0;
padding:5px 5px 5px 15px;
white-space:nowrap;
text-align:left;
overflow:hidden;
border-bottom:1px solid #2f2f2f
}
.table-of-content li:first-child {border-top:none}
.table-of-content li:last-child {border-bottom:none}
.table-of-content a {
color:#5687f8;
text-decoration:none;
}
.table-of-content a:hover {text-decoration:underline}
.table-of-content a:visited {color:#5687b8}
.credit-link {
text-align:right;
margin-right:2px;
}
.credit-link a {
font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;
color:#333;
text-decoration:none;
}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var toc_config = {
url: 'http://www.bungfrangki.com',
containerId: 'table-of-content',
monthNames: [
'Januari',
'Februari',
'Maret',
'April',
'Mei',
'Juni',
'Juli',
'Agustus',
'September',
'Oktober',
'November',
'Desember'
],
oldestFirst: false,
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="//googledrive.com/host/0B-ZIkf9kZ-oMcnNOT29RVDlNcjg"></script>
Atau jika ingin menyingkat kodenya, maka akan menjadi seperti ini.
<link rel="stylesheet" href="//googledrive.com/host/0B-ZIkf9kZ-oMZ2VnRzkzbDZvWVU"/>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var toc_config = {
url: 'http://www.bungfrangki.com',
containerId: 'table-of-content',
monthNames: [
'Januari',
'Februari',
'Maret',
'April',
'Mei',
'Juni',
'Juli',
'Agustus',
'September',
'Oktober',
'November',
'Desember'
],
oldestFirst: false,
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script><br />
<script src="//googledrive.com/host/0B-ZIkf9kZ-oMcnNOT29RVDlNcjg"></script>
//googledrive.com/host/0B-ZIkf9kZ-oMZ2VnRzkzbDZvWVU file host CSS
//googledrive.com/host/0B-ZIkf9kZ-oMcnNOT29RVDlNcjg file host JavaScript
Ubah yang ditandai pada kode di atas dengan nama blog anda.
//googledrive.com/host/0B-ZIkf9kZ-oMcnNOT29RVDlNcjg file host JavaScript
Ubah yang ditandai pada kode di atas dengan nama blog anda.
Cara pemasangan daftar isi di blogger
Masuk ke dashboard blog, klik Laman > Laman Baru.Buatlah judul laman, misalnya �Daftar Isi� lalu klik HTML. Kopi kode di atas lalu masukkan ke dalam laman tersebut.
Widget tidak tampil?
Akibat pembuatan widget archive/daftar isi/sitemap yang tidak tampil ialah kemungkinan besar pada template blog tidak dilengkapi dengan Jquery seperti berikut atau versi lain.<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'></script>Letakkan kode Jquery di atas tepat di atas kode </head> lalu jangan lupa klik simpan template.
Demikian artikel ini, semoga membantu.
http://www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html
0 komentar:
Posting Komentar