Membuat Featured Slide Show

Akhirnya kita coba sesuatu yang sedikit rumit.. hehehe.. Jika anda mengikuti panduan ini dari awal, insya Allah panduan berikut biasa-biasa aja. Silahkan copy paste dan modif sendiri koding-kodingnya ya.

Featured slide show adalah sebuah fasilitas di sebuah web berita yang memungkinkan pemilik web berbagi sesuatu yang spesial. Misalnya berita-berita khusus yang penting dan hot atau peristiwa yang langka dan layak diketahui oleh banyak orang. Untuk blog, biasanya dipakai di artikel-artikel khusus. Fasilitas ini dibuat dalam bentuk dinamis dengan animasi yang keren.

Ada macam-macam slideshow sih. Tapi yang coba saya share disini adalah slideshow yang cukup sederhana sehingga mudah untuk memodifikasinya. Anda bisa mengkombinasinya sendiri agar nampak lebih keren misalnya dengan menambah thumbnail dengan ukuran lebih besar khusus untuk slideshow ini. Anda juga bisa memodifikasi tampilannya. Oke, mari kita mulai.

Untuk keperluan membuat slideshow ini, kita membutuhkan 2 buah file javascript yang akan mengelola slideshow kita nanti. Jadi, silahkan unduh dulu filenya disini. Itu adalah sebuah file zip dengan folder js di dalamnya. Anda hanya perlu meng-ekstract-nya ke folder themes yang sedang anda bangun.

Jika sudah, sekarang mari kita mulai mengedit 2 file yaitu index.php dan style.css. Pada file index.php kita memasang 2 deret kode di 2 tempat terpisah. Pertama sebelum tag </head> dan kedua di tempat dimana anda ingin slideshow ini muncul. Biasanya saya taruh setelah div content.

Sebelum tag </head> kita masukkan kode ini untuk memanggil 2 file javascript diatas dan file jquery yang sudah ada di WordPress:

if (is_home()) {
  wp_enqueue_script('jquery');
  wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
  wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
}

Kemudian di tempat dimana slideshow muncul, silahkan pasang kode slideshow ini:

<script type="text/javascript">
jQuery(function() {
  jQuery(".mygallery").jCarouselLite({
    btnNext: ".nextb",
    btnPrev: ".prevb",
    visible: 1,
    speed: 2000,
    auto: 3000,
    easing: "backout"
  });
});
</script>

<div id="slidearea">
  <div id="gallerycover">
    <div class="mygallery">
    <ul>
    <?php 
      $my_query = new WP_Query('showposts=5');
      while ($my_query->have_posts()) : $my_query->the_post();
      $do_not_duplicate = $post->ID;
    ?>
    <li>
      <div class="mytext">
        <a href="<?php the_permalink() ?>">
         <?php 
          if ( has_post_thumbnail() ) {
            the_post_thumbnail();
          } else {
            echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_title().'" class="wp-post-image"/>';
          }
         ?>
        </a>
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_content_rss('more_link_text', TRUE, '', 30); ?> 
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">read more..</a></p>
        
        <div class="slimeta">
        <a href="#" class="prevb">&laquo; Previous</a><a href="#" class="nextb">Next &raquo;</a>
        </div>
      </div>     
    </li>
      <?php endwhile; ?>
    </ul>
    <div class="clear"></div>        
    </div>
  </div>
</div>

Kode diatas akan memunculkan 5 artikel terbaru di slideshow. Jika anda ingin mengubahnnya, silahkan merubah kode ini sesuai query yang anda inginkan:

$my_query = new WP_Query('showposts=5');

Selanjutnya, kita tinggal mengatur bagaimana slideshow ini muncul melalui style.css. Berikut ini style yang saya gunakan. Anda bisa memodifikasinya sendiri:

/* SLIDER */

#slidearea{
  height: 170px; 
  overflow: hidden;
  margin:10px 0px 0px 0px;
  padding:10px;
  position: relative;
  width:560px;
  border:solid 1px #cccccc;
  background: #ededed;
}
#gallerycover{
  overflow: hidden;
  margin:0px 20px 0px 0px;
}
.mygallery{
  overflow: hidden;
  position:relative;

}
.mytext img{
  float:left;
}
.mytext{
  position:relative;
  margin:0px 5px 0px 5px;
  height: 240px;
  display:inline;
  float:left;
  color:#c4c4c4;
  }
