Membuat Halaman Daftar Isi Lebih Menarik
Membuat Halaman Daftar Isi Lebih Menarik, akan mempermudah pengunjung melihat artikel artikel kita..
Dalam tutorial kali ini saya akan memberikan cara membuat daftar isi dengan tampilan yang lebih menarik. dan juga dilengkapi dengan fitur sortir berdasarkan label dan posting yang telah diperbaharui. Baca juga : Plants vs. Zombies 2 2.6.1 APK for Android
Demo
Langkah pemasangannya pada blogspot..
1. Pada dasboard Blogger anda Pilih Menu Template dan pilih lagi Edit Template
2. Tekan CTRL+f dan cari kode </style> atau ]]></b:skin> .
3. Salin CSS Berikut dan Letakkan diatas kode </style> atau ]]></b:skin> .
#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;
}
4. Klik Simpan Template
5. Kembali ke dasboard Blogger
6. Sekarang pilih menu Laman
7. Dan buat Laman Baru
8. Silahkan Beri Judul laman
9. Salin kode berikut dan letakkan Pada markup HTML Post bukan Compose
<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>
Simpan dan lihat hasilnya,
Selamat Mencoba
Dalam tutorial kali ini saya akan memberikan cara membuat daftar isi dengan tampilan yang lebih menarik. dan juga dilengkapi dengan fitur sortir berdasarkan label dan posting yang telah diperbaharui. Baca juga : Plants vs. Zombies 2 2.6.1 APK for Android
Demo
Langkah pemasangannya pada blogspot..
1. Pada dasboard Blogger anda Pilih Menu Template dan pilih lagi Edit Template
2. Tekan CTRL+f dan cari kode </style> atau ]]></b:skin> .
3. Salin CSS Berikut dan Letakkan diatas kode </style> atau ]]></b:skin> .
#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;
}
4. Klik Simpan Template
5. Kembali ke dasboard Blogger
6. Sekarang pilih menu Laman
7. Dan buat Laman Baru
8. Silahkan Beri Judul laman
9. Salin kode berikut dan letakkan Pada markup HTML Post bukan Compose
<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>
Simpan dan lihat hasilnya,
Selamat Mencoba
Membuat Halaman Daftar Isi Lebih Menarik
7 Responses to "Membuat Halaman Daftar Isi Lebih Menarik"
kebanyakan daftar isi tampinannya membosankan jadi orang malas membuka daftar isi, kalo lebih menarik bisa menambah trafik juga ya karena artikel yang lain dilihat
memang keren gan tapi agak ribet
ntar di coba mas caranya
bisa di coba ini mas di blog saya yang lain buat exsperiment hehehe...
betul mbak dewi elsawati. .
ribet nya dimana gan?
iya mas, coba aja mas
Notes :
- Harap Berkomentar Sesuai Dengan Judul Bacaan
- Tidak diperbolehkan Untuk Mempromosikan Barang Atau Berjualan
- Bagi Komentar Yang Menautkan Link Aktif Dianggap Spam
- Silahkan Follow [ Join With us ] 100% saya Akan Follow back