Cara Bikin Sitemap HTML Sederhana Untuk Blogger

Discussion in 'Search Engine Optimization' started by mugianto, Apr 14, 2016.

  1. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    [​IMG]
    Selamat sore buat Ajeng Bersosial terlebih dahulu baru buat Aden Bersosial hehe :p
    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:
    [​IMG]
    Yang panah hitam tuh buat bikin Laman Barunya.*malu2*

    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:
    [​IMG]
    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*bagus*

    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>
    *bingung*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

    *halo*
    Mugianto
     
  2. Tantowi

    Tantowi Active Member

    Joined:
    May 9, 2015
    Messages:
    635
    Likes Received:
    24
    Trophy Points:
    48
    Infonya bagus gan meski ane udah tau sihh hehe :D :D
     
  3. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    sip Den klo dah tau hehehe
     
  4. Angkasa Bali

    Angkasa Bali Member

    Joined:
    Oct 20, 2014
    Messages:
    787
    Likes Received:
    72
    Trophy Points:
    28
  5. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Semoga sukses Den salam bersosial
     
  6. ibrahimovic

    ibrahimovic Member

    Joined:
    Apr 19, 2016
    Messages:
    20
    Likes Received:
    1
    Trophy Points:
    8
    dicoba dulu gan di test di test hahaha
     
  7. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    semoga berhasil den prakteknya
     
  8. Bloger jatim

    Bloger jatim New Member

    Joined:
    Aug 19, 2016
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    1
    Ada demonya ngak gan
     
Loading...

Share This Page