Simple Sitemaps Untuk Blogger

Simple Sitemaps Untuk Blogger

Bola Hero Gawai

Simple Sitemaps Untuk Blogger

Simple Sitemaps
Ternyata banyak juga yang tertarik untuk menggunakan sitemaps yang sedang saya gunakan. Karena tampilan sitemaps ini benar-benar simple jadi saya sebut saja dengan Simple Sitemaps. Sitemaps ini benar-benar simple karena keberadaannya tidak memerlukan tempat yang besar pada postingan.

Dengan Sitemaps ini kita tidak menampilkan semua link postingan blog kita pada satu halaman. Link hanya ditampilkan ketika ada perintah klik pada label-nya.

Link yang ditampilkan sebanyak jumlah yang kita tentukan pada setiap klik-nya, dan untuk selebihnya kita tinggal klik tombol "Next" jika jumlah postingan pada satu label melebihi jumlah yang kita tentukan. Untuk Demo silahkan lihat pada Sitemaps atau Daftar Isi Kompi Ajaib.

Sitemaps ini buatan Duy Pham dan saya mendapatkannya atas petunjuk kang Beben. Di sini saya hanya menambahkan title tag untuk link-nya agar lebih SEO friendly dan penambahan "Scope" agar valid HTML5. Bagi yang tertarik untuk mencobanya silahkan gunakan script di bawah ini.

<style type='text/css' scoped='scoped'>
#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.kompiajaib.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

Silahkan ganti URL-nya dengan URL blog Anda dan angka 11 yang berwarna merah adalah jumlah link postingan per-label yang ditampilkan ketika klik pada label dan next.

Silahkan copy dan paste code di atas dan simpan pada statis page blog Anda. Selamat mencoba...

Sumber bacaan: http://beben-koben.blogspot.com/2013/09/make-sitemap-for-blogger-by-category.html
Sumber script: http://blog.duypham.info/2013/01/sitemap-for-blogger.html

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

95 Comments Add Comment

ngoment dulu ah baru baca hehehehe... :)

Balas

Pertamaxxx, Cocok nih Sitemapnya buat blog yang postinganya banyak dan Memiliki banyak label :D

Balas

hehehe udah saya terapkan mas adhy dan buat mas ahmad sorry ya menang satu langkah hahahaha :)

Balas

iya nih kalah satu menit sama mbak LEONY LI, lain kali harus lebih cepet xD

Balas

Iya sudah saya lihat di blognya sis :-bd.
Saya lihat huruf pada labelnya menjadi kecil ya? Coba rubah font size-nya misalnya menjadi 16px pada kode ini.

#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px}

Balas

Iya mas jadi tidak menampilkan seluruh link pada satu halaman. Bayangkan jika satu halaman memuat 1000 link :D

Balas

Bagus ini kang lebih simple.. ngak pake loading.. :)

Balas

Langsung nyoba ya Kang, mudah-mudahan bisa. Makasih

Balas

Keren jadinya, mau pikir2 dulu mau pakai apa nggak :D sip

Balas

jujur abdi lieur keneh tentang sitemap, webmaster tools dan sejenisnya :D
btw.. iseng2 klik 'translate', janten 'magic company' aka perusahaan jurig :D

Balas

ini nih yang ane cari2 dulu :D hehe

Balas

Muhun kang nu ieu ringan ga pake loading :D

Balas

Silahkan mas Cahyo :D

Balas

Ah ini mah sitemap biasa kang bukan untuk webmaster hanya daftar isi blog.

Muhun kang sok hoyong nyakakak lamun di translate teh, blogna jadi perusahaan jurig wkwkwkwkw.... :D manawi kang Ismet peryogi jurig naon? wkwkwwk

Balas

Silahkan mas Fajrin untuk dipelajari lebih lanjut :D

Balas

wih keren dan simpel ya mas... oya template nya baru ya mas..? wah dah lama nggak mampir.. udah ada renovasi rupanya hehehe.. makin keren mas...

