Tempat belajar blogspot

Membuat Sitemap Blogspot dengan HTML


Cara Membuat Sitemap Blogspot dengan HTML

Sitemap atau peta situs adalah sebuah halaman yang berisi kumpulan artikel dari yang paling lama sampai yang terbaru dan sitemap ini sebenarnya juga bisa digunakan untuk mempermudah robot mesin pencari mengindeks setiap artikel kita. Nah untuk sitemap yang pada artikel ini adalah sitemap HTML yang bisa di baca juga oleh setiap orang dan sitemap ini pastinya diletakkan pada halaman static page. Halaman sitemap ini akan otomatis menambahkan artikel terbaru pada halamannya berdasarkan label artikel yang dicantumkan saat pembuatan artikel, apabila sebuah artikel memiliki lebih dari 1 label maka artikel tersebut akan muncul pada label A dan label B. Contoh sitemap HTML bagi yang masih bingung bisa melihat contoh gambar dibawah ini.

Contoh Tampilan Halaman Sitemap Blogspot Menggunakan HTML

Cara membuat halaman sitemap blogspot

  • Buka halaman blogger dan login akun blogger.
  • Buka halaman page dan pilih new page.
  • Pilih mode HTML.
  • Copy kode dibawah ini dan paste pada halaman page.
  • Setelah selesai pilih publish.

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="http://1.bp.blogspot.com/-_VZwBpHw_SI/UrXvLbFxacI/AAAAAAAAFiQ/ZGqWZUZesCI/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://URL BLOGSPOT KITA SENDIRI/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Penjelasan tambahan kode diatas
  • Tulisan "-" dan "New!" ini untuk memberikan tanda postingan terbaru, tulisan "New!" bisa diganti dengan kata - kata lain atau untuk menghilangkan tanda tersebut bisa langsung hapus Tulisan "-" dan "New!".
  • Tulisan "URL BLOGSPOT KITA SENDIRI" pada bagian script src wajib diganti dengan alamat URL blog kita sendiri sebagai contoh http://perbloggeran.blogspot.com.

Memberikan sedikit perubahan tampilan halaman sitemap blogspot menggunakan CSS (Opsional)

Cari tulisan tag <style> dan </style> kemudian hapus semua kode CSS yang ada pada tag style itu. Copy kode CSS dibawah ini dan paste di antara tag <style> dan </style>

p.labels {background-color: #741ECF; border-radius: 20px; padding: 5px 0px 5px 20px;}
p.labels a{color: #ffffff!important; text-transform: uppercase; font-weight: bold; text-decoration: none;}
a.post-titles {color: #000000!important; text-decoration: none;}
ol li{list-style-type:decimal; line-height:25px; border-bottom: #741ECF; border-bottom-style: dotted; padding-bottom: 3px;}
#post-body-postID br {display: none;}

Keterangan tambahan kode CSS diatas
  • p.labels adalah selektor CSS untuk bagian label, disini kita bisa merubah warna background tulisan label dengan mengganti kode warna HTML pada bagian property background-color.
  • p.labels a adalah selektor CSS untuk bagian font label, disini kita bisa merubah warna tulisan label dengan mengganti kode warna HTML pada bagian property color.
  • a.post-titles adalah selektor CSS untuk bagian judul artikel, disni kita bisa merubah warna judul artikel dengan mengganti kode warna HTML pada bagian property color.
  • ol li adalah seletor CSS untuk bagian poin - poin tiap judul artikel, disini kita bisa memberikan perubahan warna garis pemisah dibawah judul artikel dengan mengganti kode warna HTML pada property border-bottom.
  • #post-body-postID br adalah selektor ID untuk menghilangkan spasi antara judul halaman dengan isi daftar postingan pada halaman ini, contoh #post-body-1234567890 br {display:none;}. Angka postID bisa didapatkan melalui halaman page editor pada bagian kolom URL browser, kita bisa mengetahui kode postID tersebut. (Setiap halaman page pasti memiliki kode postID berbeda).
    Sebatas informasi tambahan mengenai selektor #post-body-postID br agak sedikit rumit, karena kalau kita langsung pangkas dengan selektor br maka declaration untuk selektor br yang berisi property display dan value none akan berlaku untuk halaman tersebut dari atas sampai bawah dan bisa dibayangkan akan susunan HTML kita pada division lain yang memiliki tag br juga akan terkena efek declaration tersebut.

CATATAN APABILA INGIN MEMBUAT PERUBAHAN PADA KODE DI ATAS DENGAN KONDISI KODE SITEMAP HTML SUDAH DI PUBLISH, MAKA PADA SAAT MELAKUKAN PERUBAHAN WAJIB COPY PASTE KODE DIATAS DIMULAI DARI TAG <SCRIPT> SAMPAI </SCRIPT>, UNTUK LEBIH JELAS BISA LIHAT GAMBAR DIBAWAH INI DAN PERHATIKAN KODE SCRIPT DI DALAM KOTAK MERAH.

FAQ proses perubahan kode sitemap blogspot

  • Pertanyaan : Apa yang terjadi apabila saya melakukan perubahan pada kondisi sitemap HTML sudah di publish tanpa copy paste kode script seperti instruksi diatas?
    Jawaban : Sitemap HTML akan error dan halaman sitemap akan blank (kosong)
  • Pertanyaan : Apa yang harus dilakukan jika sitemap HTML sudah terlanjur error atau blank (kosong)?
    Jawaban : Cukup copy paste kode di antara tag <SCRIPT> sampai </SCRIPT> dan pilih publish.
  • Pertanyaan : Sampai berapa kali saya bisa melakukan perubahan tampilan atau memodifikasi kode sitemap HTML di atas?
    Jawaban : Tidak ada batasan seberapa sering kita ingin melakukan perubahan tampilan atau meodifikasi kode sitemap HTML di atas, cukup copy paste kode di antara tag <SCRIPT> sampai </SCRIPT> seperti yang dijelaskan diatas, kemudian lakukan modifikasi dan pilih publish.
Sekian artikel mengenai cara "Membuat Sitemap Blogspot dengan HTML", semoga artikel ini bermanfaat bagi kita blogger yang ingin memodifikasi halaman blogspot.
Terima kasih

Artikel ini ditulis oleh :
Perbloggeran
Sumber :
http://helplogger.blogspot.co.id/2013/12/add-sitemap-table-of-contents-to-blogger.html

No comments:

Post a Comment

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...