Cara membuat Slider ~ Tutorial Blogger

Rabu, 19 Januari 2011

Cara membuat Slider

Rabu, 19 Januari 2011 | 18.50

Kalau yang lalu saya membahas cara membuat slideshow, tutorial blog kali ini saya akan coba share mengenai slider. Perbedaan slideshow dengan Slider yaitu Kalau slideshow bekerja secara otomatis, sedang slider yang akan saya bahas yaitu slider bergerak kesamping kanan atau kiri apa bila kita mengklik tombol yang ada di sisi kanan dan kiri slider tersebut.

Contoh 1 Gambar slider seperti ini :

Contoh 2 Gambar slider seperti ini :

LIHAT DEMO CONTOH 1

LIHAT DEMo CONTOH 2

Bila anda berminat, silahkan anda ikuti langkah-langkah berikut ini :
1. Login ke blogger
2. Klik Rancangan dan pilih edit html
3. Sebagai pengaman silahkan download dulu template dan simpan dikomputer anda.
4. Silahkan anda cari kode </head>
5. Copy kode dibawah ini, dan paste diatas kode </head>

Untuk slider contoh 1 :

jQuery(document).ready(function() {

jQuery('#mycarousel').jcarousel({

wrap:"both",

scroll:2,

animation:"slow"

});

function mycarousel_initCallback(carousel) {

jQuery('#featured-next-button').bind('click', function() {

carousel.next();

return false;

});

jQuery('#featured-prev-button').bind('click', function() {

carousel.prev();

return false;

});

jQuery('.button-nav span').bind('click', function() {

carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));

return false;

});

};

jQuery('#feature-carousel').jcarousel({

wrap:"both",

scroll:1,

auto:10,

initCallback: mycarousel_initCallback,

buttonNextHTML: null,

buttonPrevHTML: null

});

</script>

.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  850px;height: 254px;}

.jcarousel-skin-tango .jcarousel-item {width: 270px;height: 254px;}

.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}

.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {

background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;

cursor:pointer;

height:254px;

right:20px;

position:absolute;

top:0;

width:46px;

}

.jcarousel-skin-tango .jcarousel-prev-horizontal {

background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;

cursor:pointer;

height:254px;

left:20px;

position:absolute;

top:0;

width:46px;

}

.jcarousel-container {position: relative;}

.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}

.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}

.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}

.jcarousel-next {z-index: 3;display: none;}

.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:10px 0;}

#news-slider img{border:none;height:254px;width:250px;}

</style>

Untuk slider contoh 2 :

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png) no-repeat scroll 0 0;
cursor:pointer;
height:25px;
right:0px;
position:absolute;

width:25px;
top: 50%;
}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png) no-repeat scroll 0 0;
cursor:pointer;
height:25px;
left:5px;
position:absolute;

width:25px;
top: 50%;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 100;display: none;}
.jcarousel-prev {z-index: 100;display: none;}

#news-slider{background-color:#FFFFFF;padding:10px 0;}
#news-slider img{border:none;height:100px;width:100px;}
</style>

Catatan : Untuk membuat satu slider, anda tinggal pilih salah satu kode diatas.

Langkah selanjutnya :
4. Simpan template.
5. Lankah selanjutnya kembali ke Rancangan dan pilih Elemen Halaman.
6. Silahkan tambah Gadget'.
7. Pilih 'HTML / Javascript' dan masukkan kode dibawah ini :

Kalau sudah diisi ulr nya, bentuknya seperti dibawah ini :

8. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free

Related Articles :
Baca artikel lain :
Informasi Artikel :

Judul : "Cara membuat Slider"
Diulas Oleh : Noer Cholis | Rabu, 19 Januari 2011 | 18.50
Description : Kalau yang lalu saya membahas cara membuat slideshow, tutorial blog kali ini saya akan coba share me...
Label : Cara buat slide,Cara buat slideshow,Slide,Slider,Slideshow
Posisi Rich Snippets : Rating: 3.4

Sampai saat ini baru ada : 21komentar

>>> Silahkan tambahkan komentar Anda...

21 komentar:

