Cara Membuat Sitemap Keren dan Responsive di Blog

Cara Membuat Sitemap Keren dan Responsive di Blog - Hallo sobat Kembali lagi dengan Fariz. Kali ini Fariz akan memberi Tutorial Cara Membuat Sitemap Keren dan Responsive di Blog. Bagi sobat yang tidak tahu apa itu Sitemap , Menurut Mbah Sitemap adalah 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 :
  • Gunakan perangkat lunak untuk menciptakan peta situs (sitemap) dalam format XML Google.
  • Integrasikan dan unggah ke situs web.
  • Beri tahukan URL web ke Google.

Oke Berikut adalah Tutorial Cara Membuat Sitemap Keren dan Responsive di Blog :

Cara Membuat Sitemap Keren dan Responsive di Blog

1. Sobat Login di blogger.com dan akan langsung ke Dashboard Blogger Sobat, Lalu sobat Cari dan Klik menu Laman.
2. Buatlah Laman Baru.
3. Lalu sobat Ganti Compose dengan HTML.
4. Beri nama Sitemap atau Daftar Isi ,, Terserah sobat saja Pilih salah Satu.
5. Sobat Copy kode Berikut ini dan Paste pada Kolom HTML yang Kosong.
<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="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://brofariz.xyz/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
6. Sobat Ganti : http://brofariz.xyz berwarna biru dengan URL blog sobat.
7. Lalu Simpan.

Itulah Tutorial Singkat Fariz Tentang Cara Membuat Sitemap Keren dan Responsive di Blog ,, Semoga Berhasil ^^ . Akhir Kata

Terima Kasih

26 komentar

Klik Disini Untuk Berkomentar
Naufal
admin
28 December 2015 at 10:23 ×

dicoba gan.... thanks infonya.....

Reply
avatar
28 December 2015 at 11:01 ×

keren gan sitemap nya saya suka tuh tapi ada yang kurang dari kerapihannya gan

Reply
avatar
Unknown
admin
28 December 2015 at 11:06 ×

kurangnya apa gan ? btw terima kasih sudah berkunjung =D

Reply
avatar
Unknown
admin
28 December 2015 at 11:39 ×

hehehe thanks gan ijin cobak,ada demonya nggak ?

Reply
avatar
28 December 2015 at 11:45 ×

waw lumayan buat di terapin di blog ane

Reply
avatar
Hizan
admin
28 December 2015 at 11:49 ×

Keren nih, izin copy html nya ya :)

Reply
avatar
Anonymous
admin
28 December 2015 at 12:05 ×

keren gan sitemap nya, barusan ane baru aja coba...

Reply
avatar
Anonymous
admin
28 December 2015 at 13:01 ×

keren kayaknya nih sitemapnya

Reply
avatar
Indra Aditya
admin
28 December 2015 at 13:04 ×

Nice infonya ganz jangan lupa back yha ke blog ane Gudang Tutorial

Reply
avatar
Unknown
admin
28 December 2015 at 14:11 ×

keren gan sitemapnya, barusan saya sudah coba di blog saya.

Reply
avatar
Unknown
admin
28 December 2015 at 14:14 ×

mantap gan..sebenernya blogger sudah punya sitemap bawaan yang lebih SEO friendly

Reply
avatar
Unknown
admin
28 December 2015 at 14:21 ×

Cocok bro Fariz ... sitemap blog ane kurang menarik , nanti saya ganti deh seperti di tutorial membuat sitemap nya .. nice

Reply
avatar
Pidi
admin
28 December 2015 at 14:30 ×

ane coba rensponsive juga y gan,... thnks

Reply
avatar
Unknown
admin
28 December 2015 at 14:34 ×

mari sob silahkan dicoba :-bd

Reply
avatar
28 December 2015 at 19:18 ×

Mantep responsive bgt gan

Reply
avatar
Unknown
admin
28 December 2015 at 19:41 ×

wuih :D mantep .. izin coba bro fariz

Reply
avatar
Info Itah
admin
29 December 2015 at 11:56 ×

nah responsive nya ini yang menarik, ijin nyoba ya gan.. thanks atas info dan code nya

Reply
avatar
Unknown
admin
29 December 2015 at 13:09 ×

demonya seperti di menu blog saya ini :)

Reply
avatar
29 December 2015 at 15:50 ×

izin nyoba di blog saya gan

Reply
avatar
Azri
admin
5 January 2016 at 15:45 ×

mantep coba dulu

Reply
avatar
MERAK
admin
18 January 2016 at 16:10 ×

Mantap infonya, templatenya juga keren :)

Reply
avatar
Anonymous
admin
27 January 2016 at 21:57 ×

wahh keren nh site mapnya v
```````````

Reply
avatar
Unknown
admin
27 January 2016 at 23:38 ×

pengen nyoba , kira2 kelebihan dan kekurangannya apa gan ?

Reply
avatar

PERATURAN BERKOMENTAR :
✔ Relevan
✔ Sopan
✖ Link Aktif
✖ Spam
✖ Diluar Topik / OOT !
ConversionConversion EmoticonEmoticon

Terimakasih Atas Komentarmu!