Laman

Januari 06, 2013

jQuery Sliding (Efek Geser) pada Komentar

Sepertinya sudah tidak asing lagi? Benar, tidak jarang pengelola blog menggunakannya — terutama pada elemen komentar — untuk menambahkan efek geser (sliding) buka & tutup. Penerapan sederhana dapat menggunakan metode jQuery slideToggle(), seperti yang telah diuraikan pada situs w3schools tentang jQuery effects — sliding.

$(selector).slideToggle(speed,callback);

Opsional: kita dapat mengatur parameter kecepatan (warna merah) dengan memasukkan nilai “fast”,“slow”, atau besaran waktu dalam milliseconds.

$("#flip").click(function(){
  $("#panel").slideToggle();
});

#flip dan #panel merupakan selector, kita pun dapat merubahnya menjadi bentuk penamaan lain.

Sekarang bagaimana caranya agar jQuery tersebut dapat mengakomodasi efek geser buka & tutup pada elemen komentar. Kita perlu menambahkan script jQuery ajax, kemudian letakkan saja di atas </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Perhatikan pada script jQuery ajax di atas, jangan sampai memasukkan dua kali (double). Oleh karena versinya dapat berbeda-beda.

Tambahkan pula jQuery slideToggle() dan letakkan di atas </body>.

<script type='text/javascript'>
//<![CDATA[
$("#flip").click(function(){
  $("#comments").slideToggle("slow");
});
//]]>
</script>

Simpan template, kemudian centang Expand Widget Templates. Sisipkan kode HTML diantara markah berikut.

<!-- posts -->
<div class='blog-posts hfeed'>
  …
    <div class='post-outer'>
    <b:include data='post' name='post'/>
      
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <div id='flip'><span>Komentar</span></div> <!-- Hapus kode ini, jika tidak ingin menambahkan jQuery efek geser pada halaman statis -->
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='flip'><span>Komentar</span></div>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
  …
</div>

Dan terakhir adalah kustomisasi CSS dengan contoh penerapan sebagai berikut. Letakkan di atas ]]></b:skin>.

#flip {
 background: #fc6;
 cursor: pointer;
 padding: 1.5em 0;
}
#flip:hover,
#flip:focus {
 background: #6cf;
}
#comments {
 display: none;
}

Jangan lupa disimpan. Untuk demonstrasi jQuery efek geser buka tutup elemen komentar dapat diamati pada posting “Bentuk Halaman Unik di Blog”.

