Skip to content Skip to sidebar Skip to footer

Cara Membuat Sitemap Responsive Untuk Blog Blogger

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم

Assalamu’alaikum Wr. Wbsitemap -blogsitaufik.blogspot.com

Blog Si Taufik |Salam Blogger, apa cobt sedang mencari Sitemap/Daftar Isi untuk di terapkan ke blog? dan tersesat kesini? hhh…
Alhamdulillah karena cobt telah menemukan Sitemap/Daftar Isi  yang tepat yaitu Sitemap yang saya share ini, sitemap ini terdiri dari tiga kolom stylish dengan desain yang responsif, mudah untuk di terapkan alias tidak ribet dan terlihat sangat keren bila dibandingkan dengan widget sitemap lainnya.

Apa Itu Sitemap?
Sitemap merupakan salah satu alat bantu untuk para webmaster dalam mempermudah pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dengan mudah mendeteksi konten di dalamnya.

Dalam sistem sitemap ini pengguna dapat melakukan submit peta situs  berbasis XML langsung ke Google yang akan membantu Google mengindeks halaman web dengan mudah. Tidak hanya itu dengan adanya Sitemap pengunjung juga akan lebih mudah dalam melihat isi dari situs web/blog kita dan dengan gampang bisa mendapatkan artikel yang dicarinya. (Ref: http://id.wikipedia.org

Untuk melihat demonya Klik Disini

 

Langkah-langkah Menambah Sitemap Ke Blog

1. Login ke Blogger

2. Pilih Laman

3. Buat Halaman Baru, Dengan judul laman “Sitemap”

4. Kemudian pilih bagian HTML  dan Copy-Paste kode berikut ke dalamnya.

<Script src = "https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type = 'text / javascript'> </ script><Script src="http://www.blogsitaufik.web.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<Style type = "text / css">.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>

5. Selanjutnya Klik pada pilihan di sidebar kanan pada Komentar pembaca  pilih “Jangan bolehkan, sembunyikan yang ada” (ini bertujuan untuk menyembunyikan kotak komentar pada halaman ini – jika cobt ingin menapilkan kotak komentar langkah ini bisa cobt abaikan)

6. Terakhir, klik Publikasikan.

7.Selesai.


Ngak terasa yah sudah satu jam lebih nulis artikel ini, baiklah cobt sekian dulu sedikit Tutorial dari saya mengenai Sitemap, oya jika cobt ingin mengganti warna background atau border nya bisa kesini HTML Editor Live Preview dan untuk melihat kode warna bisa lihat di Kode Warna HTML. semoga bisa memberi manfaat buat cobt semua, Insyaallah di lain waktu dan kesempatan kita akan bertemu lagi di ruang yang sederhana ini, jangan lupa untuk meninggalkan sepatah kata baik itu kritik dan saran maupun tambahan di kotak komentar di bawah ini. Terimkasih.
 
 
Selamat Mencoba & Semoga Bermanfaat
“ Tinggalkan Sebuah Komentar Anda Berupa Kritik/Saran Yang Bersifat Membangun”

Wassalam

Teuku Taufik
Teuku Taufik Hi, Taufik disini dan Saya adalah seorang pembelajar yang menyukai kegiatan Blogging, Digital Marketing, Traveling

7 comments for "Cara Membuat Sitemap Responsive Untuk Blog Blogger"

  1. Thanks gan, sekarang semua harus responsive karena banyak yang lihat melalui gadget canggih

    ReplyDelete
  2. dipelajari dulu gan, soalnya saya masih pake template bawaan

    ReplyDelete
  3. cuma ganti yang merah doang kan sob... dicoba dulu sob..

    ReplyDelete
  4. mantab gan, nulis artikelnya ampe sejam.. wkwkw. ngeblog emang butuh perjuangan dan doa

    ReplyDelete