Recent Post dan Recent Comment pada Drop Down Menu
Seringkali Saya melihat beberapa orang mencoba menuliskan semua kategori posting pada drop down menu. Mereka melakukannya secara manual. Saya pikir, seandainya Saya bisa menggunakan JSON untuk ini, maka mereka tidak perlu lagi repot-repot memperbaharui menu setiap kali label baru ditambahkan.
Tapi setelah Saya coba ternyata hasilnya proses muat halaman menjadi sangat lambat. Jadi Saya mencoba menggunakan 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 karena itulah kita bisa menaruhnya dengan sangat pas ke dalam menu (yang juga dibangun oleh elemen-elemen daftar).
Masih sama. Halaman menjadi sedikit lebih lambat. Ya, itu terjadi karena widget-widget ini harus memanggil feed posting untuk menampilkan isi widget tersebut. Terlebih lagi, menu navigasi secara umum diletakan di bagian atas, sehingga jika proses pemuatan menu navigasi lebih lambat dari biasanya, maka peramban akan terlambat pula saat membaca elemen-elemen di bawahnya, karena peramban membaca seperti manusia, dari kiri atas menuju ke kanan bawah (Kesimpulan: Proses muat halaman menjadi lambat).
Solusi Saya adalah dengan cara meletakkan menu navigasi ini pada bagian paling bawah, tepatnya di atas </body>
sehingga kita harap widget ini akan memulai proses pemuatan posting saat elemen-elemen di atasnya sudah cukup siap. Dan untuk mengangkat menu navigasi yang berada di bawah menuju ke atas, Saya menggunakan posisi absolute
dengan nilai top
sebesar 0
:
Masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:
Temukan kode ini:
</head>
Salin kode 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 menu 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 kode ini:
</body>
Salin kerangka menu 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 menu recent post pada variabel
numpost
- Tentukan jumlah posting recent comment pada variabel
numcomment
- Tentukan label komentar pada variabel
cmtext
(misal: 17 Komentar) pBlank
digunakan untuk menampilkan gambar cadangan pada recent post yang tidak memiliki gambar mini- Tentukan jumah ringkasan komentar pada variabel
cmsumm
- Ganti URL yang Saya beri tanda dengan URL blogmu.
53 Komentar
Unknown
busyet kreatif banget lo sob...! \o/ otak lo juga encer banget ya hehehe... :-bd
--
btw mau nanya ni, gmn carax membuat button hidden/show khusus tuk komen FB pd blog cz mgkn sj dgn cr membuat button bs agak meringankan loading blog.., terima kasih..., atau mgkn sobat pny saran.., gmn carax agar komen FB tdk membuat berat Blog..???
Anonim
hebat benerr :-bd
Taufik Nurrohman
@Rohis Facebook Kalau komentar Facebook menggunakan
<iframe>
, Saya masih bisa menggunakan metode pemuatan iframe Facebook tersebut setelah tombol diklik, atau setelah keseluruhan halaman telah selesai dimuat. Saya belum pernah memakai fasilitas itu, tapi suatu saat mungkin akan Saya tuliskan juga tutorialnya. Untuk sekarang Saya lebih fokus di metodenya dulu supaya bisa paham semua cara kerjanya. Kalau sudah rampung semua baru bisa dibuat cabang-cabang tutorialnya :)Tujuan Saya menulis metode-metode terlebih dahulu sebenarnya memang untuk itu. Pertama-tama perkenalkan dulu metode dan cara kerjanya, kemudian baru beritahukan semua manfaat yang bisa dilakukan oleh sesuatu yang tampak kecil itu.
Ide yang bagus mas! :-bd
[note]Terkait: Iframe Preloader[/note]
Taufik Nurrohman
@Alam Perwira Pada bagian ini:
ganti menjadi seperti ini:
Putra
@Taufik Nurrohman Wiw, langsung work, thanks mas taufik :) :-bd :-bd
terimakasih banyak mas tutorial2 yg mas berikan, banyak membantu, sampai2 blog saya banyak ngambil tutorial dari blog ini :) \o/ \o/ \o/
Beben Koben
masalahnya cuman satu saja kalo urusan rendering via JSON...lambretta alias lemot.
mending postingan sedikit mah, kalo dah banyak nih yg rada memakana waktu loadingan :D
ricco
Sumpak keren bgt kawand 8 jempol buat kawand..
:-bd :-bd :-bd :-bd :-bd :-bd :-bd :-bd
sumpah ane salut BGT dah buat om Taufik, logika otaknya encer BGT..
abang ichal
ehh.. ini ternyata bisa juga di tambahin ke menu..
mnteb deh
Bayu Handono
mas kalo menu navigasi ini di bikin pake scrip easing bisa ga?
kaya yang di sini http://hompimpaalaihumgambreng.blogspot.com/2011/07/dua-gaya-drop-down-menu-dengan-efek.html#.T89ltLB-tak
Taufik Nurrohman
@Bayu Handono Pelajari ini dulu: Mari Berbicara Soal Menu Navigasi
Surga Kenari
pak bisa gak di tambahin warna background buat yang 'selected' berbeda warna dengan yang tidak di selected..
agar terlihat jika kita di beranda, warnanya berbeda dengan tab yang lainnya..
Taufik Nurrohman
@Isnan Nugrah Lastiko Tambahkan Kelas 'active'/'current' pada Menu Berdasarkan URL pada Address Bar
Surga Kenari
sdh gue tambahkan code
#autonav a.current {
color:red;
font-weight:bold;
}
dan javascriptnya
bisa di cek di blog gue pak..
tapi masih ga work..? gimana pak?
Surga Kenari
pak gue udah coba cara yg pertama. stlah di coba2 beberapa kali berhasil.. solved this..! :D
hhaha.. tq pak..!
Ichsan Ramadhani
wahhh si ayam lgsung pasang di blog nihh, keren bgt, cssnya mulus
Unknown
maksih gan.....
Efendy bloggers
Gan, bisa nggak kalo menu ini kalo discroll ngikut/melayang?
Taufik Nurrohman
Bisa. Ganti saja
position:absolute
denganposition:fixed
:Unknown
ini kenappa background tanggalnya berbeda?
Taufik Nurrohman
Mungkin pengaruh CSS bawaan template. Coba dinetralkan saja:
Kargın Yenice
thank you very much \o/
Unknown
bagus mass . saya mau tanya kok di tempat saya jadi kek gini ya sebelum di scroll
jadinya komentar terbaru atau posting terbaru itu hanya tampil di bagian itu tok ini setelah di scroll yg di biru2 nya
Taufik Nurrohman
Anonim
\o/ hoho... nyesel saya beli buku jquery... tadinya karena saya mau nyaingin bang taufik, eh ternyata materi jquery css dan bla bla lainya ada disini
:Ozz semalaman belajar ngeblog
Anonim
gan mau nynya klo mau dibawah posisinya gimana???
by mashasih
Taufik Nurrohman
Anonim
thank gan atas infonya!
gan Kalo mau nurunin alexa rank seperti punya agan dengan sangattt cepat bagaimana yah ???
budkalon
Ah, saya mencoba mengisi menu drop down di blog saya dengan Iframe dan ternyata berhasil! Tapi saya mau meminta sarannya. \o/
Saya menambahkannya pada menu konta di blog saya d-komik.blogspot.com :)
Admin
Well done :))
By the way, is it possible to have multiple labels instead of only 1?
Surga Kenari
kenapa ga working ya kalo saya taro di widget.. :(
Anonim
Mas kalo Menu ini saya tempatkan di template responsive gimana ?
Anonim
Mantap Mas 100% work, meskipun harus di sesuaikan sedikit
Unknown
Mau tanya Om, kalau kalau diambil bagian beranda dan komentar terakhir saja gmn caranya yah?
Oqif
Saya mau tanya, ini bisa di hide nggak ?
soalnya nanti menu di blog saya ketutupan.
kalau nggak dibuat di widget.
Unknown
Bang bisa bikin yang kaya merdeka.com ga yah :-bd
Unknown
kalo menu dropdownnya sudah ada tinggal ngasih recent comment n recent post nya bisa gak mas taufik?
Taufik Nurrohman
Yep. Selama susunan dan pola markup HTML-nya mirip. Kode JavaScript yang Saya buat di atas cuma berfungsi untuk menambahkan elemen
<li>
secara otomatis...Unknown
keren sob, saya sudah jadi ^_^
Imron Fhatoni
kalau yang kita gunakan hanya recent post sama recent commentnya saja dan kita satukan dengan navigasi di blog kita bisa ngak mas taufik,,?
Taufik Nurrohman
Bisa. JSON ini cuma bertugas untuk menggenerasikan elemen
<li>
secara otomatis...Anonim
keren om,,, saya comot script nya ke blog :D
trims :-bd
Unknown
Kang Taufik :
Cara Posting terbarunya ,,, DI ganti menjadi LabeL tertentu bisa ga ya kang ,,,, ???????
Taufik Nurrohman
Bisa:
Unknown
Makasih kang..... ,,,, ,,
Unknown
So cool !!!
Unknown
gilaaa ajaib banget nih saya ijin pakai ya mas, bantu saya mengeditnya mas, saya ingin "terbaru" dan komentar terakhirnya ada di menu yang satunya gimana?
http://demokrizeer.blogspot.com/
Unknown
cara agar widget ini munculnya apabila diklik itu gmna ya gan ?
mohon pencerahhannya 0:)
Taufik Nurrohman
⇒ /2011/10/jquery-show-hide-dan-toggle.html
Unknown
matursuwun mas
Unknown
sob kalo mau hanya ingin pasang recent comment saja pada navigasi saya sendiri gimana??? :'(
tanpa makek navigasi yang sobat sediakan?? :'(
Taufik Nurrohman
Iskandar Dzulkarnain
wah keren :)
Unknown
Kalau mau nyembunyiin komentar admin blog nya gi mana mas?