31 komentar:

  1. Makasih bos infonya,,,
    sangat bermanfaat

    BalasHapus
  2. Wow, ini unik nih. Bisa mempermudah pencarian komentar yang bermutu

    BalasHapus
  3. Jangan lupa di back up dulu kalau mau utak-atik code. Jadi kalau error gak bingung buat balikinnya. Ini pengalaman lho

    BalasHapus
    Balasan
    1. Memang sebaik begitu, siapa tahu nanti ada yang error. :) Meskipun koding-nya tidak merubah kode lainnya, kecuali hanya ditambah dan disisipkan.

      Hapus
  4. Mantap! nambah2 koleksi. Izin bookmark ya gan..

    BalasHapus
  5. keren gan..ane akan coba terapin..mudah2n berhasil

    BalasHapus
  6. Mau pasang takutnya template saya error,karena agak susah saya lihat cara meletakkannya.

    BalasHapus
    Balasan
    1. Jika takut error, tidak bakalan dapat pengalaman utak-atik template. :)

      Hapus
  7. Lebih bagusnya lagi diberi link demonya, agar para awam bisa tahu apa efek dari memakai koding ini #sarannewbie

    BalasHapus
    Balasan
    1. Lho, bukankah taut demo telah diberikan pada paragraf paling bawah? Tidak kelihatan atau kurang jelas...

      Hapus
  8. mantap gann infonya, jadi bisa mempercantik blog dengan tampilan slidernya.

    BalasHapus
  9. terima kasih info tampilan slidernya gan...akan saya coba info dari agan.....menarik sekali...

    http://www.rotanmebeljepara.com/almari-jati/

    BalasHapus
  10. mantabs GAN artikel nya dan Penjelasannya sangat rinci...
    semoga saya bisa buat efek geser pada komentar...
    terima kasih atas info nya

    BalasHapus
  11. mantap sob keren , ane udh terapkan tutorial nya di blog ane , hasil nya mantap keren ,

    BalasHapus
  12. W3C School is great source to know much about Jquarry and obviously you have show here good info.

    BalasHapus
  13. saya juga pernah pake theme yang ada slidernya. tapi saya hapus soalnya berat loading timenya mas

    BalasHapus
  14. Bang,, maaf nih OOT, saya mau tanya mengenai templates yg saya pake ada error dan saya nggak tau dimana kesalahannya,, udah coba komentar di situs pembuat templates tpi karena bahasa eng saya kurang dipahaminya,, jadi gak dijawab.

    ini scrisutnya bang:


    Trima kasih bang,

    BalasHapus
    Balasan
    1. Tidak kelihatan, mas. SS-nya menggunakan pranala (link) ke tempat penyimpanan gambar saja biar mudah. :)

      Hapus
  15. https://lh6.googleusercontent.com/-FZVt1SARoCA/UPaU_nTl29I/AAAAAAAAAFc/tyUxSQiI_b4/s415/why.jpg

    Kenapa judul artikel + jam (timestamp) + jumlah komentar muncul diawal setiap artikel pada homepage (terlihat pada scrinsut)?
    trims

    BalasHapus
    Balasan
    1. Pengkodean template-nya memang sudah demikian, mas. Jika ingin hanya menampilkan judul poting tanpa jam (timestamp) dan jumlah komentar pada halaman indeks (home, label, dan pencarian blog), coba letakkan CSS berikut di bawah ]]></b:skin>

      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <style>
      .s_date,
      .s_comments {
      display:none;
      }
      </style>
      </b:if>

      Hapus
    2. Tetap juga gak mau bang,, di demonya :
      http://3funpics.blogspot.com/
      gakda masalah, mungkin saya emg yg gak mengerti instalasi templatesnya. malah sekarang ada widget yg error (bukan setelah mengikuti tutor abg diatas) sepertinya memang templatesnya yg masih ada beberapa bugs dan saya kurang paham.
      trims atas jawabannya mastah, saya pengunjung setia tersembunyi di blog ini, jarang komen hehehe,,,,

      Hapus
    3. <b:if cond='data:blog.pageType == "index"'>
      <style>
      .s_date,
      .s_comments {
      display:none !important;
      }
      </style>
      </b:if>

      Sebab berdasarkan uji coba saya dengan template yang sama (belum diutak-atik), bisa hilang kok. Bahkan tanpa “!important”.

      Hapus
  16. Salam...
    Terimakasih gan informasinya sangat bermanfaat dan membantu sekali

    BalasHapus
  17. Makasih gan share infonya, jadinya blog lebih menarik nih. :)

    by : tulipware

    BalasHapus
  18. terimakasih gan infonya bermanfaat dan menarik.

    BalasHapus
  19. Bang, kenapa jadi berat loadingnya ya?

    BalasHapus
    Balasan
    1. Jika menggunakan JavaScript sedikit banyak tentu berpengaruh pada loading blog. Apalagi jika terdapat konflik atau apalah istilahnya. Cukup dipilah dan dipilih mana yang terbaik saja, untuk mengurangi loading. Contoh blog ini, oleh karena penggunaan pada halaman tertentu, sehingga kurang berpengaruh dengan loading halaman lain. :)

      Hapus
  20. pusing saya dengan bahasa pemrograman seperti ini @_@

    BalasHapus
  21. pengaruh ngak sama load nya gan

    BalasHapus
  22. You can also buy bunԁle ԁeаls, which most гadіo ѕtаtions offеr,
    to decrease the oѵеrаll аd
    cost. Internаl or Eхtеrnal Sounԁ Mixeг "All windows systems come with a internet sound mixer they all differ so you may need to review your manual or online sources to figure out how to enable or use it. Additionally, some new attributes make it even easier to make radio buttons do exactly what you want them to do.

    my web site: http://photopeach.com/user/tie2band

    BalasHapus