Sitemap merupakan salah satu hal yang penting dimiliki suatu Blog, mengapa? karena sitemap merupakan sebuah hal yang dapat menunjukan seluruh isi berupa artikel yang ada di suatu Blog. Dengan itu, pengunjung akan mengetahui seberapa banyak artikel Blog kita dengan labels yang ditunjukkan yang menandakan kategori artikel kita tersebut.
Nah tetapi, pada kode CSS untuk Sitemap yang saya berikan masih berwarna Biru seperti yang di Blog saya ini. Tetapi kalian jangan khawatir! kalian bisa mengubah warna tersebut dengan mengganti kode warna Biru pada kode diatas dengan kode HTML warna sesuai yang kalian inginkan untuk mengganti Background nya, dan mengganti kode warna Kuning untuk mengganti judul sitemap tersebut. Dengan itu kalian dapat menyesuaikan warna sesuai dengan tema blog kalian.
Kode Script ini saya dapatkan dari empu dari template ini, dan saya ucapkan terima kasih kepada Mbak Lina
Sekian tutorial dari saya, semoga bermanfaat.
Selain memudahkan pencarian artikel, kita juga jadi tidak perlu memasang widget 'Arsip Blog' yang dikenal memiliki waktu yang lama untuk memuat nya.
Berikut akan saya sajikan cara membuat Sitemap yang responsif di Blogger:
1. Buka Template > Edit HTML
2. Cari kode </style>
3. Copy kode dibawah ini, lalu paste tepat diatas kode </style>
3. Menuju Tata Letak > Tambah Gadget > HTML/Javascript > Copy dan Paste kode berikut/* CSS Full Sitemap */#bp_toc {background:#0F4AB9;color:#666;margin:0 auto;padding:5px;}span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#F6F5F2;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;}
<div id="bp_toc" style="max-height: 1300px; overflow-x: auto; overflow: scroll;">
</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&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>4. Simpan, dan Lihat Hasilnya!!
Nah tetapi, pada kode CSS untuk Sitemap yang saya berikan masih berwarna Biru seperti yang di Blog saya ini. Tetapi kalian jangan khawatir! kalian bisa mengubah warna tersebut dengan mengganti kode warna Biru pada kode diatas dengan kode HTML warna sesuai yang kalian inginkan untuk mengganti Background nya, dan mengganti kode warna Kuning untuk mengganti judul sitemap tersebut. Dengan itu kalian dapat menyesuaikan warna sesuai dengan tema blog kalian.
Kode Script ini saya dapatkan dari empu dari template ini, dan saya ucapkan terima kasih kepada Mbak Lina
Sekian tutorial dari saya, semoga bermanfaat.