Cara Membuat Sitemap Keren dan Responsive

Cara Membuat Sitemap Keren dan Responsive

 Cara Memasang Sitemap di Blogspot yang keren dan juga responsive kali ini sudah saya aplikasikan di blog saya ini dan terbukti bagus(menurut saya..hehehe).

Tutorial ini saya dapatkan dari hasil tanya dari mbah Gogel dan akhirnya saya terdampar diblognya mas Lutfy Zein dan saya terapkan diblog ini.
Untuk tutorial aslinya bisa sobat lihat diblog beliau.

Menurut mas WikipediaSitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dengan mudah mendeteksi konten di dalamnya. Dalam sistem sitemap ini pengguna dapat melakukan submit peta web berbasis XML langsung ke Google yang akan membantu Google mengindeks halaman web dengan mudah.

Pada dasarnya, langkah yang harus diterapkan oleh pengguna sitemap adalah:

  1. Gunakan perangkat lunak untuk menciptakan peta situs (sitemap) dalam format XML Google. 
  2. Integrasikan dan unggah ke situs web.
  3. Beri tahukan URL web ke Google.
Okelah....untuk mempersingkat waktu anda baca(karena anda super sibuk :D) maka inilah tutorial membuat sitemapnya. Untuk demonya bisa anda lihat disini.

Update Pertama : karena template blog ini baru saya ganti, maka tampilan sitemapnya agak kacau. Untuk lihat demonya bisa lihat disini.
Update ke 2: Sudah beberapa bulan script ini tidak bisa dipakai karena host javascriptnya hilang/ganti.
Tile Javascript yang tidak bisa dipakai adalah https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8 tetapi setelah mencari kesana kemari ditambah bingung karena memang newbie, maka akhirnya saya menemukan script penggantinya dan saya upload sendiri supaya lebih aman.
silahkan dipakai dan semoga berhasil bos... 


Hati hati menggunakannya karena kalau sitemapnya jadi bagus saya tidak tanggung jawab.
  1. Buka blog yang akan anda pasang sitemap.
  2. Buat laman baru
  3. Terus ganti mode penulisan di html(letaknya dikiri atas bos...)
  4. Paste kode berikut ini.
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
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;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,center 60,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<div id="toc">
<script src="
http://yourjavascript.com/19011761625/scriptsitemapbaru.js" type="text/javascript"></script>
<script src="http://nurharyono.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Ganti huruf yang berwarna merah dengan alamat blog sobat ya...
Kalau tidak diganti nanti yang keluar sitemap blog saya bos... :D

Kalau masih bingung bisa tanya via komentar dibawah.


 
Share on Google Plus

About Mas Nur Haryono

26 komentar:

  1. work mas,... good info :) makasih

    BalasHapus
  2. keren gan sitemaps nya ijin make ya :)

    BalasHapus
    Balasan
    1. Monggo silahkan mas bro... ngomong ngomong blog nya keren juga ya... :D

      Hapus
  3. ijin comot mas
    nice infoh......... :)

    BalasHapus
  4. Izin Coba Bro .. , jalan jalan juga ke tempat ane bro :D http://www.fixfav.top/

    BalasHapus
  5. wah keren om responsive banget makasih banyak ya ^^
    main-main jg om di blog ane

    BalasHapus
  6. Mantab kak, bisa saya coba dulu..!!
    Trims yah.

    BalasHapus
  7. ijin makai mas,, semoga cocok buat blog ane portalinfoandroid.com

    BalasHapus
  8. Sudah saya coba di blog saya tapi kok ga berfungsi ya mas? Kira2 apa ya mas masalahnya?

    BalasHapus
  9. Ok mas, sudah berfungsi... terima kasih..

    BalasHapus
  10. site map gunanya untuk apa ya gan. sudah coba browsing tapi gk paham jga

    BalasHapus
  11. Good Jobs Mas.. KEREN banget sitemapnya.. Thanks ya..

    and 1 lagi Mas,. ijin make ya :) :D

    BalasHapus
  12. terimakasih tutorialnya, perlu nih buat blog

    BalasHapus
  13. Keren mas, izin memakai diblog.

    Thanks
    www.bisapapua.blogspot.com

    BalasHapus
  14. Makasihh byk om, lgsg work otomatis artikelnya di daftar isi yg saya buat :)

    BalasHapus
  15. lagi browsing2 cara bikin sitemap keren buat blogku,eh ketemu punya njenengan,pas dipasang keren habis,ioa sorry mas yo,tanpa izin lngsung comot,thanks ya mas bro,

    BalasHapus
  16. Makasih mas..
    bisa diterapin di blog ane.. http://oprekersnewbie.blogspot.co.id/

    BalasHapus
  17. izin coba sitemap nya mas ya .. :D

    BalasHapus
  18. keren gan, ijin coba buat blog sy http://www.blog.diversan.xyz

    BalasHapus
  19. izin nyomot ya gan buat blog ane tokuisme.blogspot.com :D

    BalasHapus
  20. thx you infonyab www.sukogidri.com

    BalasHapus
  21. ini yang saya cari makasi mimin :)

    BalasHapus

Silahkan berkomentar yang bijak. Tukang jual obat kuat dilarang berkomentar karena mengganggu pembaca yang lainnya.