Cara Membuat Daftar Isi Manual Di Blog
Kali ini saya akan mengulas cara membuat daftar isi manual Di Blog. Daftar Isi adalah halaman yang menjadi petunjuk isi pokok. Dengan membuat daftar isi pada website atau Blog dpat mempermudah pengujung untuk menjelajahi isi dari website atau Blog.
Dengan daftar isi manual anda dapat mengatur secara manual sesuai keinginan anda, terdapat juga daftar isi secara otomatis sedangkan daftar isi otomatis akan secara otomatis menampilkan isi blog berdasarkan urutan abjad pada label dan judul postingan. Sebagai contoh saya akan menampilkan halaman daftar isi manual :
Live Demo :
Sedikit penjelasan diatas mungkin sudah bisa dijadikan referensi untuk anda, selanjutnya saya akan membahas cara pemasangan daftar isi manual, dalam pemasangannya hal yang perlu anda lakukan yaitu :
1. Login keakun Blogger
2. Pilih Rancangan/Tata letak
3. klik add gatdet
4. Pilih HTML/Javascript
5. Kemudian anda copy kode dibawah ini dan anda pastekan pada content yang tersedia
Keterangan:
Demikian Cara Membuat Daftar Isi Manual Di Blog, Semga bermanfaat!
Live Demo :
Sedikit penjelasan diatas mungkin sudah bisa dijadikan referensi untuk anda, selanjutnya saya akan membahas cara pemasangan daftar isi manual, dalam pemasangannya hal yang perlu anda lakukan yaitu :
1. Login keakun Blogger
2. Pilih Rancangan/Tata letak
3. klik add gatdet
4. Pilih HTML/Javascript
5. Kemudian anda copy kode dibawah ini dan anda pastekan pada content yang tersedia
<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bywj6Z0gBRlTDE0zx1dTbMkZ_kkZI9lerf-khPrpo1gNOgO7RwOX03VGrr_kQDvvwZbDTUkDin_cg1WgMEQpPSneDdKAXx3Z-alt3IPEmpCwbWOq6TyMKj_36sbeVO7y7abZlQGssNyU/") no-repeat left center;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>
<div style="background-color: #005483; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 450px;">
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-slider-thumbnailgambar-ala.html">Cara membuat slide Thumbnail/Gambar ala Darkon template</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-mudah-membuat-text-resizer-di.html">Cara Mudah Membuat Text Resizer Di Blogger</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-relate-post-thumbnailgambar.html">Membuat Relate Post Thumbnail/Gambar Vertikal V.2</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-fitur-slideshow-diatas-header.html">Membuat Fitur Slideshow Diatas Header</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-alt-dan-title-tag-otomatis-pada.html">Membuat ALT dan Title Tag Otomatis Pada Gambar di Blog
</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-recent-post-thumbnail-with.html">Membuat Recent Post Thumbnail With a Tooltip Effect
</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-animasi-hover-dan.html">Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog
</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-permalink-seo-friendly-di.html">Membuat Permalink SEO Friendly di Blogger</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-related-posts-thumbnail-v2.html">Membuat Related posts Thumbnail V.2</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-floating-menu-di-samping-blog.html">Membuat Floating Menu di Samping Blog</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-seleksi-pada-blockquote.html">Cara Membuat Seleksi Pada Blockquote</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-chatbox-slide-vertikal.html">Cara Membuat Chatbox Slide Vertikal Dengan jQuery</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-tombol-share-artikel-blog.html">Cara Membuat Tombol Share Artikel Blog Ke Facebook, Twitter dan Google+ di Blog
</a></div>
</div>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bywj6Z0gBRlTDE0zx1dTbMkZ_kkZI9lerf-khPrpo1gNOgO7RwOX03VGrr_kQDvvwZbDTUkDin_cg1WgMEQpPSneDdKAXx3Z-alt3IPEmpCwbWOq6TyMKj_36sbeVO7y7abZlQGssNyU/") no-repeat left center;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>
<div style="background-color: #005483; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 450px;">
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-slider-thumbnailgambar-ala.html">Cara membuat slide Thumbnail/Gambar ala Darkon template</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-mudah-membuat-text-resizer-di.html">Cara Mudah Membuat Text Resizer Di Blogger</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-relate-post-thumbnailgambar.html">Membuat Relate Post Thumbnail/Gambar Vertikal V.2</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-fitur-slideshow-diatas-header.html">Membuat Fitur Slideshow Diatas Header</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-alt-dan-title-tag-otomatis-pada.html">Membuat ALT dan Title Tag Otomatis Pada Gambar di Blog
</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-recent-post-thumbnail-with.html">Membuat Recent Post Thumbnail With a Tooltip Effect
</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-animasi-hover-dan.html">Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog
</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-permalink-seo-friendly-di.html">Membuat Permalink SEO Friendly di Blogger</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-related-posts-thumbnail-v2.html">Membuat Related posts Thumbnail V.2</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/membuat-floating-menu-di-samping-blog.html">Membuat Floating Menu di Samping Blog</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-seleksi-pada-blockquote.html">Cara Membuat Seleksi Pada Blockquote</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-chatbox-slide-vertikal.html">Cara Membuat Chatbox Slide Vertikal Dengan jQuery</a></div>
<div class="list">
<a href="http://aak-share.blogspot.com/2014/10/cara-membuat-tombol-share-artikel-blog.html">Cara Membuat Tombol Share Artikel Blog Ke Facebook, Twitter dan Google+ di Blog
</a></div>
</div>
Keterangan:
- URL Tujuan dan teks silahkan anda ganti dengan URL Tujuan dan teks anda
- background-color: #005483 adalah pengaturan warna pada halaman
- height: 220px adalah pengaturan tinggi kotak daftar isi manual
- width: 450px; adalah pengaturan lebar kotak daftar isi manual
Demikian Cara Membuat Daftar Isi Manual Di Blog, Semga bermanfaat!