Cara Membuat daftar isi tampilan keren dan unik
Kalau lo belum ngerti apa itu Daftar isi, coba deh lo buka buku, majalah dll. pasti dihalaman awal lo bakan dikasih tulisan Daftar Isi yang berguna untuk memudahkan kategori apa yang lo mau baca. Itulah pengertian gue tentang Daftar Isi di buku atau majalah. Sama halnya Daftar Isi di buku dan majalah, kita akan memberi halaman atau page Daftar Isi ini ke dalam blog. Gunanya untuk apa? Daftar isi di blog ini berguna untuk memudahkan pengunjung untuk memilih kategori apa yang ingin dia baca. Selebihnya pake feel sendiri deh arti dari Daftar Isi. :D
Cara Membuat Daftar Isi
CSS, HTML, JavaScript dan Cara Pemasangannya.
Untuk penempatan dartas isi Tablusai ini, lo bisa menempatkan pada postingan atapun Widget Blogspot. Kalau menurut saran gue sih mending dipasang kedalam postingan, kalau ditaro di widget kesian nanti amburadul tampilannya, karena lebar dari Daftar isi yang mau kita bikin ini lumayan buat tiduran. :D
1. Login ke akun blogger lo.
2. Setelah itu klik "New Post" baik dihalaman statis atau dihalaman yang biasa lo sering gunain buat ngeposting. Dihalaman selanjutnya akan ada dua tab disebelah kiri atas yang satu bertuliskan "Compose" sedangkan yang satunya "HTML". Nah sekarang lo klik aja yang tab "HTML" untuk pemasangan Codenya. Lihat gambar dibawah ini..
3. Selanjutnya lo copy deh code dibawah ini dan lo paste di tab HTML tadi.
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#50b7dc;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
overflow:hidden;
position:relative;
color:#fff;
border: 1px solid #2aa4cf;
}
#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-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif;
font-size: 13px;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#fff;
text-transform:uppercase;
text-decoration:none;
padding:2px 12px;
cursor:pointer;
padding-top: 10px;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#2aa4cf;
color:#fff;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#2aa4cf;
color:white;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
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 #2aa4cf;
-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: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif;
font-size: 11px;
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px;
color:#222;
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:#222;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #2aa4cf;
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:#50b7dc;
}
#tabbed-toc .panel li:nth-child(even) {
background-color:#EAEAEA;
}
#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:#2aa4cf;
color:#fff;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#2aa4cf;
}
@media (max-width:700px) {
#tabbed-toc {
border:2px solid #2aa4cf;
}
#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:#2aa4cf;
-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://vivologis.blogspot.com/2013/08/cara-membuat-daftar-isi-keren-dan-unik.html" style="display: block; font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 11px; font-weight: 700; margin: 9px; text-align: right; text-decoration: none;" title="Daftar Isi">Get widget</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://vivologis.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:
1. Ganti URL yang berwarna merah dengan URL blog lo.
2. ShowDates: false ganti menjadi true jika ingin menampilkan postingan.
3. ShowSummaries: false ganti menjadi true jika ingin menampilkan deskripsi singkat postingan.
4. ShowThumbnails: false ganti menjadi true jika ingin menampilkan gambar.
5. NewTabLink: true ganti menjadi false jika ingin membuka link di tab yang sama.
6. MaxResults: 99999 adalah jumlah maksimal postingan yang ditampilkan.
Jika lo masih merasa kesulitan tentang tutorial diatas, atau lo bingung untuk mendesain ulang tampilannya. Dengan senang hati gue membantu, silahkan tinggalin komentar pada postingan ini.
Nah itu lah selagi-lagi waktu luang gue di isi untuk menulis tentang Cara Jitu Membuat Daftar Isi atau Sitemap Blog. Semoga bermanfaat buat kalian.
