√ Cara Memasang Sitemap Keren Ala Arlina Design

Cara Memasang Sitemap Keren Ala Arlina Design

6/22/2017

Sitemap merupakan menu 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 situs tersebut. Tampilan peta situs yang menarik dan enak dipandang mata tentu 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. Sitemap ini saya adopsi dari salah satu template Arlina Design yang saya gunakan pada blog yang lain. Tampilannya benar-benar unik karena dilengkapi dengan kategori dan search box. sehingga pengunjung bebas memilih mau menggunakan kotak telusur atau label pencarian.

Cara Memasang Sitemap Keren Ala Arlina Design

1. Login ke blogger > Klik template kemudian edit html > Cari kode ]]></b:skin> atau </style> dengan bantuan CTRL + F > Salin kode di bawah ini tepat diatas kode tersebut

/* 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}

2. Simpan template > Buat laman statis baru > Isi judulnya dengan nama sitemap > Ganti mode compose ke mode html > Salin kode di bawah 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>