Daftar Isi Blog
Daftar isi blog merupakan hal yang penting dalam performa blog. Daftar isi disini biasanya disebut sitemap. Keberadaannya begitu penting karena, dengan halaman daftar isi ini, para pengunjung akan lebih mudah untuk menemukan artikel yang relevan dengan apa yang mereka cari.Disamping itu, daftar isi atau sitemap blog ini merupakan sebuah syarat untuk mengajukan permohonan adsense. Oleh sebab itu, masih tidak mau membuat daftar isi atau sitemap? Tentu, dengan adanya sitemap atau daftar isi ini, blog anda akan lebih menarik dan mendatangkan pengunjung.
 |
| Cara Membuat Daftar Isi Blog Responsive |
Responsive, belakangan ini menjadi perhatian bagi kalangan blogger. Bagaimana mengupayakan setiap tampilan itu menjadi responsive.
Lubis Blogging sendiri, mendapati kode ini dari berbagai media. Namun, ada kalanya kode ini diterapkan di template yang tidak sesuai, maka akan tidak responsive. Begitu pula sebaliknya, ada kalanya menjadi responsive. Bergantung pada kondisi blog secara keseluruhan. Sebaiknya dicoba saja.
Cara Membuat Daftar Isi Blog Responsive
Silahkan anda copy semua kode di bawah ini:[<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: #3498DB;
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{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.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>]
Setelah anda mengcopy semua file di atas, maka selanjutnya anda masuk ke Blogger, menuju bagian Halaman.
Buat halaman baru. Lalu kemudian pastekan kode di atas itu, dalam mode HTML (bukan compose).
Kode di atas, merupakan kode yang dapat dihami beberapa template blog. Namun, ada kalanya kode di atas tidak dapat berjalan dengan baik di beberapa template. Untuk itu, tidak ada salahnya untuk mencoba.
Untuk melihat bagaimana tampilan kode di atas, klik demo bagian di bawah ini:
[Demo ##eye##]
Terimakasih telah berkunjung dan jangan lupa untuk memberikan komentar dan saran anda.