Jadikanlah Slideshow Header Eye Catcher Blog

Konten bagus saja tidaklah cukup; blog juga harus didukung trik menangkap visitor begitu mereka berkunjung ke blog kita. Suit, sui.iit! Ada cewe cakep lewat. Sama. Blog juga harus cantik agar disuitin. Salahsatu upaya adalah memasang slideshow header tayang otomatis. Gerak pergantian gambar akan menarik perhatian visitor yang lanjut mengarah ke judul blog atau judul konten kita. Itulah ‘eye catcher’! Tak perlu menunggu menu diklik seperti slideshow manual kemarin. Efektif.

Sesuatu yang cepat menarik perhatian kita disebut ‘eye catcher’. Slideshow header kemarin, manual, yang memanfaatkan gambar ‘featured’ di page sebagai slide kurang kuat daya tariknya. Kita coba memakai plugin.

Slideshow header semi-otomatis

Slideshow ini hampir terlupakan; buka Appearance – Header di dashboard. Ada sarana menambah koleksi gambar di sini. Upload gambar dan centang ‘random’. Gambar otomatis berganti sendiri secara acak atau kalau menu diklik atau direfresh/reload (F5). Karena waktu tayang slideshow tidak diketahui dengan pasti kita masukkan sebagai semi-otomatis. Bisa dicoba.

Plugin slideshow header Meteor Slides

Banyak plugin slideshow header (slider, rotator) bagus tersedia untuk WordPress. Kita pilih plugin Meteor Slides karena lengkap dokumentasinya. Intip demonya di sini, PernakPernikNakNik.

Unduh plugin Meteor Slides (v1.5, .zip, 516kB), simpan berkas ‘meteor-slides’ hasil ekstraksi di ‘../wp-content/plugins/’. Aktifkan plugin.

Tiga menu Meteor Slides di dashboard: Slides, Slideshows, Settings. Kita mulai dengan setting.

1. Setting

Meteor menu SettingTidak ada yang istimewa dengan setting slide: dimensi, jumlah, efek transisi, lama transisi, durasi, dan tombol navigasi di slide.

Mudah mengisi sendiri.

Catatan: dimensi gambar slide usahakan sama dengan yang ditulis agar tidak diproses lagi (krop, crop). Kita memperoleh gambar yang tajam dan kontras.

Tentukan dimensi slide dari awal. Periksa dimensi gambar dengan klik kanan mouse di atas gambar, ada tulisan View Image Info. Krop gambar lebih dulu sebelum diupload jadi slide.

Di bawah menu Setting ada tulisan ini,

Belum kita perlukan sekarang, nanti kembali ke sini kalau slideshow siap tayang.

2. Slideshows

Cukup jelas, kumpulan slide dikumpulkan dan disimpan di ‘album slideshow’. Slideshow diberi nama sesuai tema atau misinya. Contoh, HeaderSlideShow.

3. Slides

Juga cukup jelas. Unduh semua gambar (image) yang hendak dijadikan slide. Beri masing-masing nama judul, keterangan, dan link kalau perlu. Jangan lupa mencentang nama ‘album slideshow’ di mana slide disimpan.

Pada tema Twenty Eleven dimensi gambar header (cobalah uji View Image Info) 1000 X 288 piksel. Jangan lupa mencentang nama ‘Slideshow’ di mana slide nanti tayang. Bisa dilakukan ketika mengunduh atau klik di opsi Edit-Quick Edit-Trash. Lihat gambar.

Beres, persiapan slideshow akhirnya selesai.

4. Sunting berkas header.php

Ini dia, kita di- atau terpaksa menjadi programmer kecil-kecilan. Jangan takut, buat salinannya lebih dulu beri nama misalnya header_bakup.php baru bongkar isi header.php. Berkas ‘header.php’ ada di ‘../wp-content/theme/twentyeleven’. Dianjurkan membuka dengan NotePad++ yang dapat diunduh dari situsnya, notepad-plus-plus.org.

Buka NotePad++, seret ‘header.php’ ke ruang editor. Cari baris sekitar 75. Seperti ini,

Blok seluruh program mulai baris 78 sampai dengan 113, tekan delete. Tulis di ruang kosong ‘TESTING HEADER HILANG’, save [Ctrl][S]. Refresh situs/blog kita… gambar header hilang dan ada tulisan tadi? Sip.

Ganti tulisan dengan potongan program di bawah menu ‘Setting’,
WW<?php if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow( ); } ?>
Hasilnya seperti gambar 2 di atas.

Save.

Uji kembali blog kita. Slideshow header jalan? Horee …!

Kalau belum coba tambahkan di atasnya potongan baris seperti gambar. Tampilannya akhir harus sama dengan demonya PernakPernikNakNik. Kalau belum juga ya sudah coba pakai berkas ‘header.php’ ini: header-php.docx. Ubah dan atur sendiri supaya jadi berkas ‘.php’ oke?

Sungguh mengasyikkan.

5. Update: slideshow di posting dan di widget

Di luar jalur, menuntaskan slideshow di blog. Untuk menayangkan slideshow di posting, gunakan kode ringkas atau short code ini:
WW[meteor_slideshow slideshow=”(nama slideshow)” metadata=””]

Meteor Slides widgetMenayangkan slideshow di widget lebih mudah. Dalam daftar widget tersedia widget “Meteor Slides Widget’. Seret ke kolom widget, beri judul dan isikan nama slideshow.

Lebih asyik lagi sekarang, slideshow ada dimana-mana: header, posting, widget. Ini demonya, PernakPernikNakNik.
 
:D  (mulai mengerti program sedi..kiit)

 

Tagged with: , , , , ,
Ditulis dalam Blog Tampilan, Blog Tips dan Trik, Blogging, Tutorial
5 comments on “Jadikanlah Slideshow Header Eye Catcher Blog
  1. ari mengatakan:

    mantaps gan berhasil makasih banyak

  2. Adi A. Saputra mengatakan:

    Bermanfaat banget bos. udah ane implementasikan di situs ane. hasilnya, TOP BGT. tq ya bos!

  3. Pasir besi mengatakan:

    Terima kasih, sudah dicoba dan berhasil.

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: