Selasa, 17 April 2018

Cara Membuat Sitemap Simple dan Responsive

Cara Membuat Sitemap Simple dan Responsive

Cara Membuat Sitemap Simple dan Responsive
Cara Membuat Sitemap Simple dan Responsive
Blog Mang Otep | Cara Membuat Sitemap atau Daftar Isi Responsive untuk blogspot - Tutorial cara memasang sitemap responsive di blog - Sitemap merupakan salah satu menu navigasi halaman statis yang sangat penting bagi sebuah blog. Karena pada halaman (page) tersebut pengunjung blog anda akan mendapatkan list atau daftar artikel yang bisa kalian sesuaikan secara label maupun secara tanggal publikasi artikel blog anda.

Keterbatasan pada halaman utama blog merupakan dasar terbentuknya sitemap sehingga blog tidak perlu menampilkan seluruh artikel yang ingin dibagikan didalam halaman utama blog tersebut, maka dari itu akan lebih baik bila sitemap dibuat seringan dan sebagus mungkin.

Selain untuk memudahkan pengunjung blog anda, sitemap juga berfungsi untuk perayapan google bot yang biasanya mereview untuk merayapi blog kita secara keseluruhan dalam satu halaman blog.

Kebanyakan Sitemap yang sudah disediakan oleh kalangan blogger nampaknya ada beberapa yang tidak responsive sehingga menyulitkan untuk pengguna handphone (mobile user) dalam melihat sitemap kita. Untuk itu kali ini Blog Mang Otep akan memberikan satu sitemap yang paling responsive yang juga dipakai oleh blog ini.

Cara Membuat Sitemap Simple dan Responsive :

1. Masuk ke blogger.com
2. Masuk ke bagian Halaman >> Buat Halaman Baru
3. Copy semua kode dibawah ini kedalam mode HTML halaman.

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #333333;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #333333;
border:1px solid #333333;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>

<div id="toc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.mangotep.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

4. Ganti Url Mang Otep yang berwarna merah menjadi URL blog anda
5. Pertinjau tampilan Sitemap Responsive anda.
6. Jika sudah selesai tinggal Publikasikan!!

Untuk demo nya akan jadi seperti ini :
Silahkan melakukan beberapa pengeditan yang perlu di lakukan perihal warna kesukaan anda, dan juga beberapa model tulisan yang anda bisa sesuaikan. Demikian tutorial kali ini yang membahas tentang Cara Membuat Sitemap Simple dan Responsive.

Jika menyukai artikel dari Blog Mang Otep, kamu bisa klik like, share, and subscribe pada blog ini untuk berlangganan artikel terbaru melalui email pribadi anda. Terntu saja semua itu akan sangat berarti untuk kelangsungan Blog ini.

Terima kasih. Salam Blogger.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments