Mungkin kalian udah tau apa itu fungsi daftar isi terutama untuk meningkatkan SEO Friendly dan untuk menyamankan pengunjung di blog, Karena dari daftar isilah pengunjung dapat melihat semua artikel yang anda posting. Nah untuk itu mari kita simak bagaimana cara membuat daftar isi dengan style tertentu.
Pada waktu yang lalu saya sudah share artikel Mengenai Style Recent Post Yang Berwarna warni untuk memperindah tampilan blog ente. Lalu sekarang Tampilan Style Daftar Isi.
Untuk melihat stylenya silahkan Perbesar Gamar Di bawah.
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">d. Ganti text yang berwarna biru dengan nama blog kalian
#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://muiztech.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
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">3. Style 3
#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://muiztech.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>
Untuk penerapannya ikuti langkah style 1
<style>4. Style 4
#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/AVvXsEiGmA0j2p445u0IDQ-JaU3GHd5Tc9YVMvYWwu4Wl6WFR2t9ZmGLkp3to-WFjjDGszt-oNcEkmaNZtqWPvmeKbDHH_LB_6FaRjK8OGRcA305xIdWDtdg70lPNHmb8kHe3abZkyaz4rldntA/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/AVvXsEj891Pg3d99DT6zJAlIYryLbrn_uSGZwQk2UdMgsR3xzMF-HoxWJCiab_gdnmTvIitTP5nl8p6zx8fL2bBQdVbDg4tJ_nOYttrK3L2daRDe4T2gojZSra8CLzJPcADsazXnpoOdTaW8LKs/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/AVvXsEg7J3CP2Mu7pBi93EbSrqJtjCegr_8B-HLPxFNljq8mIGiaZSYQKMQp5h9WtmhEEDdJzs_3uF7K0C3ec85eP6M11XJ7SoigVlQCKIMHkOmLQZ1h42EdO_CRWBkiL9LH-KCfc0LSRnRPPCI/s1600/nextprev.png);
background-position:top center;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
var jumlahposting = 16;
var urlblog = "http://muiztech.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>
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://muiztech.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>
Sekian Posting dari saya tentang 4 Gaya Daftar Isi Blog Selamat Mencoba Dan Berkomentarlah.
Incoming search cara membuat daftar isi keren untuk blog, trik membuat daftar isi keren, cara membuat sitemap dengan 4 style berbeda, trik buat site map daftar isi dengan style berbeda beda.
loading...
Anda Sedang Membaca Artikel Tentang 4 Gaya Daftar Isi Blog Dan Artikel Ini URL Permalinknya Adalah https://muiztech.blogspot.com/2015/02/4-gaya-daftar-isi-blog.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.