Cara Buat Sitemap Ramah SEO Di Blogger Ala Arlina Design

Sebelumnya, saya ingin berterima kasih kepada http://www.arlinadzgn.com yang telah berbaik hati membagikan cara membuat sitemap sederhana untuk blog.

Oke kali ini IDNoobers akan memberikan tutorial memasang sitemap di Blogger. Untuk pendahuluan, Sitemap (Peta Situs) bisa diartikan sebagai daftar isi dari sebuah website dimana halaman sitemap ini nantinya diharapkan bisa membantu para visitor ketika mencari artikel di website yg didtuju.

Manfaat sitemap sendiri salah satunya yaitu sebagai atribut wajib sebuah blog. Ada banyak sumber yang mengatakan bahwa sebelum mendaftar menjadi Publisher Google Adsense, ada baiknya blog terlebih dahulu dicek kelengkapan atributmya, salah satunya yaitu Sitemap.

Oke cukup basa - basinya, langsung saja ke intinya.

1. Buat halaman/page baru terlebih dahulu, dengan cara Dashboard Blogger > Pages/Halaman > New Pages/Halaman Baru

2. Lalu pada menu HTML, tambahkan script berikut.

<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://arlina-design.googlecode.com/svn/blogtoc.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>
<b:if cond="data:blog.pageType == &quot;http://www.arlinadzgn.com/p/sitemap.html&quot;"> <style scoped="" type="text/css">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style> </b:if>

Catatan : Ganti http://www.arlinadzgn.com ke url halaman blog anda

3.  Lalu buka Template > Edit HTML > lalu tambahkan semua script ini sebelum kode </style>

Baca Juga

• Dongkrak Traffic Website Kamu Dengan 10 Tips Dibawah Ini
• Cara Buat Artikel Terkait Otomatis Di Postingan Ala Arlina Design
• Mencerdaskan Masyarakat Dengan Budaya Membaca

/* CSS Sitemap */
#bp_toc {
background: transparent;
width: 100%;
color: #999;
margin-top: 10px;
margin: 0 auto;
padding: 5px;
}

.toc-header-col1 {
padding: 15px!important;
line-height: 15px;
background-color: #f56954;
width: 250px;
transition: all 0.3s ease-in-out;
}

.toc-header-col2 {
padding: 15px!important;
line-height: 15px;
background-color: #2c323c;
width: 75px;
transition: all 0.3s ease-in-out;
}

.toc-header-col3 {
padding: 15px!important;
line-height: 15px;
background-color: #252a32;
width: 125px;
transition: all 0.3s ease-in-out;
}

.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {
opacity: 0.9;
}

.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: 15px;
text-transform: lowercase;
text-decoration: none;
color: #fff;
font-family: 'Viga';
font-weight: 400;
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 {
padding: 10px;
font-size: 92%;
;transition: all 0.3s ease-in-out;
}

.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {
background: #fdfdfd;
}

.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {
padding: 10px;
font-size: 92%;
}

.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {
padding: 10px;
font-size: 92%;
}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
text-decoration: none;
color: #666;
transition: all 0.3s ease-in-out;
}

.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover {
color: #f56954;
}

span.toc-note {
padding: 10px;
margin: 10px 0;
display: inline-block;
background: #fff;
color: #666;
}

#bp_toc table {
width: 100%;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;
border-color: transparent;
}

#bp_toc tr:nth-child(even) {
background: #fafafa;
}

#bp_toc tr:nth-child(odd) {
background: #f5f5f5;
}

4. Lalu simpan template, mudah bukan?

Terima kasih telah berkunjung, semoga artikel ini dapat bermanfaat bagi kita semua.