Minggu, 07 Februari 2021

Cara Membuat Sitemap Blogger.

Sitemap atau daftar isi dalam sebuah blog adalah salah satu elemen yang sangat penting keberadaannya.

Oleh karena itu, para admin blog mesti membuat sitemap ini dalam stuktur situsnya.

Mengapa begitu penting? Dan bagaimana membuatnya? Mari kita bahas lebih mendalam tentang hal ini di bawah.

Cara Membuat Sitemap Blogger yang Keren

Sitemap atau peta situs bisa juga berarti Daftar Isi adalah kumpulan link atau tautan dari postingan artikel yang sudah kita buat.

Jika dalam sebuah buku atau makalah kita menemukan daftar Isi atau Index, nah sitemap ini seperti itu.

Kenapa kita mesti membuat Sitemap?

1Sebagai alat pelengkap dari blog yang kita kelola. Kebanyakan situs-situs yang ada di dunia menyertakan sitemap ini.

2Memudahkan pengunjung blog mencari informasi yang mereka butuhkan atau yang ingin mereka baca dengan cepat.

3Sitemap memuat daftar konten yang lengkap. Biasanya dalam sebuah postingan memiliki Related Post atau postingan yang terkait, namun itu terbatas.

Selain terbatas jumlahnya, juga terbatas lingkupnya. Hal ini kurang memberikan ruang keterbacaan isi blog kita yang lainnya.

Dengan sitemap, tingkat keterbacaan dari artikel yang telah kita buat semakin luas.

Buat apa membuat Sitemap kan sudah ada Archive?

Widget archive memiliki keterbatasan, yaitu tidak terlalu user friendly. Kita mesti mengklik kriteria yang kita inginkan dan tampilannya tidak terlalu menarik.

Dengan sitemap, pengunjung blog hanya tinggal meng-scrol ke bawah untuk melihat-lihat atau mencari bacaan yang kira-kira menarik menurut mereka.

Dan karena sitemap sudah dikelompokkan berdasarkan label, maka pembaca bisa dengan mudah mencari kategori bacaan yang diinginkan.

Oleh karena itu, pada artikel ini kita akan membuat sebuah halaman khusus sitemap (daftar isi) blog yang mudah dikustomisasi tampilannya.

Sitemap yang akan kita buat mempunyai keunggulan, diantaranya:

Responsif ketika dibuka pada perangkat mobile karena tidak membutuhkan sambungan ke situs lain untuk meload scriptnya.
Update otomatis
Tampilan simpel namun keren
Ada tanda khusus pada artikel yang paling baru

Langkah-Langkah Membuat Sitemap pada Blog

Pada Dashboard Blogger, pilih Halaman atau Pages (lihat gambar).

Hasilnya seperti ini.

Klik tanda (+) berwarna oranye untuk membuat halaman baru. Dan hasilnya seperti terlihat pada gambar.

Ketikkan Sitemap atau Daftar Isi atau kombinasi keduanya pada kolom Judul. Kemudian perhatikan Icon di bawah judul

Jika saat ini tampilan masih mode tampilan menulis, bisa dilihat dari ikon pensil seperti pada gambar.

Maka ubah menjadi tampilan HTML dengan icon <>

Setelah itu Copy Paste Script di bawah ini.

<style>

p.labels a{

font-family:georgia;font-size:20px;color:blue; border-left:10px solid green; border-right:10px solid green; padding:3px 5px 3px 5px; border-radius:15px; -moz-border-radius:15px; box-shadow:0px 0px 13px #222222; -webkit-box-shadow:0px 0px 13px #222222; -moz-box-shadow:0px 0px 13px #222222; }

a.post-titles {color: brown;}

ol li{

position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;color:#666;text-decoration:none;transition:all .3s ease-out;}user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}

ol li:before{

content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0a6e86;color:#fff;height:2em;width:2em;line-height:1em;text-align:center;font-weight:bold;border-radius:20px

}

.ol li:hover:after{

left:-.5em;border-left-color:#0a6e86;

}

li:hover{

box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);

}

ol li:after{

position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;

}

ol{

counter-reset:li;list-style:none;font:16px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;

}

</style>

//<![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;

//]]>

</script>

Agar tidak salah penerapan, lihat dan perhatikan tulisan berwarna kuning pada script di atas.

Ketika sudah menyalin script, Scroll ke bagian paling bawah/dasar, jika sudah ketemu dengan alamat situs blogspot yang seperti pada warna kuning, ganti dengan alamat situs blog pembaca.

Ini adalah tampilan sesuai dengan kode yang dilampirkan di sini

Ini adalah tampilan sitemap blog ini

Modifikasi Sitemap

Mungkin pembaca ingin mengganti warna tulisan, warna background atau ukuran tulisan, ikuti panduan berikut.

Tampilan Judul

Untuk merubah tampilan judul perhatikan script berikut.

<style>

p.labels a{

font-family:georgia;

font-size:20px;

color:blue;

border-left:10px solid green;

border-right:10px solid green;

Untuk mengganti tipe tulisan, rubah di font-family. Terlihat saat ini kita menggunakan huruf georgia. Ganti georgia tersebut dengan Arial, Roboto atau yang lainnya.
Untuk merubah ukuran judul, rubah font-sizenya. Saat ini 20 px. Ganti angka 20 dengan angka yang diinginkan.
Merubah warna tulisan, rubah Color-nya, saat ini memakai Blue atau biru.
Merubah warna sisi dari bingkai tulisan, silahkan ubah kata Green dengan warna kesukaan pembaca.

Tampilan Isi Tautan atau Judul Artikel

Cari script ini. Posisinya ada di bawah script di atas tadi.

a.post-titles {color: brown;}

Silahkan ganti Brown dengan warna kesukaan kita.

Tampilan Angka.

Untuk merubah background angka, scrol lagi ke bawah.

Jika menemukan script ini:

background:#0a6e86;

ganti #0a6e86dengan kode warna kesukaan pembaca.

Untuk memudahkan pencarian warna yang diinginkan ketik: #0a6e86 di pencarian google.

Tampilan Huruf

Scroll lagi ke bawah dan cari kode ini:

ol{

counter-reset:li;

list-style:none;

font:16px 'Arial';

Ganti Font baik ukuran maupun tipenya sesuai dengan yang pembaca mau.

Setelah dirasa cukup, kemudian simpan dan lihat hasilnya lewat Preview atau Pratinjau Entri kemudian bisa kita Publikasikan.

Beres.

Peringatan.

Agar script sitemap ini bekerja dengan baik, maka yang boleh dirubah, hanya pada isi dari blok <style></style>.

Dan tulisan alamat situs dimana kita bisa merubah alamat blog seperti yang dibahas sebelumnya.

Demikian tutorial Cara Membuat Sitemap Blogger yang Keren ini. Semoga bermanfaat bagi para pembaca. Tetap semangat ngeblognya.

Beja-Beja Blog Inspirasi

Cara Membuat Sitemap Blogger yang Keren Langkah Demi Langkah