.mytext h2 {
  padding:0px;
  margin:0px;
  font-size: 18px ;
  font-weight:bold;
  font-style:italic;
}
.mytext h2 a:link,.mytext h2 a:visited{
  color:#006b97;
  text-decoration:none;
}
.mytext p{
  padding:0px 0px;
  color:#555;
  font-size: 14px ;
  line-height:20px;
  font-style:italic;
  text-shadow:1px 1px 0px #f6f6f6;
}
.nextb {
  float:right;
  }
.prevb {
  float:left;
  }

Nah, itu aja yang perlu dilakukan untuk membangun slideshow. Tinggal anda kemudian yang harus menentukan sendiri seperti apa tampilan yang anda inginkan. Karena tiap orang pasti punya sentuhan seni sendiri-sendiri. Oke, selamat berkreasi :)

Dicari dengan kata kunci:

cara membuat slideshow di wordpress,membuat slideshow di wordpress,membuat slideshow dengan php,slideshow,widget slideshow wordpress,cara membuat slideshow di header wordpress,membuat slideshow dengan css,MEMBUAT SLIDE DI wordpress,membuat header slideshow,cara membuat slideshow dengan php

80 thoughts on “Membuat Featured Slide Show

  1. lilikzone

    manclapppppppp.. mas bro klo seandainya WP nya gratisan bisa ga…?’ apa hanya untuk WP Premium alias dah bayar..?’ THQ mas bro

  2. Edi Sutrisno

    Mas, scriptnya oke nih… tapi saya mau nanya mas. Cara bikin text area seperti punya mas itu gimana ya…??? :D

    Maklum saya bloger newbie,, hehehehe,,, Langsung Reply ya mas… ;)

      1. Edi Sutrisno

        Mau Nanya lagi mas, Perasaan saya mas menulis komentar “Pakai Plugin Google Code Highlighter” Beberapa jam yang lalu namun saat saya browsing tentang dengan keyword “Menggunakan Plugin Google Code Highlighter” Situs mas nongol dalam halaman pertama, :D

        Bagi – bagi donk mas Rahasianya…??? :D

  3. tanjung uban

    akhirnya menemukan hal yang dicari, terimakasih teman meskipun masih bingung
    ohya, misal menggunakan photoblog hxxp://everydays.hassii.com/photo-biyori bagaimana editnya ya, sudah nyoba2 kok gak jalan malah ancur :D

    salam

  4. AKIDO

    salam kenal mas….
    mas mo nanya…. untuk kode yang pertama fungsinya untuk apa ya…?
    coz aku gak nemuin d tema yg ku donlod… maklum nubi…. :)

      1. akido

        owh……
        mau nanya lagi mas…….
        aku dah nyboa masukin dan sudah muncul… tapi keika aku kasih image yg brukuran besar, yg muncul ukuran aslinya, trus slide dan next, previewsnya juga gak jalan

        da solusinya ak mas….?

        1. Lutvi Avandi Post author

          Sudah pakai featured image belum? Jangan-jangan featured image-nya yang nggak jalan. Coba periksa file hasil featured-nya apakah sudah diperkecil atau masih tetap ukuran semula

  5. akido

    featured imagenya sudah jalan mas….. tapi slidenya gak jalan n ukuran masih besar, yg kliatan cuma bagian atas image
    kira-kira apa y salah ya….?

  6. Masyhury

    Saya sudah mempraktikannya mas, tapi ternyata gagal. contentnya malah hilang semua tinggal header. Apa yang salah ya? padahal saya udah ikuti stepnya semua..
    hemm.. sayang sekali..

  7. masjajang

    kenapa ya di saya jalan setelah
    sintax ini
    if (is_home()) {
    wp_enqueue_script(‘jquery’);
    wp_enqueue_script(‘easing’, get_stylesheet_directory_uri() . ‘/js/jquery.easing.1.1.js’);
    wp_enqueue_script(‘carousal’, get_stylesheet_directory_uri() . ‘/js/jcarousel.js’);
    }
    diganti dengan sintax ini

    <script type="text/javascript" src="/wp-includes/js/jquery/jquery.js?ver=1.7.1″>
    <script type="text/javascript" src="/js/jquery.easing.1.1.js?ver=3.3″>
    <script type="text/javascript" src="/js/jcarousel.js?ver=3.3″>

    Mohon pencerahannya…

    1. pai

      tadinya sih pnya gw nongol script : => if (is_home()) { wp_enqueue_script(‘jquery’); wp_enqueue_script(‘easing’, get_stylesheet_directory_uri() . ‘/js/jquery.easing.1.1.js’); wp_enqueue_script(‘carousal’, get_stylesheet_directory_uri() . ‘/js/jcarousel.js’); } <= d bagian atas webnya

      so, script :
      if (is_home()) {
      wp_enqueue_script(‘jquery’);
      wp_enqueue_script(‘easing’, get_stylesheet_directory_uri() . ‘/js/jquery.easing.1.1.js’);
      wp_enqueue_script(‘carousal’, get_stylesheet_directory_uri() . ‘/js/jcarousel.js’);
      }
      yang ada di atas gw tambahin hasil script jd gini :

      script yg nongol di atas web gw udah hilang n gw lom. tp gw ga tau pengaruhnya apaan selain itu (kan gw msh newbie…hehehe)
      semoga membantu….

      1. pai

        hmm…hasil koreksi’a hilang d comment…
        gw buat gini aj deh, mdh”an ga hilang lg

        catatan : hapus tanda +

  8. Lina

    Saya sudah pasang semua script codenya termasuk 2 file yg di ekstract. Tampilan muncul tapi slideshownya ga jalan. Mohon solusinya. Tks

    1. Web hosting gratis

      apa file js nya udah dipanggil? cara manggilnya di header.php, di bawah title masukin script ne
      <*script type="text/javascript" src="/js/jquery.easing.1.1.js”>
      <*script type="text/javascript" src="/js/jcarousel.js”>
      <*script type="text/javascript" src="/js/jquery-1.2.3.min.js”>
      (hilangin tanda bintang)
      Selain harus ada jquery.easing.1.1.js dan jcarousel.js ada difolder, harus ada jquery-1.2.3.min.js juga.. CMIIW

  9. ebes

    trima kasih tips nya mas. jika pakai theme Innox 4.1 by NewWpThemes.com, sudah ada fitur ini mas. tapi bingung cara settingnya. apa bisa di bantu cara setingnya mas.?

  10. handri

    mas…saya punya problem nih…..
    saaya pasang template yang support featured slideshow…
    awalnya udah bisa jalan….tpi…kesininya malah thumbnail aja yang keluar tpi foto yang gedenya enggak .kenapa ya mas ?
    tlong pencerahannya..

  11. doni setyawan

    mas, boleh minta bantuannya gak?

    ada nggak mas cara supaya di setiap ‘category’ ada satu post yang di sticky di post paling atas page one ‘category’ tersebut, misalnya, ada category ‘ikan’ saya ingin setting post ‘pemeliharaan ikan arwana’ sebagai sticky post, jadi meskipun ada post baru di kategory tersebut tetep otomatis posisi penempatannya di bawah post ‘pemeliharaan ikan arwana’ . terima kasih andaikan di response. wassmlkm
    ‘jokobondo@gmail.com’

  12. Imam Sadikin

    Hallo mas lutvi, keren udah saya praktekin, berhasil, cuman saya penya rekues artikel kalo boleh. Saya kepengen artikel Feature category box (isinya ada recent post+thumnail dari category, ada recent post tanpa thumnail di bawahnya. kayak http://www.theme-junkie.com/themes/fashionpro/. mohon maaf mencantumkan link. saya pake theme itu tapi masih bermasalah baru feature slide show aja yang baru fix berkat artikel mas lutvi ini. Kalo artikelnya udah kelar (ngarep) mohon balasannya (Langsung subscribe nih via feed burner).

    Salam persahabatan.

    Imam Sadikin

  13. bendol

    kalau memasang slide seperti ini gmna ya….??

    saya kesulitan dalam hal Query (random post, Recent Post, popular Post dll) dan juga nomer slide nya
    mungkin dalam hal ini php dan javascript

    bisa di bantu ndak :P

  14. Wahyu Tirta

    Mas, ada masalah ni codingnya,, saya baru mencoba di localhost terjadi error seperti ini :

    Fatal error: Call to undefined function has_post_thumbnail() in E:\XAMPP\htdocs\wpku\wp-content\themes\KangmazeNewsV1.0\featured.php on line 32

    setelah dicek ternyata yang ditunjukkan pada line 32 adalah function ini :

    if (has_post_thumbnail()) {

    udah saya utak-atik tetep error mas.
    bagaimana solusinya mas? mohon bantuannya dan terima kasih sebelumnya :)

  15. bendol

    di enable dolo donk feature Post Thumbnails nya…..
    add_theme_support( 'post-thumbnails' ); masukkan di functions.php

    untuk menampilkan gambar di slidenya ente harus mengupload/memasang foto itu sendiri di featured image
    post editor ► di bawah nya kolom "TAG"
    abiz ntu pasti bisa de….

    sekedar tips kalau mengalami masalah pada wp spt ente contohnya….bisa search di google has_post_thumbnail pasti ada penyelesainnya secara wordpress open source….jadi lebih banyak orang yg membahas soal wordpress

    beda lagi kalau javascript biasa kita² yg g paham soal javascript hanya tinggal pake kata lain barang dah jadi…biasanya jarang di bahas, dibahas pun hanya secara kasar atau hanya cara memasang spt di blogspot atau wordpress (copy paste)

  16. sakhapradnya

    tanya dong, slide show ini bisa ditumpuk sama fancy box nggak ? soalnya yang saya tau klo sudah pakai satu jquery tidak bisa memakai yang lainnya. klo ada cara untuk mengakalinya boleh dong di share hehehe

  17. names of computer parts

    Hello there! I could have sworn I’ve visited this blog before but after looking at some of the articles I realized it’s new to me. Anyhow, I’m certainly delighted I stumbled upon it and I’ll be bookmarking it and checking back frequently!

  18. SaputraMZ

    Script dan cara ini bisa digunakan juga untuk website reseller ga’ ya mas, seperti website reseller abebagus contohnya? bagaimana logikanya? :)

  19. hendra

    misi om saya nubie… saya mau tanya bagaimana cara membuat gambar slide dengan thumbnail di postingan yang apabila gambar slide nya di klik pengunjung akan langsung kebaca di form contact us. sehingga pengunjung tinggal klik gambar trus kode ato nama file tersebut masuk kedalam field di contact form gitu biar pengunjung ga usah ketik2 lagi d contact form.. maap saya masi pemula >.<

  20. unlock

    mas ini saya, dari member cafebisnis, yang mau saya tanyakan adalah bagaimana membuat slideshow, tanpa harus ada featured images, langsung dari images post aja langsung. tanks for sharing sebelumnya

  21. Jefry

    saya juga menambahkan slideshow di blog wordpress saya, semoga bisa makin memperindah tampilannya dan juga bisa membantu pengunjung untuk bisa menemukan postingan2 saya

  22. kawanFatur

    bang, ane mau nambahin slider di web ana bang, gimana nih caranya yang manual ?
    terima kasih banyak, cara yang tadi ane kurang tau bang
    mohon bantuannya

  23. anas

    gan, belakangan ini setiap ane bikin themes, slidernya ga pernah bisa jalan. trus pasti tumpuk2an gambar slidernya sekalipun itu pake plugin slider (semua plugin hasilnya sama). tapi ktika pake themes lain (twenty eleven/twenty thirteen) itu slider notmal.

    Knapa ya?
    thanks :)

  24. yunita

    mas,tanya saya pakai tema dari newwpthemes.com.trus caranya mengganti header gmna???mhon bantuannya saya msih baru di dunia web.

  25. DTG Vall Jet

    Makasi Artikelnya, sangat bermutu, btw itu file javascript nya diletakan dimana mas ? kan keterangan artikelnya memasukkan kode, untuk memanggil 2 file javascript diatas. saya masih bingung maklum newbie.

  26. nubitol asli

    mas..kalo untuk di gunakan tapi file image nya dari external link bisa gak mas muncul kalo pake coding ini..
    …mohon jawabanya ya mas..

    terima kasih

Comments are closed.