Tips trik komputer & Android terbaru dan paling kece

Cara Membuat Daftar Isi Sederhana di Blog

Cara Membuat Daftar Isi Sederhana di Blog memang sedang dicari-cari oleh para blogger yang baru atau sedang membangun blog kesayangannya. Kegunaan dari daftar isi ini banyak sekali, contohnya adalah jika pengunjung ingin melihat semua artikel-artikel apa saja yang dibahas diblog tersebut dan berapa banyak jumlah artikelnya.

Dan masih banyak sekali kegunaan dari Daftar isi ini. Perlu kamu ketahui banyak sekali macam-macam jenis tampilan daftar isi yang telah blogger-blogger lain share disana. Tetapi pada kesempatan kali ini, aku akan mencoba untuk membagikan tampilan daftar isi yang sederhana untuk blog kamu, supaya lebih keren dan elegan tentunya.

Cara Membuat Daftar Isi Sederhana di Blog
Daftar isi sederhana untuk blog
Mungkin seperti itu lah kira-kira tampilan daftar isi yang akan aku share pada pagi hari ini. Dan jika kamu penasaran ingin melihat lebih dekat daftar isi tersebut silahkan lihat demonya terlebih dahulu di sini DEMO SITEMAP  jika kamu tertarik silahkan ikuti langkah-langkah pembuatannya.

1) Loggin ke blogger.com
2) Silahkan kamu pilih blog yang akan kamu buat daftar isinya
3) Pergi ke menu Laman yang berada dibawah Kampanye
4) Setelah itu kamu klik Laman baru, buat judulnya terserah misalnya Sitemap atau daftar isi
5) Kemudian silahkan pindah tab dari Compose ke HTML dan masukkan kode dibawah ini
<style>
/*Sitemap
----------------------------------------------- */
#tabbed-toc{background-color: #0f2e5f;color: #fff;margin: 0 auto;overflow: hidden;position: relative;}
#tabbed-toc .loading{color:#FFF;display:block;font:normal bold 14px Arial,Sans-Serif;padding:5px 10px;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{list-style:none;margin:0;padding:0;}
#tabbed-toc .toc-tabs{float:left;width:20%;}
#tabbed-toc .toc-tabs li a{color:#ccc;cursor:pointer;display:block;font:normal bold 12px/28px Arial,Sans-Serif;height:28px;overflow:hidden;padding:0 12px;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;}
#tabbed-toc .toc-tabs li a:hover{background-color:#225098;color:#FFF;}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#225098;box-shadow:-2px 2px 2px rgba(0,0,0,.5);color:#FFF;margin:0 -1px 0 0;position:relative;z-index:5;}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{background-color:#FFF;border-left:5px solid #225098;box-sizing:border-box;float:right;width:79.9%;}
#tabbed-toc .divider-layer{bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);display:block;float:none;position:absolute;right:0;top:0;}
#tabbed-toc .panel{font:normal normal 10px Arial,Sans-Serif;position:relative;z-index:5;}
#tabbed-toc .panel li a{color:#333;display:block;font-size:11px;font-weight:700;height:30px;line-height:30px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-decoration:none;}
#tabbed-toc .panel li time{color:#666;display:block;float:right;font-size:10px;font-style:italic;font-weight:400;}
#tabbed-toc .panel li .summary{border-bottom:4px solid #275827;display:block;font-style:italic;overflow:hidden;padding:10px 12px;}
#tabbed-toc .panel li .summary img.thumbnail{background-color:#fafafa;border:1px solid #dcdcdc;display:block;float:left;height:72px;margin:0 8px 0 0;padding:4px;width:72px;}
#tabbed-toc .panel li:nth-child(even){background-color:#f1f1f1;color:#fff;font-size:10px;}
#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:#333;color:#FFF;outline:none;}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222;}
@media max-width700px {
#tabbed-toc{background-color:#fff;border:0 solid #888;}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{display:block;float:none;overflow:hidden;width:auto;}
#tabbed-toc .toc-tabs li{display:inline;float:left;}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);background-color:#111;color:#ccc;}
#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;}
}
</style><br />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://www.guruhonor.com/",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "",
monthNames: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true,
maxResults: 99999,
preload: 0,
showNew: 7,
newText: " - <em style='color:red;'>New!</em>"
};
</script><script src="http://yourjavascript.com/24184422821/tabbed-toc.js" type="text/javascript"></script>
6) Silahkan kamu ubah tulisan yang berwarna merah dengan URL blog kamu
7) Dan ubah juga tulisan yang berwarna kuning jika ingin dirubah, jika tidak juga tidak apa-apa
8) Jika sudah, silahkan klik Publikasikan dan lihat hasilnya.

Mudah sekali bukan membuat daftar isi sederhana tapi keren ini? jika ada pertanyaan mengenai daftar isi untuk blog ini silahkan kamu tanyakan pada kolom komentar dibawah. Tetapi jika kamu sudah berhasil, selamat :)

Previous
Next Post »

Artikel Menarik lainnya

 

Formulir Kontak

Name

Email *

Message *