Membuat Halaman Sitemap di Blogger

Cara membuat sitemap keren di blogspot, membuat halaman daftar isi di blogspot.

Memasang JW Player pada Blogspot, Gratis !

Video JS di Blogspot dengan Video dari Google Drive

Membuat Highlighter Berwarna di Blog dengan highlight.js

Sitemap atau peta situs merupakan salah satu alat bantu dimana pengunjung situs dapat dengan mudah menjelajahi apa saja yang terdapat dalam situs kita.

Apakah setiap blog perlu memiliki sebuah sitemap ?

Tergantung siapa yang jawab, jika yang menjawab seperti saya dan rekan-rekan yang baru pertama kali mengenal blog. Sitemap merupakan hal yang asing dan tidak begitu berarti. Tapi, ketika yang menjawab para web master dan orang-orang yang sudah lama bergelut di bidang website pasti jawabannya lain.

Sedikit curcol, bahwa saya juga tergolong orang baru untuk menulis dalam sebuah blog. Pangkatnya juga masih newbie hehe.

Lantas kalau tidak perlu, mengapa anda menulis cara membuat sitemap bambang ? Ternyata, setelah saya berjelajah di berbagai situs, terkadang banyak situs yang membingungkan, dalam artian menu navigasi yang disediakan tidak mewakili dari semua konten yang ada di website tersebut. Beranjak dari hal itu, nyari-nyari di internet ketemulah dengan salah satu blog yang memberikan tutorial membuat sitemap keren di blog. Jadi yang saya share sekarang ini murni buatan orang lain tapi saya lupa blognya punya siapa, mohon maaf dengan sangat.

Cara Membuat Sitemap di Blogspot

1. Masuk blogger
2. Buat sebuah halaman baru
3. Isi Judul halaman dan deskripsi halaman
   
   
4. Masuk mode HTML dan pastekan kode di bawah ini
   

   <div class="witar">
   <script src="https://raw.githack.com/catatan-pelupa/rpl-witar/master/stmap.js"></script>
   <script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=rak_info_Load"></script>
   </div>
   <style type="text/css">.witar{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
   .witar a{color:black;}
   .witar p .rak_info_Label{background:#beccd3;color:#fff;text-decoration:none;display:block;padding:5px 0px 5px 10px;font:13px 'Arial';font-weight:bold;}
   .witar ol li{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.5em 0 .5em 2.5em;background:#beccd3;color:#fff;text-decoration:none;transition:all .3s ease-out;}
   user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
   .witar ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#beccd3;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
   .witar ol li:hover:after{left:-.5em;border-left-color:#beccd3;}
   .witar ol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
   .witar ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
   ol{counter-reset:li;list-style:none;font:12px 'Arial';padding:0;margin-bottom:2em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
   .rak_info_Postname li:nth-of-type(odd){background:#f1f3f3;}
   .new{color:red!important;font-weight:700;font-style:italic;}
   user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
   </style>

5. Klik Simpan lalu Publikasikan
6. Selamat, sitemap kalian sudah berhasil di buat

Begitulah cara membuat sitemap keren yang bisa kalian terapkan di blog personal kalian, untuk CSS nya kalian bisa manipulasi sedemikian rupa sesuai keinginan. Kurang lengkap rasanya memberikan tutorial tapi tidak dilengkapi dengan sebuah demo.

• DEMO SITEMAP