Kembali lagi dengan saya gan,kali ini saya akan memberikan tutorial cara menambahkan Daftar Isi di Blog.Tutorial ini saya adaptasi dari Arlina Design dengan sedikit perubahan tentunya :D
Daftar isi ini membuat blog sobat lebih kelihatan pro dan berkelas.Begitu juga membuat pengunjung lebih mudah memilih artikel yg dia inginkan,Pingin tau caranya?Simak Yuk!
1. Buka Blogger > Laman > Buat Laman baru > Terapkan kode di bawah ini pada tab HTML
<div id="daftarisi">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>2. Klik publikasikan laman.
3. Kemudian, klik Template > Buka Edit Template > Terapkan kode di bawah ini tepat sebelum </style>
/* CSS Full Sitemap */
#daftarisi {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#daftarisi table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#daftarisi table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}Tentukan penggunaan font dan warna sesuai dengan blog sobat.
4. Terakhir, simpan template.
Jika di blog kalian sudah terdapat banyak artikel, sebaiknya membatasi tinggi halaman dengan menambahkan style pada kode pertama. Misalnya seperti ini :
<div id="daftarisi" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>Silakan tentukan nilai max-height di atas sesuai keinginan.
Demikian Tutorial Cara Menambahkan Daftar Isi Di Blog,- Jika Ada Kesulitan Bisa Ditanyakan Melalui Kotak Komentar :D
Posting Komentar