Sitemap Keren Dengan Thumbnail Pada Blog

Sahabat Kabeka || Sitemap adalah bagian penting pada sebuah Website atau Blog. Sitemap ini adalah halaman yang memuat artikel-artikel yang sudah di publikasikan sebelumnya..

Seperti yang kabeka terangkan sebelumnya pada "Cara Membuat Sitemap Tertata Rapi". bahwa Sitemap adalah halaman yang diibaratkan sebuah "Daftar isi" pada sebuah buku untuk memudahkan pembacanya menemukan judul pembahasan yang tepat sesuai keinginan :)

Oke tentunya berbeda dengan yang kabeka bagikan pada "Cara Membuat Sitemap Tertata Rapi".

Kali ini yang kabeka bagikan adalah "Sitemap Menggunakan Thumbnail" yang tentunya keren sob :)

    || Bagaimana penampakkannya ?? bisa dilihat dibawah ya sobat :)

oke pada sitemap kali ini bukan hanya judul sob yang ditampilkan,(sesuai dengan judulnya dong) sitemap ini juga menampilkan gambar dan gambaran singkat tentang blog sobat lho :)

tidak hanyaitu, sitemap ini dilengkapi "Filter by Category/Label" sampai "Search artikel" juga lho sob :) bagaimana keren bukan ?? :) oke jika sobat setuju sama kabeka yang bilang keren silahkan dilihat sob tutorial pemassangan berikut :)

Awesome Sitemap With Thumnail

Pertama yang sobat harus lakukan ialah menambah CSS berikut ke template sobat.. caranya silahkan masuk pada "Template" lalu pilih "Edit Template"

Lalu bila Kode Box terlah terbuka cari kode  ]]></b:skin> atau </style> lalu pastekan kode berikut berikut diatasnya.. boleh diatas kode  ]]></b:skin> atau </style> sobat.. lalu jangan lupa pilih save sobat :)

/* CSS Sitemap */
#table-outer table{width:100%;margin:0;padding:0}
#table-outer input,#table-outer select{padding:4px;font:inherit;border:2px solid #ecf0f1;width:170px;box-sizing:border-box}
#table-outer select{cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#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:#fff;border:1px solid #f9f9f9;height:133px}
#feedContainer img{float:left;margin:0 8px 0 0;max-width:100%;border:1px solid #f9f9f9;padding:2px}
#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:#fff;text-decoration:none;background-color:#444;padding:5px;width:95%;margin:0 auto;transition:all 0.3s linear}
#feedNav a,#feedNav span:hover{background-color:#333;transition:all 0.3s linear}
#feedContainer .date{display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px}
#feedContainer .date .dd{font-size:9px;line-height:5px;font-weight:bold}
#feedContainer .date span{display:inline-block;line-height:5px;text-align:center;margin-left:5px}

Setelah itu buat halaman baru *atau sobat bisa mengedit halaman sitemap sebelumnya*
Pilih Laman >> Laman Baru

Klik Laman Baru

Isi dengan judul Sitemap atau daftar isi.. pilih metode penulisan ke "HTML" lalu pastekan kode berikut.. dan silahkan di publish sobat...

<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>
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://arlina-design.googlecode.com/svn/tocs.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>

oke selesai sudah,, sekarang silahkan sobat view halaman Sitemap atau Daftar Isi yang sobat buat tadi..

kira-kira hasilnya akan seperti inilah :)

dan selesai sudah artikel kabeka kali ini.. sekian dari kabeka "Awesome Sitemap With Thumbnail"... semoga bermnafaat dan salam blogger....

*eittss... jangan lupa share juga ya :) salam...

Baca Juga:

Related Posts:

Tweet