Mecha versi 2.6.4 sudah dirilis!

Recent Post dan Recent Comment pada Drop Down Menu

Recent Post dan Recent Comment pada Drop Down Menu??
Widget Blogger pada Menu Navigasi

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:

Lihat Demo

Masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Edit HTML Blogger
Mengedit HTML

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&amp;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&amp;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:

image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="'+d+'"/>';

ganti menjadi seperti ini:

image_tag='';

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

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..

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

Efendy bloggers

Gan, bisa nggak kalo menu ini kalo discroll ngikut/melayang?

Taufik Nurrohman

Bisa. Ganti saja position:absolute dengan position:fixed:

#autonav {
position:fixed;
top:0;
right:0;
left:0;
z-index:9999;
margin:0 0;
padding:0 0;
font:normal 11px Arial,Sans-Serif;
color:white;
border-bottom:2px solid #333;
-webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);
-moz-box-shadow:0px 1px 7px rgba(0,0,0,.4);
box-shadow:0px 1px 7px rgba(0,0,0,.4);
}

Unknown

ini kenappa background tanggalnya berbeda?

Taufik Nurrohman

Mungkin pengaruh CSS bawaan template. Coba dinetralkan saja:

#autonav ul li span {background:none}

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

#autonav,
#autonav ul,
#autonav li {overflow:visible}

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

#autonav {
position:fixed !important;
position:absolute;
bottom:0;
right:0;
left:0;
z-index:9999;
margin:0 0;
padding:0 0;
font:normal normal 11px Arial,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 0;
padding:0 0;
height:30px;
background-color:#0F5079;
}
#autonav ul li {
list-style:none;
display:inline;
float:left;
margin:0 0;
padding:0 0;
position:relative;
}
#autonav ul li a {
display:block;
line-height:30px;
height:30px;
overflow:hidden;
margin:0 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 {
background-color:#0F486C;
}
#autonav ul ul {
position:absolute;
width:220px;
height:auto;
bottom:100%;
left:0;
z-index:99;
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-top-color:#111;
position:absolute;
bottom:-14px;
left:24px;
}
#autonav ul ul li {
display:block;
float:none;
}
#autonav ul ul li a {
border:none;
color:#999;
}
#autonav ul ul ul {
bottom: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 0;
overflow:hidden;
}
#autonav ul.json-dropdown li a {
line-height:14px;
height:auto !important;
padding:0 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:#222;
}
#autonav ul.json-dropdown img.rp-thumb {
padding:0 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,Arial,Sans-Serif;
color:#666;
font-size:9px;
}
/* Drop down menu untuk ukuran yang cukup lebar */
#autonav .wide {
width:400px;
}

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:

../feeds/posts/default/-/Nama Label?alt=json-in-script&amp;callback=dropdownposts

Unknown

Makasih kang..... ,,,, ,,

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

sob kalo mau hanya ingin pasang recent comment saja pada navigasi saya sendiri gimana??? :'(
tanpa makek navigasi yang sobat sediakan?? :'(

Taufik Nurrohman

kalau yang kita gunakan hanya recent post sama recent commentnya saja dan kita satukan dengan navigasi di blog kita bisa ngak mas taufik,,?

Sabtu, 07 September 2013 15.42.00 WIB

Unknown

Kalau mau nyembunyiin komentar admin blog nya gi mana mas?

Komentar telah ditutup.