184inside28 Desember 2011 19.10
cara ngubah ukuran tinggi dan lebar photonya gmn bos?...
BalasHapus
Dev28 Desember 2011 19.12
brother.. aku dah nyoba tapi gambarnya gak muncul hanya nah panah biru saja yang muncul, saya sudah ganti url gambar tetapi sama saja, thanks,,
BalasHapus
Noer29 Desember 2011 06.43
184inside..., bila anda ingin mengubah ukuran gambar, maka anda harus mengubah semua ukuran yg ada. Bila anda mau... kode sdh saya update, dan saya menampilkan dua contoh Slider yg bisa anda pilih. Jadi anda tak perlu mengubah ukuran.
Silahkan dilihat dan dicoba... Semoga bermanfaat.
BalasHapus
Noer29 Desember 2011 06.58
Dev..., untuk masalah gambar yg tidak tampil.... Itu disebabkan ULR gambar yg terputus. hal itu dikarenakan karena ULR gambar memang sangat panjang, sehingga sangat beresiko terputus... hasilnya otomatis gbr tdk bisa diakses.

Jadi saran saya jangan copy ULR gambar dan langsung dimasukkan kedalam kode yg saya berikan... Sebaiknya terlebih dahulu anda copy dan paste dahulu kedalam notepad, dan pada notepad, ""Format Word Wrap" jangan di centang. Jd ULR benar2 gbr benar2 utuh.

Silahkan dicoba lagi... seperti sy katakan diatas artikel sdh saya update.
Semoga bermanfaat.
BalasHapus
Dev29 Desember 2011 17.18
Oke mkasih, aku coba yg slider 2 tapi muncul kalimat berikut:
Kami tidak dapat menyimpan template Anda.
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "img" must be terminated by the matching end-tag "".
BalasHapus
Noer30 Desember 2011 04.21
o... iya, mohon maaf kode bagian HTML ikut sy masukkan pada bagian CSS. Maklum kemarin lagi tergesa-gesa.

Sekarang sdh sy hapus... dan bisa di coba lagi...
sekali lagi mohon maaf.
BalasHapus
Dev30 Desember 2011 21.53
Ohh..trimakasih sudah diperbaiki.. sangat bermanfaat. sekali lagi terimakasih.
BalasHapus
Noer31 Desember 2011 07.00
sama-sama
BalasHapus
aibeth11 Januari 2012 06.21
kalo bisa berjalan otomatis gmn mas? .
BalasHapus
Noer12 Januari 2012 02.23
aibeth..., fitur ini menggunakan javascript jQuery, kita hanya bisa mengubah tampilannya saja....
mohon maaf ya... semoga bermanfaat
BalasHapus
Ervan26 Januari 2012 23.48
Wah tutorialmu parah bang.
masa buat slider ngeditnya setengah mati?
buat sendiri aja kalo gitu ~_~
BalasHapus
Mr6ta27 Januari 2012 01.06
Selamat pagi bang haha akhirnya bisa juga pasang slidernya :)

@ervan, slidernya gampang kok dibuat :D
kamu mungkin bikinnya ngga diheader ya?
aku juga gtu awalnya susah, tapi kalo di header, insya Allah gampang kok :)
BalasHapus
Noer27 Januari 2012 08.16
Ervan..., Sebenarnya anda tidak perlu edit pada script atau CSS-nya...
Anda hanya mengganti ULR gambar dan ULR post saja...
Dan yg paling penting dalam mengedit, anda harus teliti dan bersabar.... pasti akan berhasil seperti yang sy contohkan pada DEMO.

Anda juga bisa lihat hasil Slider yg dibuat shobat "Mr6ta" di: http://www.sanggarbusana.com/
BalasHapus
Noer27 Januari 2012 08.21
Mr6ta..., selamat ya... slider sudah jadi.
Semoga bermanfaat.
BalasHapus
Very TheOutsider29 Mei 2012 02.57
mas mau tanya nih url gambar yang di masukan yang berada di blog apa di mana?
BalasHapus
Balasan
download film13 Oktober 2012 06.10
artikel yg menarik nie, dan saya menyukainya nie, dan salam kenal dari mico ya, makasi atas infonya dan bagi teman2 yg suka film box office,horor,action dan suka download film. silakan kunjungi situsnya ya, makasi
BalasHapus
rumah buku15 Oktober 2012 16.35
wow... tipsnya manfaat banget gan ^^d
ane pake yg ke-2 n berhasil...
tapi pake yang pertama malah gerak gerak slidenya ya.. kenapa ya??
BalasHapus
rumah buku15 Oktober 2012 16.53
eh sekarang malah g gerak slidenya, knapa ya?? mhn infonya gan, kunjungi web ana ya, rumahbukuiqro.com
BalasHapus
www.bannernomorcantik.com28 November 2012 04.58
nggak jalan mas bro slidernya..thx
BalasHapus
mukena murah11 Desember 2012 15.52
mau nyoba biikin slidernya bro
BalasHapus