Cara Membuat Sitemap Keren Ala Arlina Design

By HP Yitno

Sitemap merupakan menu wajib yang harus ada pada sebuah situs atau blog. Dengan adanya menu ini para pembaca atau pengunjung yang datang dari mesin pencari bisa leluasa melihat secara global artikel apa saja yang ada dalam website tersebut. Tampilan peta situs yang menarik dan enak dipandang mata akan mampu membuat pembaca betah berlama-lama di situs kita. Imbasnya pageview kita juga akan meningkat tajam.

Di indonesia sendiri sitemap lebih dikenal dengan sebutan Peta Situs atau Daftar Isi. Dan biasanya jenis sitemap yang sering dipakai para blogger mania adalah berdasarkan label tertentu. Saya sendiri masih menggunakan jenis itu pada website ini. Tutorialnya juga telah saya buat dengan judul Cara Membuat Sitemap di Laman Mandiri Blogspot.

Tapi jika anda tidak tertarik dengan model itu, masih ada pilihan lainnya yang nggak kalah menarik. Sitemap ini saya adopsi dari template arlina design yang saya gunakan pada situsku yang lain. Tampilannya benar-benar unik karena dilengkapi category dan search box. sehingga pengunjung bebas memilih mau menggunakan kotak telusur atau label pencarian.

Berikut tutorial lengkap cara bikin peta situs unik dan menarik ala arlina design:
1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F
4. Salin kode dibawah ini tepat diatas kode tersebut

/* CSS Sitemap 2 */
#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;}

5. Simpan template
6. Buat laman mandiri atau static page baru
7. Isi judulnya dengan nama sitemap
8. Ubah mode compose ke mode html
9. Salin kode dibawah ini ke dalamnya

<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>

10. Klik publish atau terbitkan
11. Selamat sitemap anda sudah jadi

Itulah langkah-langkah membuat sitemap sederhana ala arlina design yang saya bagikan. Ketika anda menggunakan template orang lain dengan benar dan mau sedikit bergelut dengan kode html, anda pasti akan menemukan ilmu yang tidak akan pernah anda dapatkan di tempat lain. Semoga tutorial simple ini bermanfaat bagi blogger mania.

Demo Click Here

SHARE :