Membuat Sitemap Simple Hanya Judul Artikel

Membuat sitemap paling simple hanya judul artikel yang di tampilkan. Sitemap (peta situs) adalah sebuah halaman blog yang berisi daftar urutan judul-judul artikel yang sudah di publish. Atau lebih umumnya banyak yang menyebut sebuah halaman daftar isi blog. Sebenarnya ada berbagai macam style atau bentuk peta situs yang di gunakan oleh blogger.

Jenis sitemap yang lengkap, yaitu menampilkan Judul postingan, tanggal, bulan, tahun, penulis, serta label-label artikel. Ada juga yang cukup menampilkan judul, tanggal, bulan dan tahun. Kemudian yang terakhir adalah sitemap simple hanya menampilkan judul postingan artikel dengan urutan angka.

Apa fungsi sitemap di dalam blog?. Fungsinya adalah untuk memberi kemudahan pada para pengunjung dalam mencari konten-konten pilihan mereka. Secara umum sebuah blog memang menampilkan widget popular post. Tapi ini tidaklah cukup, sebab yang di tampilkan terbatas hanya beberapa artikel saja.

Dengan adanya sitemap, pengunjung akan lebih leluasa dalam menjelajahi seluruh konten yang telah ada. Mereka hanya tinggal menggulir ke bawah sampai pada batas judul artikel yang di cari. Dengan begitu peranan halaman peta situs sangatlah membantu dan bikin pengunjung betah berlama-lama di blog kita.

Cara Membuat Sitemap Simple Cukup Judul Saja

Pembuatan sitemap itu terdiri dari susunan kode Javascript, HTML dan CSS. Fungsi javascript untuk menghidupkan atau memanggil rangkaian kode Html untuk bisa di tampilkan. Sementara kode CSS berfungsi dalam pembentukan backgground warna text, posisi text, jarak dan jenis style yang di gunakan.

Dari jumlah jutaan blogger di seluruh dunia, mungkin ada sebagaian yang suka dengan tampilan simple. Baik dari tampilan template blog, warna halaman, hingga bentuk sitemap. Semua itu adalah selera pilihan masing-masing blogger. Jika anda suka dengan tampilan simple, maka sangat cocok bila peta situs (daftar isi) ini nanti di gunakan pada blog/website.

Jenis sitemap pada tiap-tiap blog/website sebenarnya tidak hanya 1 (satu), tapi ada 2 (dua). Yaitu sitemap jenis XML dan HTML. Fungsi dari sitemap XML adalah memudahkan pencrawlran mesin penelusuran (search engine) untuk menemukan seluruh konten yang ada di blog. Dan fungsi sitemap HTML adalah untuk memudahkan pengunjung menavigasi dan mencari konten pilihan mereka.

Jika sebuah blog sudah terpasang keduanya, maka dapat di katakan sebagai blog yang SEO Friendly dan User Friendly. Buat sobat blogger pemula yang belum memasang atau membuat sitemap Html. Saatnya sekarang memasang peta situs di blog masing-masing. Di blog ini telah tersedia dua alternatif pilihan yang mungkin anda sukai.

Cara Memasang Sitemap Simple Hanya Judul Artikel

Setelah tahu apa sebenarnya sitemap serta jenis dan fungsinya. Sekarang saatnya untuk memasang peta situs di blog masing-masing. Jenis kode sitemap yang akan Admin bagikan, merupakan paduan dari kode Javascript, Html dan Css.

Lihat demo tampilan pada gambar di bawah ini.

Lebih lanjut, bagaimana cara memasangnya?. Silahkan masuk di akun blogger, lalu cari menu Halaman, jika blog berbahasa Inggris, cari dan klik pada menu Page.

Setelah halaman terbuka, di situ ada tanda Plus (+) untuk membuat sebuah halaman baru. Setelah itu akan tampak kotak sejenis textarea yang masih kosong. Selanjutnya, masukkan kode script sitemap Html di area text yang kosong. Lalu klik PUBLISH..!

Apabila dengan panduan di atas merasa bingung, silahkan baca contohnya seperti pada artikel Cara Membuat Sitemap Blog Dengan Javascript. Pada artikel tersebut telah Admin terangkan dengan menyertakan gambar agar mudah di mengerti.

Selanjutnya untuk mendapatkan kode scriptnya, silahkan di Copy kode sitemap di kotak bawah ini. Lalu tempel di dalam kotak halaman kosong yang baru di buat.

<div id="sitemap4">Loading....</div> <script> //<![CDATA[ /* Blogger Sitemap Simple Title Only Sort By Title (Alphabetically) */ var start=1;var max=150;var sitemap4Arr=new Array();function runSitemap4(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap4&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap4(root){var elem=document.getElementById('sitemap4');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemap4Arr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runSitemap4()} else{var print='',a=sitemap4Arr.sort(function(a,b){return a.judul>b.judul?1:-1});for(var x=0;x<a.length;x++){print+='<li><a href=\"'+a[x].url+'\" title=\"'+a[x].judul+'\">'+a[x].judul+'</a></li>'} elem.innerHTML='<div class=\"judul\">Total Post: '+a.length+'</div><ol>'+print+'</ol>'}}} runSitemap4(); //]]> </script>

Selanjutnya setelah selesai memasang kode sitemap, sekarang saatnya memasang kode CSS. Silahkan di Copy kode CSS di bawah ini. Lalu tempelkan di atas kode </b:skin> atau bisa juga di tempel di atas </head>. Untuk menempelkan di atas </head>, harus di awali dengan <style type='text/css'> ...isi kode css... </style>. Intinya kode css-nya di apit antara <style type=...> dan </style>.

/* Blogger Sitemap Simple Title Only Sort By Title (Alphabetically) */ #sitemap4 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:500; text-align:center; margin-bottom:20px; padding:15px;} #sitemap4 a {color:#666; text-decoration:none; transition:all .3s ease;} #sitemap4 a:hover {color:#000;} #sitemap4 ol {margin:0px; padding:0px;} #sitemap4 ol li {color:#666; font-weight:300; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}

Mungkin dengan tampilan warna seperti header dan warna text link masih kurang cocok. Silahkan di rubah sendiri pada warna header (hijau) yang ada di kode CSS, cari kode ( background-color:#008c5f; color:#fff; ). Kemudian untuk warna TextLinknya cari kode ( #sitemap4 a {color:#666; text-decoration:none; ). Silahkan di rubah sesuai dengan keingnan.

Demikian Membuat Sitemap Simple Hanya Judul Artikel yang tampil di halaman. Semoga bermanfaat..

Sumber: https://www.igniel.com/2019/02/sitemap-daftar-isi-hanya-judul-abjad.html