Balas

heheh terima kasih mas adhy, udah siap praktek hehhe..

Balas

Keren ini Mas Adhy ... :D

Balas

mas adhy memodif ulang biar ada penampakan yang lebih WUSSSS mas hehehehe :)

Balas

Maksudnya begitu heheheh :D

Balas

Silahkan dicoba mas Nazar :D

Balas

Kang Mohon pencerahan, koq tampilannya kosong ya....

<div id="show-cat"> kosong </div>

Apa ada yang kurang ya Kang?

Sebelum dan sesudahnya Maturnuhun.

Balas

asyik... dibagikan juga hehehe...
hatur nuhun kang :D langsung dicomot ah

Balas

Itu memang kosong mas, barusan saya coba pada blog demo saya script di atas berjalan. Coba copy ulang scriptnya dari sini.

Balas

simkuring mesen hiji kang dibungkus wkwkwk

Balas

urang cobian kang ah, kabita tereh loadna :D

Balas

mungkin OOT nih kang, soalnya yg saya tanyakan sitemap untuk webmaster tools. Setelah gnt domain, submit sitemap.xml error mulu, mohon pencerahan kang...

Balas

Mangga dicobian kang :D

Balas

Muhun kang nu ieu ringan loadingnya :D

Balas

Memang setelah ganti domain biasanya sitemap.xml menjadi error, harus di custom redirect ke atom.xml

Untuk submit sitemap di webmaster coba pakai trik ini mas http://www.kompiajaib.com/2012/12/cara-submit-sitemap-ke-webmaster-tools.html

Balas

bagus nih, cukup simple... btw sudah mendukung 1000 post lebih gak kang?

Balas

tuyul we hiji kang :D

Balas

Yang ini tidak ada batasan jumlah postingan :D

Balas

Wah kebetulan blog saya belum ada sitemaps nya kang bisa di coba nih mudah-mudahan berhasil... nuhun kang

Balas

Gentos kitu nu abdi kang ku ieu .. ke ke ke emmpphh kumaha nya

Balas

Silahkan mas Adjie dicoba aja :D

Balas

Hehehehe :D gentos teh wadah cai tea nya kang :D

Balas

scritnya dimodifikasi ya ini. kalau punya saya kan seluruh link title muncul (teknik lama). hehehee..
saya ganti yang ini aja sob, lebih ringkas dan fast juga

Ohya, templetenya ganti terus ni sobat kompi, hahaha

Balas

Gentong atuh eta mah haha

Balas

bagus kang demo nya juga berbuah warna :d izin nyimpen script na dulu :d

Balas

Wah, ternyata dibagiin juga simple sitemap nya. Ijin nyimak mas adhy :)

Balas

Iya dengan ini tidak menampilkan seluruh link post blog :D
Heheheeh cari suasana baru sob :)

Balas

Kalau warna link tergantung pada warna link blog masing2 :D

Balas

Iya mas...nunjukin satu-satu jadi ribet juga mas :D

Balas

mksih kang udh memenuhi request ane ^_^ langsung coba nih!!

Balas

Iya mas silahkan dicoba :)

Balas

Owalah aya aya wae geuning.. baru nyadar :)

Balas

Wih tambah Full Color aja nih blognya :D, lanjutkan mas :D

Balas

Menarik dan keren Kang Adhy, gak pake Pikir-pikir lagi Deh saya akan
Langsung pake nih script Sitemaps Kang Adhy, ijin bookmark Kang
Terima kasih atas Artikel dan berbagi nya Kang.

Balas

Bener Mas Adjie, Mas Adhy kebetulan saya juga
Belum punya sitemaps di blog saya, sekalian pasang deh

Balas

ga bisa kang.. blank

Balas

Saya mau tanya mas, kalau blog kita sudah berganti menjadi domain TLD, apakah sitemap yang di submit di google webmaster tool hanya ini :

- atom.xml?redirect=false&start-index=1&max-results=500

kalau buat blog kompi ajaib sendiri submit sitemapnya yang apa saja mas ? :)

Balas

Keren juga sitemap nya mas. Yakni berdasarkan kategori/label postingan. Kebetulan sitemap saya seluruh posting blog. Jadi panjang banget halaman nya hehehe :D
Tapi sitemap saya jarang dibuka mas sama pengunjung,. Yang sering malah widget kotak telusur nich hmmmm :)

Balas

Hehehehe biar kayak pelangi :D

Balas

Silahkan dicoba kang Saud :D

Balas

Hmmm...kenapa ya...saya coba dibeberapa template scriptnya tidak masalah...

Balas

Iya mas hany itu aja cukup jika postingannya masih dibawah 500, karena postingan Kompiajaib sudah seribu lebih jadi saya sudah submit 3 buah yaitu start-index=1, start-index=501, dan start-index=1001.

Balas

Iya mbak dengan ini kita tidak menampilkan seluruh link pada satu halaman :D

Balas

Sip mas, terimakasih :D

Balas

Wah menarik, akan saya coba terapkan di www[.]yujikop[.]com

Balas

Silahkan dicoba mas Lalu :D

Balas

klo gk salah sama dgn postingan sy yg ini..

http://rohis-facebook.blogspot.com/2013/01/widget-sitemap-terbaru-2013.html

emank keren dan tdk berat *smile

Balas

Iya sob dari sumber script yang sama ternyata hehehe :D cuman di sini saya menambahkan title tag biar tidak mengurangi score seo blog di Chkme, juga tambahan scoped biar valid html5 :D

Balas

sudah saya pasang hasilnya keren, simple, fast loading apalagi yach...! pokoknya top banget dech buat kang adhy.

Balas

izin menerapkan kang,yang ini lebih ringan ternyata :)

Balas

Iya kang yang ini ringan loadingnya :D

Balas

iya mas yang ini memang ringan dan menghemat tempat :D

Balas

Mantap mas kode sitemapnya, saya pengen coba...

Balas

Silahkan dicoba aja =D

Balas

apik kang,,, matur suwun..

Balas

Makasih.... sama-sama :D

Balas

terima kasih mas sdh berhasil di blog saya

Balas

knpa kosong ya mas adhy apa ada yang salah ya
http://share-all-time.blogspot.com/p/daftar-isi-blog.html
Btw di halaman statis pada bagian HTML ya mas..

Balas

ok udah mas.. terima kasih untuk sitemap nya...

Balas

Aduh lierrrrrrrrrrrr kang .. teu ngartos yeuh -.-

Balas

berhasil ketang kang maknyusss euyyyy ... hatur nuhun kang

Balas

mantap kang...beda dengan yang umumnya...nuhun.

betewe...semoga putranya lekas sembuh ya kang

Balas

trimakasih kang adhy...

Balas

Kang Adhy Suryadi, di blog saya gak muncul apa-apa gan. cuma putih aja

Balas

Kang Adhy, sitemap yang ini apa bedanya dengan sitemap rss dan atom? yang disubmit ke google dan bing sitemap yang mana?

Balas

Kalau sitemaps yang disubmit ke google atau bing itu adalah sitemap untuk robot mesin pencari, nah kalau yang ini adalah sitemaps untuk manusia sebagai daftar isi blog agar lebih mudah melihat seluruh postingan blog.

Balas

Sama-sama mas :)

Balas

Cobi sambil dipraktekkeun kang :)

Balas

Hehehehe sami2 :)

Balas

Coba lagi mas :)

Balas

Htr nuhun doanya kang :)

Balas

Dicoba lagi mas :) mungkin ada langkah yang kurang :)

Balas

kang kok punya saya nggak mau di klik next nya ya?? bingung nih kang mohon pencerahannya dong. alamat url daftar isi saya di http://gokontesseo.blogspot.com/p/table-of-content.html

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×