Cara mudah membuat sitemap seo keren di blogger

Tutorial membuat sitemap blog untuk mempercepat index google

Giat mengajar - Halo sobat kali ini saya akan membuat tutorial bagaimana cara membuat sitemap ( daftar isi ) untuk blog. Sebelum membuat sitemap ada baiknya kita lebih tahu tentang sitemap. Apa itu sitemap? Sitemap adalah suatu alat untuk membantu webmaster mempermudah dalam pengenalan peta situs di dalam website.

Sehingga memungkinkan mesin google lebih cepat mengcrawl atau menjelajah halaman-halaman yang ada di dalam website tersebut. Jadi pada intinya fungsi sitemap pada blog atau website untuk mempercepat index google terhadap blog yang kita miliki.

Aduh jadi muter - muter nih. Lebih baik kita kembali pada pembahasan utama yaitu membuat sitemap untuk blog. Disini saya akan membuatnya untuk blogger.

Langkah membuat sitemap blog:

1. Masuk ke blogger
2. Pergi ke tab halaman dan buat halaman baru
3. Ubah metode penulisan dari compose ke html. Lalu tempelkan kode di bawah ini

<div id="bp_toc"> Loading Sitemap. Please wait....</div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/1c3be39e/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> <b:if cond="data:blog.pageType == &quot;http://www.giatmengajar.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>

4. Setelah kode di atas sudah di tempelkan, ubah http://www.giatmengajar.com dengan alamat blog yang akan anda buatkan sitemap.
5. Simpan halaman dan publikasikan.

Saya menggunakan template vio magz hanya sampai tahap ini sitemapnya sudah jadi. Namun jika pada tahap ini sitemap yang anda buat belum  keluar, ikuti langkah selanjutnya. Dengan menambahkan sedikit kode html pada template blog anda.

Baca juga : Cara membuat contact us blog

Apabila sobat tidak mempunyai komputer dan hanya memiliki ponsel android saya sarankan untuk menggunakan aplikasi edit kode html di android ini untuk mempermudah pengeditan template dengan cara membackup template blog terlebih dahulu.

6. Untuk mengedit templatenya silahkan pergi ke tab tema dan edit html
7. Tempelkan kode di bawah ini sebelum kode </style>

• /* 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}

8. Klik simpan. Selamat kini blog anda telah memiliki sitemap

Sumber kode html yang saya dapatkan yaitu dari blognya mbak arlina dengan blog arlinadzgn.com dan jika ada sesuatu yang ingin ditanyakan silahkan sampaikan melalui kolom komentar atau langsung melalui layanan email.

Share this post