Cara Membuat Sitemap Responsive Untuk Blog Blogger
بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم
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>
- Ganti
www.blogsitaufik.web.id
dengan URL blog Cobt
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.
Wassalam
Thanks gan, sekarang semua harus responsive karena banyak yang lihat melalui gadget canggih
ReplyDeleteea cobt, terimakasih sudah mampir. :)
Deletedipelajari dulu gan, soalnya saya masih pake template bawaan
ReplyDeleteEa gan, monggo..
Deletecuma ganti yang merah doang kan sob... dicoba dulu sob..
ReplyDeletemantab gan, nulis artikelnya ampe sejam.. wkwkw. ngeblog emang butuh perjuangan dan doa
ReplyDeletetidak bisa kk
ReplyDelete