Advertisement
4 Jenis Style Daftar Isi / Sitemap-
Daftar isi dalam sebuah blog merupakan menu wajib untuk menunjang kwalitas suatu blog,
daftar isi juga berfungsi sebagai gambaran lengkap tentang konten apa saja yang di bahas dalam blog tersebut. Mungkin sebelumnya kalian pernah menggunakan berabagai jenis style
daftar isi namun pada posting kali ini saya akan memberikan dan menjelaskan penggunaan
daftar isi 4 style sekaligus, berikut style yang pertama dan cara penerapannya :
1. Style 1
a. Login ke blog anda
www.blogger.com
b. Kemudian buat laman baru beri judul "
Daftar Isi"
c. Pada Mode HTML copy kan kode berikut ini :
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.landblogging.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
d. Ganti text yang berwarna biru dengan nama blog kalian
e. Klik Pratinjau untuk memastikan semua sudah di rasa pas
f. Terakhir Publikasikan
2. Style 2
Untuk penerapannya ikuti langkah style 1
<style type="text/css">
#resultDesc {
margin:0;
padding:0 0;
color:#999;
font-weight:bold;
}
#resultDesc span {
margin:0 auto;
padding:5px 10px 7px;
color:#D64D52;
}
#feedNav,#feedNav:hover {
margin:0 auto;
height:34px;
line-height:34px;
text-align:center;
color:#fff;
font:bold 12px/30px Arial,Sans-Serif;
background-color:#3c3c3c;
border-top:1px solid #444;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#feedNav a,#feedNav span {
color:#999;
padding:0;
text-decoration:none;
}
#feedNav:hover {
color:white;
background-color:#444;
}
#feedNav:active {background-color:#527915;}
#feedNav span {cursor:wait;}
#table-outer {
height:30px;
text-align:center;
padding:0;
margin:15px 20px 0;
}
#table-outer #orderFeedBy {float:left;}
#table-outer #postSearcher {float:right;}
#table-outer input {
display:inline-block;
vertical-align:right;
margin:0 2px 0 0;
padding:0 0;
}
#table-outer select[disabled] {opacity:.4;}
#postSearcher input,#table-outer select {
width:33%;
background-color:#111;
border:none;
padding:5px 5px;
font:normal normal 10px Tahoma,Verdana,Arial,Sans-Serif;
text-transform:uppercase;
color:#777;
outline:none;
-webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
-moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
box-shadow:inset 0 1px 3px black,0 1px 0 #444;
}
#postSearcher {
width:33%;
padding:0;
}
#postSearcher input {
width:96%;
padding:5px 5px;
}
#postSearcher input:focus,#table-outer select:focus {background-color:#090909;}
#tabbed-toc {
width:100%;
margin:5px auto 0;
background-color:#333;
border-left:1px solid #222;
border-right:1px solid #444;
border-top:1px solid #222;
border-bottom:1px solid #444;
overflow:hidden;
position:relative;
color:#888;
}
#tabbed-toc .loading {margin:20px 47%;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc #labelSorteres {
width:20%;
float:left;
margin:0 auto;
}
#tabbed-toc #labelSorter ul {
position:relative;
margin-top:-36px;
background-color:#333;
}
#tabbed-toc #labelSorter li a,#tabbed-toc #labelSorteres #loadCat li a {
display:block;
font:bold 10px/28px Helmet,Freesans,Sans-Serif;
height:34px;
line-height:34px;
overflow:hidden;
text-overflow:ellipsis;
color:#CCC;
border-top:1px solid #444;
border-left:1px solid #444;
border-bottom:1px solid #222;
border-right:1px solid #222;
text-transform:uppercase;
text-decoration:none;
padding:0 10px;
margin:0;
cursor:pointer;
}
#tabbed-toc #labelSorteres #loadCat .allowed,#tabbed-toc #labelSorter .allowed {cursor:not-allowed;}
#tabbed-toc #labelSorter li a:hover {
outline:none;
background-color:#3c3c3c;
color:white;
}
#tabbed-toc #labelSorter li a.active-tab {
color:#C4DEF0;
font-size:13px;
font-weight:bold;
outline:none;
z-index:1;
padding:0 10px;
margin:0;
background-color:#3c3c3c;
}
#tabbed-toc #labelSorter li a.active-tab:hover {cursor:not-allowed;}
#tabbed-toc #labelSorter .disabled,#tabbed-toc #labelSorter .disablet {display:none;}
#tabbed-toc .feedline {
width:80%;
float:right;
text-align:left;
margin:0 auto;
padding:0;
background-color:#333;
border-bottom:1px solid #222;
}
#tabbed-toc #feedContainer {background-color:#333;}
#tabbed-toc #feedContainer li {
float:left;
width:100%;
margin:0 auto;
list-style:none;
background-color:#333;
font:10px Helmet,Freesans,Sans-Serif;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc #feedContainer li.bold {width:50%;}
#tabbed-toc #feedContainer li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc #feedContainer li a.item-title {
display:block;
position:relative;
font-weight:normal;
font-size:13px;
color:#999;
border-top:1px solid #444;
border-bottom:1px solid #222;
height:34px;
line-height:34px;
padding:0 12px;
text-transform:uppercase;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc #feedContainer li a.item-title:hover,#tabbed-toc #feedContainer li a.item-title:focus {
color:#999;
outline:none;
border-left:4px solid #066696;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc #feedContainer li .summary {
display:block;
height:50px;
padding:10px 12px 10px;
font-style:italic;
color:#ccc;
border-top:1px solid #444;
border-bottom:1px solid #222;
overflow:hidden;
}
#tabbed-toc #feedContainer li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #3c3c3c;
background-color:#292929;
}
#tabbed-toc #feedContainer li .itemfoot {
clear:both;
height:34px;
line-height:34px;
padding:0 10px;
color:#666;
border-top:1px solid #444;
border-bottom:1px solid #222;
overflow:hidden;
position:relative;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore {
float:right;
font-weight:bold;
color:#3B5998;
text-decoration:none;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore:hover {
color:#555;
background-color:transparent;
text-decoration:none;
border-color:transparent;
}
</style>
<div id="table-outer">
<select id="orderFeedBy">
<option value="published" selected>POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</option>
</select><span id="resultDesc"></span>
<form id="postSearcher">
<input type="text" id="feed-q-box" value="" autocomplete="off" onkeyup="resetField();" />
</form>
</div>
<div id="tabbed-toc"><span id="labelSorteres"><div id="loadCat"></div><div id="labelSorter"><li class="toc-tab-item"><a class="allowed" href="javascript:changeSort(0);">SEDANG MEMUAT LABEL...</a></li></div></span>
<div class="feedline">
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
</div>
</div>
<script type="text/javascript">
var tocConfig = {
url: "http://landblogging.blogspot.com", // Ganti nilainya menjadi URL blog anda
feedNum: 12, // Jumlah posting yang tampil
numChars: 100, // Jumlah ringkasan posting
thumbWidth: 40, // Ukuran thumbnail posting
newTabLink: true, // Membuka link pada tab baru
showDates: true, // Menampilkan tanggal publis
labelName: false, // Menentukan label yang akan di tampilkan
showSummaries: true, // Menampilkan ringkasan posting
showThumbnails: true, // Menampilkan thumbnail posting
navText: "Berikutnya ▼", // Memuat artikel lainnya
frontText: "Kembali ke Awal ⇑", // Artikel sudah mencapai batas
moreText: "Selengkapnya ►", // Readmore atau baca selengkapnya
loading: "<span>Memuat Content...</span>", // Sedang memuat content
searching: "<span>Mencari...</span>", // Sedang mencari content
noResult: "Tak Ditemukan", // Content tidak di temukan
loadCat: "Sedang Memuat Label...", // Memuat label
resetCat: "Reset Ulang Category...", // Reset label
noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", // Artikel tanpa gambar
monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"] // Bulan terbit artikel
};
</script>
<script src="http://externalproject.googlecode.com/svn/trunk/eks/js/tocConfig.js"></script>
3. Style 3
Untuk penerapannya ikuti langkah style 1
<style>
#daftar-isi-body {
width:760px!important;
height:600px!important;
padding:30px 40px;
margin:0 auto;
}
#daftar-isi-wrap {
margin: 0 auto;
}
.box-posting {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnh3UKu1txUKMkLw5rbncf69URrNmsJVpQK72DOtBl1QFmEPMmD7_T08SR2FYSQI-UHluABKRD42Nt30b3ed65Gmzf96ZWbQ0SnGp220jj86cA0wN2HPWXcEAvQculdgoyw0gTW0a05-E/s1600/bg-box.png);
background-position:bottom center;
background-repeat:no-repeat;
overflow:hidden;
cursor:pointer;
float:left;
height:140px;
width:248px;
margin:-50px 0 0 0;
}
.box-posting img {
height:46px;
width:46px;
float:left;
margin:20px 0 0 25px;
background-color:#2E0700;
border:1px solid #2E0700;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 50%;
}
.box-posting .judul-posting {
float:left;
height:35px;
margin:0;
width:220px;
}
.box-posting .judul-posting a {
font-family:arial,Serif !important;
color:#774A34!important;
text-shadow:0 0 1px rgba(0,0,0,0.9);
margin:-40px 0 0 80px;
display:block;
font-size:13px !important;
line-height:18px!important;
font-weight:bold !important;
}
.box-posting .judul-posting a:hover {
color:#333!important;
}
.box-posting:hover {
border-left-color:#C6EB04;
}
#totales {
text-align:center;
color:#774A34 !important;
text-shadow:0 1px rgba(0,0,0,0.2);
}
#loadingscript {
color:#444;
font-family:Century Gothic;
font-size:100px;
letter-spacing:-10px;
text-align:center;
text-shadow:-5px 0 1px #444;
}
#paginacion {
color:#BBB;
font-size:24px;
font-weight:bold;
height:35px;
line-height:28px;
padding:0;
margin:0 auto;
text-align:center;
}
#paginacion span,#paginacion a
{
display:inline-block;
font-size:13px !important;
line-height:24px;
font-weight:bold;
margin:0 1px;
width:25px;
height:25px;
}
#paginacion a, #paginacion span.actual {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTyp1r2TGkLJqzQA4QWT9-SWuVyqXKn5vUuSMZPokkQO2Ke0czLWBipErvH37afx0d4Rpvha-avw4j7dyJxEkiLR6C_WS96w-9e4QZ3kekvYOsm7ANCndkRszSTsoQ_1eUgclPVEL6Dso/s1600/page-link.png);
background-position:top center;
background-repeat:no-repeat;
color:#250700 !important;
text-shadow:0px 1px 0px rgba(255,255,255,0.1);
}
#paginacion span.actual {
color:#774A34 !important;
}
#paginacion a:hover {
color:#FFF !important;
}
#paginacion .nextprev-link,
#paginacion span.nextprev-link {
border:none;
color:#250700 !important;
text-shadow:0px 1px 0px rgba(255,255,255,0.1);
width:100px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFY6VosMnrLH0hlQnQL_c_OAHQlpdKSRlJbtmfT0zeEgGcfrd1BYMz5iVUx3nJ3R2VArg-oEMKeSU06LHhpWC-4T-RS4_hWHICdyjmlZ2lIK6Ym3-493BqIp6TqQoQRQ8TdDsQW_tcKlw/s1600/nextprev.png);
background-position:top center;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
var jumlahposting = 16;
var urlblog = "http://landblogging.blogspot.com";
var minpaginas = 5;
var maxpaginas = 10;
var thumbs = "http://upload.wikimedia.org/wikipedia/commons/6/66/Colour_wheel_(black_background).JPG";
</script>
<script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script>
4. Style 4
Untuk penerapannya ikuti langkah style 1
<link href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" rel="stylesheet"></link>
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
blogUrl: "http://landblogging.blogspot.com", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>
Demikian posting kali ini tentang
4 Jenis Style Daftar Isi / Sitemep semoga dapat bermanfaat sekian dan terima kasih.
Advertisement
Google +
Fanspage
Agen Wisata Pulau Harapan Trip