Cara Pasang Sitemap Keren Untuk Blog


Menambahkan Sitemap di blog adalah salah satu cara untuk mempermudah pengunjung dalam mencari sebuah artikel yang diinginkan pada blog kita. Sitemap juga digunakan untuk mengurutkan artikel yang telah kita buat berdasarkan kategori sesuai tema pada blog. Keuntungan lainnya yaitu dapat di daftarkan ke Google Webmaster dan salah satu menu wajib sebelum mendaftarkan ke google adsense. Cara menambahkan sitemap pada kali ini saya ambil dari blog mbak arlina.

Lalu bagaimana cara penerapan sitemap ini kedalam blog kita, Langsung saja kita praktekkan bersama :

1. Buka Blogger
2. Pilih Menu Laman - Buat Laman Baru - Beri Judul Sitemap - Pilih Tab HTML
3. Copy dan Paste Script di bawah ini

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>


4. Kemudian Save dan Publikasikan
5. Masuk ke menu Tema - Edit HTML
6. Copy dan Paste Script dibawah ini tepat sebelum 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;}


7. Simpan template dan cek hasilnya


Apabila artikel pada blog anda sudah banyak maka anda juga dapat mengatur ketinggian tabel sitemap nantinya :


<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>


Silahkan atur ketinggian maksimal yang anda inginkan pada bagian max-height:1300px dapat diganti sesuai selera masing-masing


Sumber : http://www.arlinadzgn.com/2015/03/cara-menambahkan-widget-sitemap-di-blog.html

Click to comment