Seringkali Saya melihat beberapa orang mencoba menuliskan semua kategori posting pada drop down menu. Mereka melakukannya secara manual. Saya pikir, seandainya Saya dapat memakai JSON untuk ini, maka mereka tidak perlu lagi repot-repot memperbaharui hidangan setiap kali label gres ditambahkan.
Tapi sesudah Saya coba ternyata karenanya proses muat halaman menjadi sangat lambat. Makara Saya mencoba memakai alternatif menarik lainnya, yaitu widget recent post dan recent comment yang Saya letakkan pada menu-menu sekunder. Kita tahu bahwa kebanyakan widget semacam ini dibangun oleh elemen-elemen daftar, oleh alasannya yaitu itulah kita dapat menaruhnya dengan sangat pas ke dalam hidangan (yang juga dibangun oleh elemen-elemen daftar).
Masih sama. Halaman menjadi sedikit lebih lambat. Ya, itu terjadi alasannya yaitu widget-widget ini harus memanggil feed posting untuk menampilkan isi widget tersebut. Terlebih lagi, hidangan navigasi secara umum diletakan di bab atas, sehingga kalau proses pemuatan hidangan navigasi lebih lambat dari biasanya, maka peramban akan terlambat pula ketika membaca elemen-elemen di bawahnya, alasannya yaitu peramban membaca menyerupai manusia, dari kiri atas menuju ke kanan bawah (Kesimpulan: Proses muat halaman menjadi lambat).
Solusi Saya yaitu dengan cara meletakkan hidangan navigasi ini pada bab paling bawah, tepatnya di atas </body> sehingga kita harap widget ini akan memulai proses pemuatan posting ketika elemen-elemen di atasnya sudah cukup siap. Dan untuk mengangkat hidangan navigasi yang berada di bawah menuju ke atas, Saya memakai posisi absolute dengan nilai top sebesar 0:
Masuklah ke hidangan Template lalu klik Edit HTML dan klik Lanjutkan:
Temukan isyarat ini:
</head>
Salin isyarat ini dan letakkan di atasnya:
<style> #autonav { position:absolute; top:0; right:0; left:0; z-index:9999; margin:0; padding:0; font:normal normal 11px/normal Helmet,Freesans,Sans-Serif; color:white; border-bottom:2px solid #333; -webkit-box-shadow:0 1px 7px rgba(0,0,0,.4); -moz-box-shadow:0 1px 7px rgba(0,0,0,.4); box-shadow:0 1px 7px rgba(0,0,0,.4); } #autonav ul { margin:0; padding:0; height:30px; background-color:#0F5079; } #autonav ul li { list-style:none; display:inline; float:left; margin:0; padding:0; position:relative; } #autonav ul li a { display:block; line-height:30px; height:30px; overflow:hidden; margin:0; padding:0 15px; border-left:1px solid #155F90; border-right:1px solid #082E46; text-decoration:none; text-shadow:0 -1px 0 rgba(0,0,0,.4); color:white; font-weight:bold; } #autonav ul li a:hover, #autonav ul li:hover > a { background-color:#0F486C; border-right-color:#082434; } #autonav ul ul { position:absolute; width:220px; height:auto; top:100%; left:0; z-index:9999; background-color:#111; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7); -moz-box-shadow:0 1px 3px rgba(0,0,0,.7); box-shadow:0 1px 3px rgba(0,0,0,.7); overflow:visible !important; display:none; } #autonav ul ul:before { content:""; width:0; height:0; border:7px solid transparent; border-bottom-color:#111; position:absolute; top:-14px; left:24px; } #autonav ul ul li { display:block; float:none; } #autonav ul ul li a { border:none; color:#999; } #autonav ul ul ul { top:0; left:100%; } #autonav li:hover > ul {display:block} /* Khusus JSON */ #autonav ul.json-dropdown {overflow:hidden} #autonav ul.json-dropdown li { cursor:pointer; display:block; padding:7px 10px; margin:0; overflow:hidden; } #autonav ul.json-dropdown li a { line-height:14px; height:auto !important; padding:0; } #autonav ul.json-dropdown li a:hover { text-decoration:underline; background:transparent; } #autonav li ul li a:hover, #autonav li ul.json-dropdown li:hover {background-color:#000} #autonav ul.json-dropdown img.rp-thumb { padding:0; outline:none; border:2px solid #333; background-color:#02406C; display:block; float:left; margin:0 10px 0 0; width:40px; height:40px; } #autonav .subposts span, #autonav .subcomments span { font-family:Verdana,Tahoma,Helmet,Freesans,Sans-Serif; color:#666; font-size:9px; } /* Drop down hidangan untuk ukuran yang cukup lebar */ #autonav .wide {width:400px} </style> <script> //<![CDATA[ var numpost = 7, numcomment = 7, cmtext = "Komentar", cmsumm = 100, pBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC"; //]]> </script> <script src='http://dte-project.googlecode.com/svn/trunk/json-dropdown.js'></script>Setelah itu temukan isyarat ini:
</body>
Salin kerangka hidangan ini dan letakkan di atasnya:
<nav id='autonav'> <ul> <li><a href='/'>Beranda</a></li> <li><a href='#'>Profil</a></li> <li><a href='#'>Terbaru</a> <ul class='json-dropdown subposts wide'> <script src='http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=dropdownposts'></script> </ul> </li> <li><a href='#'>Komentar Terakhir</a> <ul class='json-dropdown subcomments'> <script src='http://nama_blog.blogspot.com/feeds/comments/summary?alt=json-in-script&callback=dropdowncomments'></script> </ul> </li> <li><a href='#'>Kontak</a> <ul> <li><a href='#'>Lorem Ipsum</a></li> <li><a href='#'>Dolor Sit Amet</a></li> </ul> </li> </ul> </nav>- Tentukan jumlah posting hidangan recent post pada variabel
numpost - Tentukan jumlah posting recent comment pada variabel
numcomment - Tentukan label komentar pada variabel
cmtext(misal: 17 Komentar) pBlankdipakai untuk menampilkan gambar cadangan pada recent post yang tidak mempunyai gambar mini- Tentukan jumah ringkasan komentar pada variabel
cmsumm - Ganti URL yang Saya beri tanda dengan URL blogmu.