Cara Memasang Sitemap Berdasarkan Label - Tutorial kali ini memasang sitemap yang berdasarkan label, didalam nya juga terdapat pencarian nya didalam sitemap.
Sitemap ini bertujuan untuk mempermudah pengunjung untuk memperlihatkan postingan-postingan yang berada didalam Blog. Bagi sobat yang ingin memasang sitemap ini silahkan ikuti langkah dibawah.
Langkah Memasang Sitemap Berdasarkan Label
1. Masuk ke Blogger > Klik Template > Klik Edit HTML
2. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </stayle>
/* 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}3. SAVE terlebih dahulu.
Langkah selanjutnya memasang didalam laman blog sobat
masukkan kode dibawa ini didalam HTML jangan di COMPOSE:
<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://googledrive.com/host/0B0ja58ELXA-EcjdVLWZ6Tm51QVk" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>Sekarang Publikasi dan lihat hasilnya.
Sekian untuk Tutorial Cara Memasang Sitemap Berdasarkan Label. Terimakasih
0 comments: