Cara Membuat Halaman Daftar Isi Otomatis Keren dengan Show Hiden

Ketika kita menjelajah suatu blog, kemudian kita tertarik dengan pos-pos yang ada, terkadang kita berusaha mencari pos lainya yang kita harapkan juga bagus untuk kita coba.

Namun ada juga blog yang terlalu tertutup, seperti tidak disediakannya artikel terkait, artikel populer dan sebagainya karena alasan tertentu. Tentu ini akan merepotkan pengunjung ketika hendak menjelajah lebih jauh. Terlebih jika pada blog tersebut tidak disediakan kotak pencarian. Padahal dengan adanya jalan menuju pos lainya akan mampu menambah pageview blog kita.

Nah, berkaitan dengan meningkatkan jumlah pengunjung, disini akan saya share tutorial memasang widget daftar isi yang sebenarnya ini memanfaatkan widget JSON dalam "Menampilkan Posting Berdasarkan Kategori/ Label Tertentu".

Namun bedanya disini saya poles dengan tambahan Javascript dan CSS show hidden atau spoiler yang tujuanya memperkecil ruang utama sebelum link anchor tersebut tampil.

Sebelum praktek memasang kode-kode tersebut kedalam blog, mungkin Anda ingin tahu seperti apa contohnya?
Pada demo tersebut saya beri 3 Kategori dalam dua induk/ menu utama.
Pada induk pertama langsung menuju ke link anchor, sedangkan pada induk kedua saya beri dua buah anak menu, atau orang blogger sering menyebutnya drop down.

Jika Anda tertarik memasang satu menu/ tidak memakai drop down, pakai widget ini:
<div class="KS-Menu" id="KS-Blog" style="display: block;"><a class="KS-linkMenu" onclick="document.getElementById('KS-ContenBlog').style.display='block';document.getElementById('KS-BlogClose').style.display='block';document.getElementById('KS-Blog').style.display='none'" href="javascript:void(0)"><b class="KS-Colpase">[ + ]</b>NAMA LABEL 1</a></div>

<div class="KS-Menu" id="KS-BlogClose" style="display: none;"><a class="KS-linkMenu" onclick="document.getElementById('KS-ContenBlog').style.display='none';document.getElementById('KS-BlogClose').style.display='none';document.getElementById('KS-Blog').style.display='block'" href="javascript:void(0)"><b class="KS-Colpase">[ - ]</b>NAMA LABEL 1</a></div>

<div class="KS-Konten" id="KS-ContenBlog" style="display: none;">
<ul><script src="http://www.kangsigit.com/feeds/posts/default/-/Trick Blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script></ul>

<a onclick="document.getElementById('KS-Blog').style.display='block';document.getElementById('KS-ContenBlog').style.display='none';document.getElementById('KS-BlogClose').style.display='none'" href="javascript:void(0)"> Tutup</a>
</div>

Sedangkan untuk memasang menu drop down, pakai widget ini:
<div class="KS-Menu" id="KS-Primb" style="display: block;">
<a class="KS-linkMenu" onclick="document.getElementById('KS-PrimbConten1').style.display='block';document.getElementById('KS-PrimbConten2').style.display='block';document.getElementById('KS-PrimbClose').style.display='block';document.getElementById('KS-Primb').style.display='none'" href="javascript:void(0)"><b class="KS-Colpase">[ + ]</b>NAMA LABEL 2</a></div>

<div class="KS-Menu" id="KS-PrimbClose" style="display: none;">
<a class="KS-linkMenu" onclick="document.getElementById('KS-PrimbConten1').style.display='none';document.getElementById('KS-PrimbConten2').style.display='none';document.getElementById('KS-PrimbClose').style.display='none';document.getElementById('KS-ContenPrimb1').style.display='none';document.getElementById('KS-ContenPrimb2').style.display='none';document.getElementById('KS-Primb').style.display='block'" href="javascript:void(0)"><b class="KS-Colpase">[ - ]</b>NAMA LABEL 2</a></div>

<div class="KS-dropMenu" id="KS-PrimbConten1" style="display: none;">
<a class="KS-linkMenu" onclick="document.getElementById('KS-ContenPrimb1').style.display='block';document.getElementById('KS-PrimbConten1').style.display='none'" href="javascript:void(0)"><b class="KS-Colpase">[ + ]</b>LABEL DROP DOWN 1</a></div>

<div class="KS-Konten" id="KS-ContenPrimb1" style="display: none;"><ul><script src="http://www.kangsigit.com/feeds/posts/default/-/Primbon?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script></ul>
<a onclick="document.getElementById('KS-PrimbConten1').style.display='block';document.getElementById('KS-ContenPrimb1').style.display='none'" href="javascript:void(0)"> Tutup</a></div>

<div class="KS-dropMenu" id="KS-PrimbConten2" style="display: none;"><a class="KS-linkMenu" onclick="document.getElementById('KS-ContenPrimb2').style.display='block';document.getElementById('KS-PrimbConten2').style.display='none'" href="javascript:void(0)"><b class="KS-Colpase">[ + ]</b>LABEL DROP DOWN 2</a></div>

<div class="KS-Konten" id="KS-ContenPrimb2" style="display: none;"><ul><script src="http://www.kangsigit.com/feeds/posts/default/-/Primbon Arti?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script> </ul>
<a onclick="document.getElementById('KS-PrimbConten2').style.display='block';document.getElementById('KS-ContenPrimb2').style.display='none'" href="javascript:void(0)"> Tutup</a></div>

JAVASCRIPT
<script style="text/javascript">
var numposts = 30;
var standardstyling = true;
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');
}
</script>

CSS/ STYLE
<style>
.KS-Menu{background:#667ADD;padding:5px 10px;border:solid 1px #fff;font-size:18px}
.KS-dropMenu{background:#667ADD;padding:5px 10px;border:solid 1px #fff;font-size:18px}
.KS-dropMenu a,a.KS-linkMenu{color:#fff;text-decoration:none;font-family:arial,cursive}
.KS-dropMenu{margin-left:35px;font-size:15px}
.KS-Konten{font-size:17px;background:#8F9094;padding:5px 10px;color:#fff}
.KS-Konten a{color:#13FAC6;text-decoration:none}
.KS-Konten a:hover{color:#15EFBE}
.KS-Konten ul{margin:2px}
.KS-Colpase{padding:0 10px 0 0;color:#FCEF03}
</style>

Widget tersebut hanya bisa dijalankan jika posisi Javascript berada diatas HTML.

Penempatan kode yang disarankan:
1. CSS
2. JAVASCRIPT
3. HTML
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini