Cara Membuat Sitemap Keren SEO dan Responsive Di blog

Cara Mudah Membuat Sitemap atau Daftar Isi Blog Otomatis Per Label Keren, SEO Friendly Dan Responsive di Blog - Sitemap atau biasa disebut dengan daftar isi adalah salah satu halaman statis yang wajib di miliki oleh seluruh blog.

Karena dengan adanya halaman statis sitemap atau daftar isi ini di blog, para pengunjung blog akan mudah mencari artikel yang sedang mereka cari langsung melalui halaman sitemap atau daftar isi ini. Jadi tidak perlu mencari satu-persatu dari halaman homepage blog.

Selain dapat memudahkan para pengunjung blog, dengan adanya sitemap atau daftar isi ini juga salah satu syarat diterimanya blog oleh Google Adsense. Karena pihak Adsense hanya akan menerima blog atau website yang sudah sempurna dari sisi menu navigasi, footer dan halaman statis yang ada di blog atau website tersebut.

Kalau blog atau website dengan menu navigasi dan halaman yang tidak sempurna (salah satunya tidak terdapat menu daftar isi) kemungkinan besar blog kamu akan ditolak Google Adsense.

Bahkan bukan hanya menolak blog yang tidak sempurna, namun blog dengan menu navigasi dan halaman statis yang tidak rapih pun kemungkinan akan ditolak.

Maka dari itu di artikel kali ini saya akan memberikan tutorial sederhana cara membuat halaman statis sitemap atau daftar isi yang keren, responsive dan pastinya baik untuk SEO. Walaupun di internet sudah banyak yang membagikan tutorial seperti ini, di blog Dzuhalah juga tidak mau kalah dengan blog yang lainnya.

Sitemap atau daftar isi yang saya berikan memiliki desain dan tampilan yang unik, keren, elegan dan rapih dan bisa dibilang mirip dengan sitemap atau daftar isi yang digunakan oleh arlinacode.com. Kalau kamu mau lihat demo dari sitemap atau daftar isi yang saya buat, kamu bisa cek di halaman demo sitemap yang sudah saya buat.

Kalau kamu tertarik untuk membuat halaman statis sitemap atau daftar isi yang saya buat ini di blog kamu, kamu bisa ikuti langkah-langkah dibawah ini. Caranya gampang kok.

Cara Membuat Sitemap atau Daftar Isi Blog Keren dan Responsive (SEO Friendly) Di Blog

1. Pertama-tama kamu masuk dulu ke dashboard blogger kamu
2. Kemudian masuk ke menu halaman dan buat halaman statis baru
3. Setelah itu pindah ke menu penulisan mode HTML bukan mode Compose
4. Setelah itu salin dan tempel kode dibawah ini ke dalam postingan tadi dalam mode HTML

   <div class="separator" style="clear: both; text-align: center;">
   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEm8JfZzRMGJCb87Xcs1M8B7TTxJqeAihG4oBLL6FYxpnE0000LIyjrXRpH7D-6hmYiismP0dzDFCSiXvCHIgTk_JSVp0SEv8noT89Do7QDCRoGfhnTHYOVxMWWkB90Bpyhw96jYsfrWxx/s2000/Sitemap+Daftar+Isi+Dzuhalah.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEm8JfZzRMGJCb87Xcs1M8B7TTxJqeAihG4oBLL6FYxpnE0000LIyjrXRpH7D-6hmYiismP0dzDFCSiXvCHIgTk_JSVp0SEv8noT89Do7QDCRoGfhnTHYOVxMWWkB90Bpyhw96jYsfrWxx/s2000/Sitemap+Daftar+Isi+Dzuhalah.png" title="Sitemap Dzuhalah"/></a></div>
   
   <div id="bp_toc">
   </div>
   <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
   <style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.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:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.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-weight:500;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 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#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);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
   #bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
   #bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
   @media screen and (max-width:768px) {
   #bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
   .post-body a img{box-shadow:0 0x 6px rgba(0,0,0,0,5);border-radius:10px}.post-body a img:hover{animation:ignielShake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes ignielShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}@-webkit-keyframes ignielShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
   </style>

5. Kalau sudah klik publish atau terbitkan halaman posting tadi dan lihat hasilnya.

Result   

Sitemap atau daftar isi ini mirip seperti sitemap atau daftar isi milik arlinacode.com. Dengan menampilkan seluruh postingan yang ada di blog. Dan satu lagi, kode diatas tidak perlu kamu ubah-ubah lagi. Karena secara otomatis akan membaca ID blog milikmu. Kecuali kalau kamu ingin merubah warna dasar dari sitemap tersebut.

Nah, itulah tutorial cara membuat sitemap atau daftar isi yang keren, responsive dan SEO friendly di blog yang dapat saya sampaikan di artikel kali ini. Semoga artikel ini bisa bermanfaat dan membantu bagi yang membutuhkan tutorial ini khususnya pemula.

M Syakir Al-Farisy Seorang Mahasiswa yang hampir lulus dari sekolah yang memberatkan diri. Suka berbagi ilmu pengetahuan dengan cara menuliskan artikel-artikel yang ada di Blog ini.

Share :