Membuat Daftar Isi atau Sitemap Blog Responsive

• Demo

Cara Membuat Daftar Isi atau Sitemap Blog Responsive dan Keren - Tutorial ini akan menampilkan semua judul artikel berdasarkan label blog Anda secara terurut dari huruf A-Z. Selain itu, tutorial ini akan sangat berguna untuk saat ini karena sudah banyak sekali para blogger yang menggunakan template yang sudah responsive pada smartphone android dan tablet. Jadi, ini akan sangat cocok untuk dipasang pada blog Anda yang menggunakan template canggih sekarang ini dengan menggunakan script daftar isi yang akan saya share.

Kenapa harus responsive? tentunya agar daftar isi (sitemap) Anda bisa tampil dengan sempurna saat pengunjung mengunjungi laman daftar isi Anda melalui smartphone. Jadi, dengan menggunakan Daftar Isi Responsive ini, Anda dapat menyajikan daftar isi blog Anda sesuai dengan keadaan pengguna dan pembaca blog Anda agar lebih nyaman dan mudah dalam membaca artikel di blog Anda.

Langsung saja ikuti tutorial Membuat Daftar Isi atau Sitemap Blog Responsive.

1. Masuk ke akun Blogger Anda.

2. Terdapat dua pilihan tempat untuk memasang script daftar isi ini.

• Klik "New Post" > Klik tab "HTML" bukan Compose. (Pasang di Halaman Postingan)
• Klik "Pages" > Pilih "New Page" > Klik tab "HTML" bukan Compose. (Pasang di Halaman Statis)

3. Copy kode berikut.

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

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

4. Ganti tulisan berwarna merah dengan URL blog Anda.
5. Simpan dan lihat hasilnya.

===

Terima Kasih Telah Berkunjung
Judul: Membuat Daftar Isi atau Sitemap Blog Responsive
Ditulis Oleh YuliaaargH™
Jika mengutip harap berikan LINK AKTIF yang menuju pada artikel Membuat Daftar Isi atau Sitemap Blog Responsive ini. Sesama Blogger mari saling menghargai. Untuk menjalin silaturahmi, silakan berkomentar agar saya dapat BLOGWALKING ke blog Anda. Terima kasih atas perhatiannya.