Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Wednesday, June 26, 2013

Cara membuat sitemap valid html 5

Site map adalah peta dari sebuah halaman situs web ataupun blog. Adanya site map pada sebuah halaman situs web ataupun blog, akan mempermudah pengunjung situs itu untuk lebih memahami isi dari situs web ataupun blog tersebut. Adanya site map pada halaman situs secera spontan akan menambahkan traffik terhadap situs tersebut. Disamping meningkatkan traffik ternyata bots sistem dari situs mesin pencari sangat memerlukan hal tersebut untuk lebih mudah merayapi sebuah halaman. Dalam postingan kali ini saya memberikan tips ini terhadap teman teman saya karena saya berasumsi bahwa hal ini sangat dibutuhkan halaman situs web ataupun blog kita.

Site map ini VALID HTML 5 & CSS 3 dan saya sudah memadukan code CSS 3 bersama dengan scriptnya dalam satu halaman jadi anda tidak perlu harus lebih memahami tentang script. Saya berharap teman teman saya dapat lebih memahami arti dari pentingnya peta situs pada halaman blog . Tanpa panjang lebar lagi sekarang kita menuju TKP dan silahkan sahabat sahabat simak untuk lebih paham dalam pemasangannya. Untuk Demonya silahkan lihat Sitemap pada blog ini. Sistem site map ini difungsikan dengan Jquery oleh karena itu bila template anda sudah memiliki script Jquery Tutorial awal lewatkan saja, langsung saja menuju 'Install Program Code', sebaliknya bila masih belum ada silahkan ikuti tutorial dibawah ini.

Tutorial awal 

 

  • Login ke dashboard anda
  • Pilih 'Template'
  • Klik 'Edit HTML' untuk membuka semua code xml blog
  • Cari Code </head> ( Gunakan Ctrl + F untuk mempercepat pencarian )
  • Copy code Jquery dibawah ini kemudian pastekan tepat diatas code </head>  
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Install Program Code 

 

  • Login ke dashboard anda
  • Masuk ke 'Laman' klik 'Laman Baru' lalu pilih 'Laman Kosong'
  • Klik 'HTML' ( Bukan Compose )
  • Copy Code dibawah ini , lalu pastekan pada halaman tersebut.
  • Edit CSS nya sesuai dengan warna halaman anda, hati hati scriptnya jangan di otak atik nanti menyebabkan error dan tidak berfungsi.
  • Ganti tulisan warna merah dengan URL BLOG anda.
<style>
#sitemap-BD{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background: #fff;
padding:2px 0;
border:1px solid #000;
}
.sitemap-RS{
background:#800000;/* Warna latar belakang*/
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}.sitemap-ku ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.sitemap-ku ol li{
background-color:#FFE2E1;/* Warna BG*/
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #F90000;
}
.sitemap-ku ol li a{
text-decoration: none !important;
color:#333;
display:block;
padding-left:10px;
}
.sitemap-ku ol li a:hover{
background: #FF605B; /* Warna BG select*/
color:#fff; /* Warna huruf select*/
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
</style>
<script>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('2 4=F A();2 n=F A();2 b=F A();2 7=F A();2 9="J";2 18=T;2 v=\'\';2 1g=0;2 $e=1w.1s();6 1q(B){6 14(){3("8"1d B.X){2 W=B.X.8.f;1g=W;p=0;o(2 i=0;i<W;i++){2 8=B.X.8[i];2 1e=8.1u.$t;2 1f=8.1k.$t.1c(0,10);2 S;o(2 k=0;k<8.M.f;k++){3(8.M[k].1l==\'1n\'){S=8.M[k].L;I}}2 s=\'\';3("K"1d 8){o(2 k=0;k<8.K.f;k++){s=8.K[k].1t;2 l=s.1v(\';\');3(l!=-1){s=s.1c(0,l)}7[p]=s;4[p]=1e;b[p]=1f;n[p]=S;p=p+1}}}}}14();9="J";G(9);O();18=1p;D()}6 1j(16){1h(0,0);v=16;D(v)}6 1m(){O();v=\'\';D(v)}6 h(x,y){2 m=4[x];4[x]=4[y];4[y]=m;2 m=b[x];b[x]=b[y];b[y]=m;2 m=n[x];n[x]=n[y];n[y]=m;2 m=7[x];7[x]=7[y];7[y]=m}6 G(9){h();o(2 i=0;i<4.f-1;i++){o(2 j=i+1;j<4.f;j++){3(9=="J"){3(4[i]>4[j]){h(i,j)}}3(9=="1U"){3(4[i]<4[j]){h(i,j)}}3(9=="1V"){3(b[i]>b[j]){h(i,j)}}3(9=="1W"){3(b[i]<b[j]){h(i,j)}}3(9=="1a"){3(7[i]>7[j]){h(i,j)}}}}}6 19(15,P){h();o(2 i=15;i<P-1;i++){o(2 j=i+1;j<P;j++){3(4[i]>4[j]){h(i,j)}}}}6 O(){9="1a";G(9);2 j=0;2 i=0;C(i<4.f){u=7[i];E=j;Z{j=j+1}C(7[j]==u);i=j;19(E,j);3(i>4.f)I}}6 D(){2 j=0;2 i=0;d.g(\'<c 1R="5-w">\');C(i<4.f){u=7[i];d.g(\'<c z="5-u">\');d.g(\'<c z="5-V">\'+u+\'</c>\');d.g(\'<c z="5-q"><U>\');E=j;Z{d.g(\'<R><a L="\'+n[j]+\'">\'+4[j]+\'</a>\');d.g(\'</R>\');j=j+1}C(7[j]==u);i=j;d.g(\'</U></c></c>\');G(E,j);3(i>4.f)I}d.g(\'<c z="5-V"><a 1P="1D-1C: 1F; 1E:#1B;" L="1y://1x-1A.1z.1M/" 1L="1O">1N 1K 1H</a></c>\');d.g(\'</c>\')}6 11(){$e(\'#5-w .5-q\').1J();$e(\'#5-w .5-q:1I\').1i();$e(\'#5-w .5-V\').1G(6(){2 r=$e(Q).1Z();3((r.H(\'.5-q\'))&&(r.H(\':Y\'))){13 T}3((r.H(\'.5-q\'))&&(!r.H(\':Y\'))){$e(\'#5-w .5-q:Y\').1Y(\'12\');r.1X(\'12\');13 T}});2 N=1S;$e(\'.5-q U R a\').1Q(6(){$e(Q).17({1b:\'1T\'},N)},6(){$e(Q).17({1b:\'1r\'},N)})}$e(d).1o(6(){11()});',62,124,'
||var|if|postTitle|sitemap|function|postLabels|entry|sortBy|
|postDate|div|document|jnoc|length|write|swapPosts|||||
temp|postUrl|for|ii|ku|checkElement|pll||kategori|postFilter|BD|||class|
Array|json|while|displayToc|firsti|new|sortPosts|is|break|titleasc|category|
href|link|Duration|sortLabels|lastvar|this|li|posturl|false|ol|RS|
numEntries|feed|visible|do||initMenu|normal|return|getPostData|
firstvar|filter|animate|tocLoaded|sortPosts2|orderlabel|paddingLeft|
substring|in|posttitle|postdate|numberfeed|scroll|show|filterPosts|
published|rel|allPosts|alternate|ready|
true|loadtoc|10px|noConflict|term|title|
lastIndexOf|jQuery|rivai|http|blogspot|silaban|fff|decoration|text|
color|none|click|map|first|hide|site|target|com|Widget|_blank|style
|hover|id|250|20px|titledesc|dateoldest|datenewest|
slideDown|slideUp|next'.split('|'),0,{}))</script>

<script src="URL ANDA /feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Pesan

  • Silahkan pasang sesuai anjuran pada tutorial ini agar tidak menyebabkan error
  • Saya tidak bertanggung jawab atas penyalah gunaan script ini
  • Bagi yang belum memahami code script sebaiknya scriptnya jangan di otak atik
  • Setting code css nya sesuai dengan tema halaman anda
  • Bila ada kesulitan dalam pemasangan silahkan hubungi saya lewat form komentar dibawah setelah anda mengalami kesulitan.
  • Diasumsikan untuk
    Tingkat Pemula Tingkat Mahir

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 1:19 PM

20 comments :

  1. wah keren ni mas, trims buat tutornya....

    ReplyDelete
  2. sama sama sob, silahkan dicoba...
    bila ada kesulitan silahkan tanyakan..

    ReplyDelete
  3. sama sama bang @Zaki..
    thx your visit

    ReplyDelete
  4. keren banget ne blogx tak kasi jempol 4 hehehe,,
    ane jg mw ne kayak gne..
    knapa ya blog saya kalo di klik di submenu 'Home' yg muncul ga seperti tampilannya seperti punya agen.. mohon penjelasanx
    ato kunjungi blog jelek sy http://rudinunhalu.blogspot.com/

    makasih

    ReplyDelete
    Replies
    1. Salam kenal dari saya sob..
      maksudnya tampilan home page ( halaman awalnya )
      di hari hari yang lewat saya sudah mempostingnya silahkan kunjungi link dibawah ini, semoga dapat membantu anda sob.

      http://rivai-silaban.blogspot.com/2013/08/cara-membuat-read-more-otomatis-dengan.html

      Delete
  5. punyaku error trus kang klo valid html .. huhuu script/head pada lamannya yg dofollow-direktory.blogcepot

    ReplyDelete
    Replies
    1. kok bisa ya, coba diperiksa kodenya kembali
      thx atas kunjungannya..

      Delete
  6. mantab Bang... ane Ijin Bikin yg ke Gini... Pondokfirman.blogspot.com

    ReplyDelete
    Replies
    1. thx atas pendapatnya bang...
      blognya bagus, style dan isinya sangat bermanfaat.
      salam sejartera bang...

      Delete
  7. Banyak ilmu di sini, sy suka praktekin ilmunya dan berhasil....trims ya mas....

    ReplyDelete
  8. Mas Kodenya Error cb mas cek disini hhttp://zabloggers.blogspot.com/2014/01/sitemap.html

    saya sudah praktekan tapi masih error,

    ReplyDelete
    Replies
    1. lihat code warna merah pada scriptnya, ganti dengan URL blognya mas...

      Delete
  9. bang tolong saya kok ga bisa ya di blog saya ini infoyutub.blogspot.com padahal sudah saya ikuti sesuai petunjuknya tapi ga mau tampil sitemapnya. tolong di cek ya bang trims. tiu scriptnya udah terpasang tp ga tampil juga. saya tunggu jawabannya sampe kapanpun hehehehe terimakasih

    ReplyDelete
    Replies
    1. coba perhatikan script jquerynya, mungkin jquerynya ada dua , coba di cek mbak...

      Delete
  10. wah cara ngeceknya gimana bang? oya itu lamannya di setting di tampilkan atau tidak bang? soalnya laman saya punya settingannya tidak di tampilkan kalau di tampilkan malah jelek tampilan blognya :-(
    tolong ya bang trims ^_^

    ReplyDelete
    Replies
    1. coba dilihat di bagian template script google apis , rada rada miriplah seperti code script yang mbak pasang di head templatenya

      maksudnya menu laman ya, tidak usah pakai menu link saja mbak

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog