Cara Gampang Membuat Sitemap Responsive Untuk Blog

Jumát 12 Agustus 2016. Dalam Pembahasan pada artikel kali ini adalah mengenai Sitemap, sitemap atau yang biasa disebut daftar isi memang sangatlah penting untuk sebuah blog. Sebelum membuat sitemap alangkah baiknya kita ketahui lebih dulu pengertian Sitemap itu sendiri. Sitemap adalah daftar isi pada suatu blog, seperti halnya sebuah buku, blog juga memiliki daftar isi. Semua isi artikel yang pernah anda buat akan muncul di Sitemap yang anda tulis. Apa itu fungsi Sitemap? Fungsinya tidak berbeda dengan daftar isi, fungsi Sitemap juga memudahkan pengunjung untuk mencari beberapa artikel yang mereka perlukan di blog yang kita miliki.

Nah setelah kita pahami pengertian dan fungsi dari sitemap, pada kesempatan kali ini Software Baru ingin berbagi tentang bagaimana cara membuat sitemap otomatis di blogger yang responsive, yang dapat menampilkan semua artikel yang di pisahkan dengan Label yang telah Anda publiskan. Sitemap ini juga akan menampilkan tanda "New" yang terdapat pada artikel baru anda.  DEMO

Langsung saja bagaimana cara membuat Sitemap? Caranya sangat mudah banget, anda cukup mengikuti tutorial berikut ini :

1. Login ke blogger.com

2. Pada menu "Laman" klik "Laman baru"

3. Ubah settingan dari "Compose" menjadi "HTML" (terletak di bagian kiri atas)

4. Masukkan Script dibawah ini pada laman yang anda buat tadi.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-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:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
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{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<br />
<div id="toc">
<script src="https://googledrive.com/host/0B2ww3WS8P1MJM2JkeHlyUVp4dnc/" type="text/javascript"></script>
<script src="http://freesoftwarebaru.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>

Keterangan : Anda ganti URL Software Baru dengan URL blog anda.

5. Langkah terakhir Klik "Publikasikan"

Demikian cara gampang membuat sitemap Responsive untuk blog anda, selamat mencoba.

Tweet

Postingan terkait:

Ditulis Unknown — Friday, 12 August 2016 — Add Comment — tutorial blog