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

  • Taufik Nurrohman

  • 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

  • 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 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}
  • 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

      #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

    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:)

  • 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

  • Iskandar Dzulkarnain

    wah keren :)

  • Unknown

    Kalau mau nyembunyiin komentar admin blog nya gi mana mas?

Komentar telah ditutup.