Categories
Theme WordPress

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 dan kedua di tempat dimana anda ingin slideshow ini muncul. Biasanya saya taruh setelah div content.

Sebelum tag 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:

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 πŸ™‚

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

80 replies on “Membuat Featured Slide Show”

Mas, scriptnya oke nih… tapi saya mau nanya mas. Cara bikin text area seperti punya mas itu gimana ya…??? πŸ˜€

Maklum saya bloger newbie,, hehehehe,,, Langsung Reply ya mas… πŸ˜‰

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, πŸ˜€

Bagi – bagi donk mas Rahasianya…??? πŸ˜€

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 πŸ˜€

salam

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…. πŸ™‚

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

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

By Post Author

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

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

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…

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

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

catatan : hapus tanda +

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

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

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

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

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’

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

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 πŸ˜›

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 πŸ™‚

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)

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

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!

Script dan cara ini bisa digunakan juga untuk website reseller ga’ ya mas, seperti website reseller abebagus contohnya? bagaimana logikanya? πŸ™‚

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

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

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

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

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 πŸ™‚

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.

Comments are closed.