Membuat Halaman Daftar Isi Lebih Menarik 2018
Selamat Datang di ruang Android Tutorial, Pada Kesempatan kali ini kami akan membahas tentang Membuat Halaman Daftar Isi Lebih Menarik, Disini juga kami telah menyediakan beberapa tutorial lengkap dengan gambar dan link downloadnya. mudah-mudahan isi postingan yang kami tulis dapat dengan mudah anda mengerti.

Cara Terbaru Membuat Halaman Daftar Isi Lebih Menarik
Cara Yang Benar Membuat Halaman Daftar Isi Lebih Menarik

Membuat Halaman Daftar Isi Lebih Menarik

Didalam suatu blog, Daftar Isi / Sitemap menjadi hal yang mutlak untuk menarik perhatian bagi pengunjung dalam mempermudah melihat seluruh isi artikel yang terdapat didalam blog tersebut, ada kalanya kita penasaran ingin melihat artikel yang dibuatnya. Betul kan?? hehee.. Yuk kita coba bikin halaman Daftar Isi menjadi lebih menarik.

Caranya:

1. Buat satu halaman statis beri judul "Daftar Isi"
Dan simpan kode ini dalam mode HTML

<div id="table-outer"><table><tr><td><label>Urutkan posting berdasarkan:</label></td><td><select id="orderFeedBy"><option value="published" selected>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></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div>
<script src="https://googledrive.com/host/0B-GXzRKoPbNnR3N0Z0dMQ0lDYWM" type="text/javascript"></script>

2. Selanjutnya salin CSS ini tepat diatas </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;
}

Simpan perubahan templatenya, dan lihat halaman Daftar isi yang tadi sobat buat. Gimana??? menarik bukan???

Selesai sudah Membuat Halaman Daftar Isi Lebih Menarik 2018

Semoga anda bisa mengikuti langkah - langkah Membuat Halaman Daftar Isi Lebih Menarik dengan benar dan mudah-mudahan bisa memberi manfaat untuk anda semua. sekian postingan Android Tutorial kali ini.

Anda telah membaca artikel Membuat Halaman Daftar Isi Lebih Menarik dengan url permalink http://eurobokep.blogspot.com/2014/07/membuat-halaman-daftar-isi-lebih-menarik.html Terimakasih atas kunjungannya jangan lupa share Artikel ini.

Tag : Widget,