Cara MembuatDaftar Isi Keren Dengan Thumnail – daftar ini adalah sebuah halaman yang berisi semua link yang mengarah ke sebuah Postingan. Halaman Daftar Isi ini adalah salah satu halaman yang wajib ada di sebuah Blog atau website. Fungsi dari Daftar Isi adalah memudahkan pengunjung untuk mencari semu postingan di blog atau website dalam satu halaman sekaligus, jadi pengunjung tidak akan kerepotan mencari satu per satu postingan di blog sobat nantinya. Keuntungan yang di dapat dari blogger adalah menambah Jumlah pengunjung yang banyak pastinya, hal in di karena kan setiap klikkan Link akan di hitung sebagai tambahan Page View.
Maka dari itu kali ini saya akan berikan cara membuat Sitemap atau Daftra ini di blog atau Website. Yang unik dari Daftar ini adalah sangat responsive atau menyesuaikan dengan semua Label yang ada di blog sobat, jadi pengunjung nanti bisa mencarinya di kotak atau kolom yang sudah di sediakan. Hal lainnya yang tidak kalah menariknya lagi adalah terdapat Thumnail atau daftar Postingan secara acak dengan gambar di bagian paling bawah daftar isi, sehingga akan tambap sangat menarik. Bagi sobat yang ingin mencobanya atau ingin mempelajarinya silahkan simak cara membuatnya berikut ini.
1. buka Blog Sobat > masuk menu “Laman” > Buat Laman Baru > Masuk Menu Tab HTML (bukan compose) > Salin kode di bawah ini dan letakkan di dalam laman yang baru sobat buat tadi.
<div id= table-outer”>
<table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id=”orderFeedBy”><option selected=”” value=”published”>New post</option><option value=”updated”>Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id=”labelSorter”><select disabled=””><option selected=””>Loading…</option></select></span></td></tr>
<tr><td><label>Search by keyword : </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://cdn.rawgit.com/Arlina-Design/FlamingTree/master/sitemap-tab.js” type=”text/javascript”></script>
<style scoped=”” type=”text/css”>
#comments {display:none;}
</style>
2. Setelah selesai simpan dan Publikasikan. Sekarang kita akan membuat tampilannya dengan kode CSS di bagian Template HTML blog sobat, caranya seperti di bawah ini.
buka Blog Sobat > masuk menu “Template” > Edit HTML > Salin kode di bawah ini dan letakkan di atas kode </style>
/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:’Open Sans’;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:’Open Sans’;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
3. Setelah selesai, simpan Template dan Lihat hasilnya. Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka halaman Sitemap atau Daftar ini sudah tampil dengan sempurna di blog sobat.
Demikianlah tutorial mengenai Cara Membuat Daftar Isi Keren Dengan Thumnail, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil menerapkan Tutorial ini jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.
0 Komentar