Cara
membuat Site-map Mudah dan Bagus
Nah bagi anda bloger atau yg
suka tentang web dan blog pastinya tau dong apa itu Site-Map? Site-Map
adalah Struktur Denah maupun Map yang berisi tentang konfigurasi konten maupun
data artikel sebuah website atau blog secara menyeluruh didalam bentuk tautan
link yang mempunyai relevansi dan keterkaitan yang kuat dan fokus.
Nah Karena sudah mengerti
dan tahu apa itu sitemap. Sekarang kita cus ke Fokus pembicaraan, Nah ilmu yang
saya dapat dari “Arlinadzgn.com” ini
adalah tutorial membuat sitemap yang baik, didalam penerapannya dan langkahnya
yg mudah.
Langsung saja, Ke intinya
yah J
Ikutilah langkah berikut:
1.
Buka Blogger anda(account) → Buka Laman → Lalu Buat Laman Baru → dan
Terapkan
scrip kode di bawah ini kedalam Tab HTML anda.
<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&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
Dan
Kemudian Berilah Judul entri sesuai kemauan anda, Saya sarankan sesuai dengan
Tujuan kita tdi yaitu “Site-Map” lalu publikasikan laman ini.
2.
Kemudian kita beralih kedalam Template
Caranya: Klick Template di dashboard Blogger anda → Kemudian Edit Template→ Tekan F3 atau Ctrl+F untuk mencari Kode ini </style> dan Letakkan Kode Scrip Html ini Tepat di atas 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;}
Anda dapat Merubah font Site-Map ini dengan merubah scrip → ;font-family
Sesuai dengan kemauan anda.
Terpenting dan Yang Paling
akhir Jangan Lupa untuk Menyimpan settingan ini..dengan men-savenya. Maka hasilnya akan menjadi seperti ini:
Nah Mudah bukan? Sekarang anda
dapat mengaplikasikannya ke Blog sobat.
Thanks to: www.arlinadzgn.com
