Cara Bikin Sitemap HTML Sederhana Untuk Blogger

Selamat sore buat Ajeng Bersosial terlebih dahulu baru buat Aden Bersosial hehe
​

Kali aja ada yang belum tahu cara buat sitemap HTML otomatis di Blogger makanya saya buat tread ini.

Gunanya buat apa Sitemap HTML, kan udah ada Sitemap versi xml ataupun feed?

Lagi-lagi buat kepuasan para pengunjung Blog Aden ataupun Ajeng Bersosial, dan juga sitemap merupakan salah satu saran yang diberikan di Panduan Webmaster Google Search Console.

Yuk kita praktekin:
Biasa masuk dulu ke Dashboard Blogger >>> Trus bikin Laman Baru disana, kayak gambar ini:

​

Yang panah hitam tuh buat bikin Laman Barunya.

Kemudian kita buat titlenya terlebih dahulu, terserah Ajen, Aden mau namanin apa itu titlenya, kaya Sitemap Manual atau Peta Situs, ataupun Daftar Isi, Sak Karep Mu.

Trus ganti ke menu editingnya ke menu HTML (panah hitam), and jangan lupa kasih sedikit penjelasan (panah biru) seperti penampakan di bawah:

​

Sekarang kita masukin dah nih 2 script di bawah ini di laman tersebut:

Code:

<script src="https://googledrive.com/host/0BxxpL9cw7zsvM3FtTUZBUHNyVjQ"></script>
<script src="http://<span style="color:#ff0000;">alamat-blog-kalian</span>/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Jangan lupa ganti alamat blognya (harusnya textnya warna merah diatas, tapi gak nampak Y_Y) dengan alamat blog kalian, lalu kita publish (publikasikan). Jadi deh sukses gitu aja udah kelar hehehe

Tapi kurang enak ya kalo gak dihias, coba kita hias sedikit dengan memasukan CSS didalamnya, Copy aja kode di bawah ini:

Code:

<style>
.post-body{
width:99%;
margin:5px auto; 
-webkit-box-shadow:14px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:14px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:14px 4px 8px 2px rgba(0,0,0, 0.2);
}
.post-body p{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.post-body p a{
color:#AA80FE;
-webkit-animation: warna 3s 1s forwards infinite;
   -moz-animation: warna 3s 1s forwards infinite;
    -ms-animation: warna 3s 1s forwards infinite;
     -o-animation: warna 3s 1s forwards infinite;
        animation: warna 3s 1s forwards infinite;
}
.post-body p a:hover{
color:#FF3300;
}
@keyframes warna {
  10% {
    color: red;
  }
  20% {
    color: yellow;
  }
  30% {
    color: turquoise;
  }
  40% {
    color: gold;
  }
  50% {
    color: orange;
  }
  60% {
    color: darkblue;
  }
  70% {
    color: silver;
  }
  80% {
    color: green;
  }
  90% {
    color: blue;
  }
  100% {
    color: purple;
  }
}
.post-body ol{
font-weight:normal;
margin-left: 20px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.post-body li{
border-bottom: #ddd 1px dotted;
margin-right:5px;
}
.post-body li:hover{
background:##D4BFFE;
}
</style>

Paste kode di atas tepat di atas script yang pertama kali kita cantumkan di awal tadi, nanti susunannya kayak ini nih DEN, Jeng:

Code:

<style>
.post-body{
width:99%;
margin:5px auto; 
-webkit-box-shadow:14px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:14px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:14px 4px 8px 2px rgba(0,0,0, 0.2);
}
.post-body p{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.post-body p a{
color:#AA80FE;
-webkit-animation: warna 3s 1s forwards infinite;
   -moz-animation: warna 3s 1s forwards infinite;
    -ms-animation: warna 3s 1s forwards infinite;
     -o-animation: warna 3s 1s forwards infinite;
        animation: warna 3s 1s forwards infinite;
}
.post-body p a:hover{
color:#FF3300;
}
@keyframes warna {
  10% {
    color: red;
  }
  20% {
    color: yellow;
  }
  30% {
    color: turquoise;
  }
  40% {
    color: gold;
  }
  50% {
    color: orange;
  }
  60% {
    color: darkblue;
  }
  70% {
    color: silver;
  }
  80% {
    color: green;
  }
  90% {
    color: blue;
  }
  100% {
    color: purple;
  }
}
.post-body ol{
font-weight:normal;
margin-left: 20px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.post-body li{
border-bottom: #ddd 1px dotted;
margin-right:5px;
}
.post-body li:hover{
background:##D4BFFE;
}
</style>
<script src="https://googledrive.com/host/0BxxpL9cw7zsvM3FtTUZBUHNyVjQ"></script>
<script src="http://alamat-blog-kalian/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Sekarang tinggal di simpan lalu Publish ulang deh, jangan lupa untuk di cek ya ada yang janggal apa gak pada hasil laman yang baru kita buat tadi.

Soal warna kalian bisa ganti sendiri sesuai selera, kalo soal kendala kode warna yang kurang hapal, bisa cek Kode Warnanya di sini : Klik Den/Jeng.

Itu aja sih yang mau saya bagi, moga2 aja bermanfaat ya Den, Jeng Bersosial, Kalau mau lihat versi Blognya bisa lihat di sini: Pelan-pelan Pijitnya.

Kalau ada salah-salah pengetikan atau kendala, mohon dimaafin ye, maklum manusia tempatnya salah dan lupa, jreennnng

Selamat Mencoba


Mugianto

 

Infonya bagus gan meski ane udah tau sihh hehe

 

sip Den klo dah tau hehehe

 

mantap gan ane coba dulu makasi gan

 

Semoga sukses Den salam bersosial

 

dicoba dulu gan di test di test hahaha

 

semoga berhasil den prakteknya

 

Ada demonya ngak gan