Daftar isi pada blog sangat berguna bagi pengunjung blog yang dikunjunginya, karena Daftar Isi berguna untuk mempermudah pencarian artikel atau postingan yang ada di blog tersebut. Apalagi jika artikel di dalam suatu blog sudah sangat banyak, pasti pengunjung akan kesulitan dalam mencari artikel. Kali ini saya akan berbagi Cara Membuat Daftar Isi Di Blog Dengan Pilihan Sortir. Hasilnya akan seperti gambar di bawah ini.
Bagi yang ingin menerapkannya langsung saja simak langkah-langkah berikut ini.
1. Masuk ke akun blogger kamu
2. Pilihlah Laman di menu, kemudian klik Laman Baru
3. Berilah judul yang sesuai
4. Masukkan kode di bawah ini ke laman tersebut dengan mode HTML (bukan Compose).
Bagi yang ingin menerapkannya langsung saja simak langkah-langkah berikut ini.
1. Masuk ke akun blogger kamu
2. Pilihlah Laman di menu, kemudian klik Laman Baru
3. Berilah judul yang sesuai
4. Masukkan kode di bawah ini ke laman tersebut dengan mode HTML (bukan Compose).
5. Yang terakhir klik Publikasikan<style type="text/css">
#table-outer {
padding:7px 10px;
margin:30px 30px 0;
}
#table-outer table {
width:80%;
margin:0;
}
#table-outer form {font:inherit;}
#table-outer td {padding:2px 2px;}
#table-outer label {
font-weight:bold;
color:#999;
text-shadow:0 1px 0 rgba(0,0,0,.4);
display:block;
text-align:right;
margin:0 10px 0 0;
padding:4px 0 0;
}
#table-outer select[disabled] {opacity:.4;}
#post-searcher {
display:block;
margin:0;
padding:0;
}
#table-outer input,#table-outer select {
width:100%;
background-color:#111;
border:none;
display:block;
margin:0;
padding:5px 5px;
font-size:86%;
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;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {background-color:#090909;}
#feed-container {
display:block;
clear:both;
margin:0 30px;
padding:0;
list-style:none;
overflow:hidden;
position:relative;
border:1px solid #3c3c3c;
border-top:none;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#feed-container:after {
content:"";
display:block;
width:1px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:50%;
background-color:#3c3c3c;
}
#feed-container li {
list-style:none;
margin:0;
padding:0;
border-top:1px solid #3c3c3c;
color:#999;
width:50%;
float:left;
display:inline;
}
#feed-container li .inner {
margin:15px 16px;
height:116px;
overflow:hidden;
word-wrap:break-word;
text-overflow:ellipsis;
}
#feed-container li a {
text-decoration:none;
color:#5687B8;
}
#feed-container li a:hover {
text-decoration:none;
color:#eee;
}
#feed-container li a.toc-title {font-weight:bold;}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
margin:0 10px 5px 0;
padding:5px;
background-color:#222;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
float:left;
}
#result-desc {
margin:0 30px;
padding:0;
border-bottom:4px solid #303030;
}
#result-desc span,#result-desc div {
display:block;
margin:0;
padding:5px 10px 7px;
color:#D64D52;
}
#result-desc div {color:inherit;}
#feed-nav {
margin:10px 30px 0;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
background-color:#111;
padding:0;
color:#999;
text-decoration:none;
display:block;
height:30px;
line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
background-color:black;
color:white;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
#feedContainer li {
float:none;
display:block;
width:auto;
height:auto;
}
#feedContainer:after {
display:none
}
}
</style>
<div id="table-outer">
<table border="0">
<tbody>
<tr>
<td><label for="feed-order">Urutkan artikel berdasarkan:</label>
</td>
<td><select id="feed-order">
<option selected="" value="published">POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</option>
</select>
</td>
</tr>
<tr>
<td><label for="label-sorter">Filter artikel berdasarkan kategori:</label>
</td>
<td><select disabled="" id="label-sorter">
<option selected="">Loading....</option>
</select>
</td>
</tr>
<tr>
<td><label for="feed-q">Cari dengan kata kunci:</label>
</td>
<td><form id="post-searcher">
<input id="feed-q" type="text" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type="text/javascript" src="http://yourjavascript.com/13474142103/tipsblogbaru.js"></script>
Demikian posting tentang Cara Membuat Daftar Isi Di Blog Dengan Pilihan Sortir. Semoga Bermanfaat. Baca juga posting-posting lainnya dan jika ada yang kurang jelas bisa ditanya, silahkan berkomentar di bawah.
Sumber kode : http://tipsblogbaru.blogspot.com/2014/03/membuat-daftar-isi-blog-dengan-pilihan.html
Demikian artikel tentang Cara Membuat Sitemap / Daftar Isi Di Blog Dengan Pilihan Sortir ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Sitemap / Daftar Isi Di Blog Dengan Pilihan Sortir ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
