Membuat Daftar Isi dengan Pilihan Sortir Part 2

- June 14, 2014

infoalya.com

Membuat daftar isi yang menarik dapat memberikan suasana menyenangkan bagi pengunjung blog, selain mempermudah pengunjung saat mencari artikel yang dibutuhkan juga dapat menambah keindahan blog kita.
Dibawah ini langkah-langkah untuk membuat daftaar isi dengan pilihan sortir di blogspot
D E M O
  • Saya anggap anda sudah berada di dashboard masing-masing, klik tempate kemudian temukan tag </style>  jika sudah ketemu copy lalu pastekan kode dibawah ini tepat diatas tag </style>

#table-outer table {

width: 100%;
margin:0;
padding:0;
}
#table-outer input, #table-outer select {
padding: 4px;
font: inherit;
border: 2px solid rgba(177, 0, 0, 0.26);
width: 170px;
box-sizing: border-box;
}
#table-outer select {
cursor:pointer;
}
#resultDesc {
margin-bottom:10px;
 }
#feedContainer {
overflow: hidden;
margin-top: 20px;
}
#feedContainer strong {
font-size: 10px;
}
#feedContainer, #feedContainer li {
padding: 0;
margin: 0;
list-style: none;
}
#feedContainer li {
float: left;
width: 50%;
margin-bottom: 10px;
position: relative;
z-index: 0;
}
#feedContainer .inner {
padding: 8px;
margin: 0 5px;
position: relative;
background-color: #FFFFFF;
border: 1px solid rgba(177, 0, 0, 0.26);
border-radius: 2px;
height: 133px;
}
#feedContainer img {
float: left;
margin: 0 8px 0 0;
max-width: 100%;
border: 1px solid #C7C7C7;
padding: 3px;
}
#feedContainer .toc-title {
max-height: 33px;
overflow: hidden;
}
#feedContainer .toc-title:hover {
text-decoration:underline;
}
#feedContainer .news-text {
font-size:11px;
}
#feedNav a, #feedNav span {
display: block;
text-align: center;
color: #FFFFFF;
text-decoration: none;
background-color: #AF0606;
padding: 5px;
width: 95%;
margin: 0 auto;
border-radius: 2px;
}
#feedContainer .date {
position: absolute;
bottom: 0;
right: 0;
background-color: #AF0606;
color: #FFFFFF;
font-size: 9px;
padding: 3px 2px;
width: 75px;
}
#feedContainer .date .dd {
font-size: 15px;
line-height: 18px;
font-weight: bold;
}
#feedContainer .date span {
display: inline-block;
line-height: 12px;
text-align: center;
margin-left: 5px;
}
  • Selanjutnya save template.
  • Setelah template tersimpan, lanjutkan dengan klik laman, tambah laman baru kemudian copy dan paste kode dibawah ini pada mode HTML

<div id="table-outer">

<table><tbody>
<tr><td><label>Urutkan posting berdasarkan:</label></td><td><select id="orderFeedBy"><option selected="" value="published">Posting terbaru</option><option value="updated">Posting diperbaharui</option></select></td></tr>
<tr><td><label>Filter posting berdasarkan kategori:</label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Cari dengan kata kunci:</label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>

<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://googledrive.com/host/0BwOEXSweKsSzWDJvZ0FOWFNMNmc" type="text/javascript"></script>


  • Klik publikasikan jika selesai.

  • Silahkan rubah warna, font dan lain-lain sesuai dengan keinginan anda, jika ada kesulitan silahkan tanyakan pada kolom komentar, terima kasih.

    Share this with short URL:
    Blogger
    Disqus
    Tinggalkan Komentar

    No comments

    [+] Silahkan tinggalkan komentar
    [+] Berkomertarlah dengan santun
    [+] Mohon tidak meninggalkan live link
    [+] Terima kasih untuk komentar anda

     

    ketik dan enter untuk mencari