Membuat Slide Show jQuery Carousel Keren di Blogger

jQuery Carousel dengan UI Kit untuk Blogger

jQuery Carousel Slide Show atau Slider jQuery Carousel adalah sebuah slideshow dengan jQuery Javascript yang menampilkan animasi galeri gambar/image dan konten HTML (teks, link, foto dsb.), umumnya banyak digunakan pada website portofolio dan fotografi. jQuery Carousel Slide Show juga banyak yang telah digunakan sebagai widget blogger seperti menampilkan update post terbaru, popular posts, related posts secara otomatis. Kali ini saya ingin sharing tutorial cara membuat Slideshow jQuery Carousel Keren di Blogger, tampilan yang lebih apik dengan UI Kit (Psd).

Desain tutorial jQuery Carousel yang saya kutip dari original source di favbulous.com ini, cukup mudah diikuti dan dipahami. So, saya tertarik membaginya kembali buat sobat bloggger semua. Berikut kelebihan fitur dari jQuery Carousel Slide Show ini :

Support jQuery framework
Fitur Previous dan Next Arrows
Fitur Number navigation atau pagination
Menampilkan multiple items (banyak item) pada saat bersamaan
Support IE, FF, Safari and Chrome

DEMO JQUERY CAROUSEL KEREN

Javascript (Plugin Carousel)

Carousel Slide Show ini menggunakan script caroudFredSel yang dapat dikonfigurasi menggunakan framework jQuery. Script caroudFredSel berikut ini yang teleh membuat slideshow bekerja sebagai mana carousel sebenarnya.


$(function() {

   $('#carousel ul').carouFredSel({
    prev: '#prev',
    next: '#next',
    pagination: "#pager",
    auto: true,
    scroll: 1000,
    pauseOnHover: true
   });

  });

Markup HTML

Struktur kode HTML menggunakan elemen <li> dan ditambahkan dengan tag <img> dan tag <a>. Jadi setiap gambar akan mewakili atau mengarahkan sebuah link tertentu. Dan usahakan atur posisi serta struktur HTML seperti kode berikut dibawah:


<div id="carouesl">
 <ul>
  <li><img src="images/image1.jpg" alt="" /><a href="#">Image1</a></li>
  <li><img src="images/image2.jpg" alt="" /><a href="#">Image2</a></li>
  <li><img src="images/image3.jpg" alt="" /><a href="#">Image3</a></li>
  <li><img src="images/image4.jpg" alt="" /><a href="#">Image4</a></li>
  <li><img src="images/image5.jpg" alt="" /><a href="#">Image5</a></li>
  <li><img src="images/image6.jpg" alt="" /><a href="#">Image6</a></li>        
 </ul>
 <div class="clearfix"></div>
 <!-- prev and next button -->
 <a id="prev" class="prev" href="#"><</a>
 <a id="next" class="next" href="#">></a>
 <!-- pagination -->
 <div id="pager" class="pager"></div>
</div>

keterangan:

untuk url, image/gambar dapat Anda ganti atau sesuaikan dengan kebutuhan blog

untuk menambah gambar lebih banyak, Anda dapat menambah elemen <li> atau kode yang berwarna biru

CSS

Pada prinsipnya desain ini dimaksudkan untuk memberi cover (skin) tampilan Carousel/slideshow lebih keren dan indah untuk dilihat. Dengan menggunakan 3 main images (psd), yaitu :

carousel_control: sprite gambar untuk semua kontrol navigasi ( gambar navigasi preview, next dan bullet poin).
carousel_polaroid: ini adalah bingkai polaroid untuk setiap gambar.
carousel_shine: ini untuk efek glare (berkilau) di atas masing-masing gambar.

carousel_control

carousel_polaroid:

carousel_shine

tip: copy URL Image masing-masing gambar diatas dan pasang sebagai background (yang berwarna merah) di CSS.

CSS Code:


#carousel {
 margin: 0 0 30px 0;
 width: 735px;
 position:relative;
}
#carousel ul {
 margin: 0;
 padding: 0;
 list-style: none;
 display: block;
}
/* Polaroid background image put here */
/* Need to set the width and height of the polaroid frame */
#carousel li {
 font-size: 40px;
 color: #999;
 text-align: center;
 width: 232px;
 height: 178px;
 padding: 0;
 margin: 6px;
 display: block;
 float: left;
 background: transparent url('images/carousel_polaroid.png') no-repeat 0 0;
 position:relative;
}

/* Position the image to fit into the polaroid frame */
/* We use margin-top to bump it down */
#carousel li img {
 width:201px;
 height:127px;
 margin-top:14px;
}

/* We put the glare background in here */
/* We make it a block element and absolute position */
/* z-index to make sure it appear on top of the image */
#carousel li a {
 width:201px;
 height:127px;
 position:absolute;
 display:block;
 z-index:2;
 top:14px;
 left:16px;
 background: transparent url('images/carousel_shine.png') no-repeat 0 0;
 text-indent:-999em;
}   

.clearfix {
 float: none;
 clear: both;
}
/* Skin the button with carousel control sprite*/
/* Make it position absolute to move it easily */
#carousel .prev, #carousel .next {
 margin-left: 10px;
 width:15px;
 height:21px;   
 display:block;    
 text-indent:-999em;
 background: transparent url('images/carousel_control.png') no-repeat 0 0;
 position:absolute;
 top:70px;    
}
/* Individual setting for previous button */
#carousel .prev {
 background-position:0 0;
 left:-30px;
}
 #carousel .prev:hover {
  left:-31px;
 }   
/* Individual setting for next button */
#carousel .next {
 background-position: -18px 0;
 right:-20px;
}
 #carousel .next:hover {
  right:-21px;
 }    
#carousel .pager {
 margin:0 auto;
 text-align: center;
}
/* Style the pagination button with dot */
/* Same as prev and next button, we use the same css sprite */
#carousel .pager a {
 margin: 0 5px 0 0;
 text-decoration: none;
 display:inline-block;
 width:8px;
 height:8px;
 background: transparent url('images/carousel_control.png') no-repeat -2px -32px;
 text-indent:-999em;
}
#carousel .pager a.selected {
 text-decoration: underline;
 background: transparent url('images/carousel_control.png') no-repeat -12px -32px;    
}

keterangan:

seperti biasa Anda bisa merubah warna-warna, lebar atau width slideshow, font dll. sesuai selera.

Cara Pasang Slide Show jQuery Carousel Keren di Blogger

Langkah Pertama

Pertama-tama pastikan template Anda sudah menggunakan valid DOCTYPE, ini tentu berlaku untuk semua type carousel agar berfungsi dengan baik.

Kedua letakkan file js. berikut termasuk jQuery library dan carouFredSel-plugin jquery dibawah ini tepat sebelum tag </head>.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://problogizjs.googlecode.com/files/jquery.carouFredSel-5.2.3-packed.js"></script>

note:

Untuk jQuery library (warna merah), adalah opsional jika template Anda sudah memakainya baik jQuery versi terbaru jquery-1.9.1.min.js; jquery-1.8.1.min.js; jquery-1.7.1.min.js; jquery-1.6.1.min.js; jquery-1.5.2.min.js, atau versi jquery lainnya maka script jQuery yang pertama tidak perlu dipasang lagi. Cukup satu jquery min saja di template, agar tidak terjadi conflict script. Letakkan saja carouFredSel packed jquery diatas sebelum tag </head>

Langkah Kedua

Selanjutnya copy code CSS berikut dan paste tepat sebelum tag ]]></b:skin>


#carousel {
 margin: 0 0 30px 0;
 width: 735px;
 position:relative;
}
#carousel ul {
 margin: 0;
 padding: 0;
 list-style: none;
 display: block;
}
/* Polaroid background image put here */
/* Need to set the width and height of the polaroid frame */
#carousel li {
 font-size: 40px;
 color: #999;
 text-align: center;
 width: 232px;
 height: 178px;
 padding: 0;
 margin: 6px;
 display: block;
 float: left;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPXJX2b6DMbGU19CQQNJgoGUk-NQUmmqruXzRqqVdtoBq7CwIhaPtoI-DGxQ8AbV9oi_mPf7PIb2A28R2M6s09xkAupizsXNvdOFw8NJd8UUEwXRSmJ8xobEebD3pRBLWGfm_IqrZHnrMC/s1600/carousel_polaroid.png') no-repeat 0 0;
 position:relative;
}

/* Position the image to fit into the polaroid frame */
/* We use margin-top to bump it down */
#carousel li img {
 width:201px;
 height:127px;
 margin-top:14px;
}

/* We put the glare background in here */
/* We make it a block element and absolute position */
/* z-index to make sure it appear on top of the image */
#carousel li a {
 width:201px;
 height:127px;
 position:absolute;
 display:block;
 z-index:2;
 top:14px;
 left:16px;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKMIyOemSCCGoZaeDs61sLNiqk99viCDpzZ0MP_UPFAPQyEwKYGSoNcVgwYfNGBrT0vuCqu3Cbux3D357x0eNbw88zHyhY2seKuYrnPCnxYUNgNX1FGFXtcj8qlRBtFBlKDpEKq_YOSpP8/s1600/carousel_shine.png') no-repeat 0 0;
 text-indent:-999em;
}   

.clearfix {
 float: none;
 clear: both;
}
/* Skin the button with carousel control sprite*/
/* Make it position absolute to move it easily */
#carousel .prev, #carousel .next {
 margin-left: 10px;
 width:15px;
 height:21px;   
 display:block;    
 text-indent:-999em;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsOWc0RO4hmrFw_a9OOQp_rmwDTL85-LlWZ1UFKb2dqMI8lZygRW7goAuHgbFiee64c7LUB7dn2rdJx78aPZQaVYLoysdz2ECt1Ff4r8QiSfs9t9CWfYk_sthpCc9wn2HOY3o2mJ6e9fa0/s1600/carousel_control.png') no-repeat 0 0;
 position:absolute;
 top:70px;    
}
/* Individual setting for previous button */
#carousel .prev {
 background-position:0 0;
 left:-30px;
}
 #carousel .prev:hover {
  left:-31px;
 }   
/* Individual setting for next button */
#carousel .next {
 background-position: -18px 0;
 right:-20px;
}
 #carousel .next:hover {
  right:-21px;
 }    
#carousel .pager {
 margin:0 auto;
 text-align: center;
}
/* Style the pagination button with dot */
/* Same as prev and next button, we use the same css sprite */
#carousel .pager a {
 margin: 0 5px 0 0;
 text-decoration: none;
 display:inline-block;
 width:8px;
 height:8px;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsOWc0RO4hmrFw_a9OOQp_rmwDTL85-LlWZ1UFKb2dqMI8lZygRW7goAuHgbFiee64c7LUB7dn2rdJx78aPZQaVYLoysdz2ECt1Ff4r8QiSfs9t9CWfYk_sthpCc9wn2HOY3o2mJ6e9fa0/s1600/carousel_control.png') no-repeat -2px -32px;
 text-indent:-999em;
}
#carousel .pager a.selected {
 text-decoration: underline;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsOWc0RO4hmrFw_a9OOQp_rmwDTL85-LlWZ1UFKb2dqMI8lZygRW7goAuHgbFiee64c7LUB7dn2rdJx78aPZQaVYLoysdz2ECt1Ff4r8QiSfs9t9CWfYk_sthpCc9wn2HOY3o2mJ6e9fa0/s1600/carousel_control.png') no-repeat -12px -32px;    
}

Langkah Ketiga

Dan langkah terakhir ini adalah memasang elemen-elemen HTML sebagai widget Carousel Slide Show Anda di blog. Copy semua kode dibawah termasuk Javascript ekskusi carouFredSel-plugin dimanapun Anda suka, biasanya dibawah Judul Blog atau diatas judul post, atas footer.

Pilih Tata Letak Blogger > Tambahkan Gadget > pilih HTML/JavaScript > pastekan semua kode dibawah > Simpan


<div id="carousel">
 <ul>
<li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image1.jpg" /><a href="#">Image1</a></li>
<li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image2.jpg" /><a href="#">Image2</a></li>
<li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image3.jpg" /><a href="#">Image3</a></li>
<li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image1.jpg" /><a href="#">Image1</a></li>
<li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image2.jpg" /><a href="#">Image2</a></li>
<li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image3.jpg" /><a href="#">Image3</a></li>     
 </ul>
 <div class="clearfix"></div>
 <!-- prev and next button -->
 <a id="prev" class="prev" href="#"><</a>
 <a id="next" class="next" href="#">></a>
 <!-- pagination -->
 <div id="pager" class="pager"></div>
</div>
<script type="text/javascript">
  $(function() {

   $('#carousel ul').carouFredSel({
    prev: '#prev',
    next: '#next',
    pagination: "#pager",
    auto: true,
    scroll: 1000,
    pauseOnHover: true
   });

  });
  </script>

source image: favbulous.com

Selesai!!.

Gitu Sob, sharing kali ini mengenai widget SlideShow jQuery Carousel untuk Blogger, jika Anda tertarik untuk membuat slideshow Carousel dengan menampilkan Artikel Terbaru atau Popular Post secara otomatis, tunggu artikel Problogiz selanjutnya. So keep in updated here...

Selamat Mencoba!!!

13 komentar

Unknown Author

13 Mei 2013 pukul 15.59

salam boss, numpang nyimak dulu, terima kasih sudah berbagi artikelnya, nya panjang juga ya boss. ijin share boss ke FB.

13 Mei 2013 pukul 17.57

ok sob silahkan:)

jalupangna

15 Mei 2013 pukul 11.51

Wah keren nih kang, izin nyoba ya? thanks..

18 Mei 2013 pukul 18.47

gan, kalau slideshow ini diubah berdasarkan new post gimana ya? apa ada stuktur yang harus diubah? saya sangat berminat menggunakannya!
minta tutor tambahanya dong. MAKASIH BANYAK!

18 Mei 2013 pukul 21.20

untuk slideshow seperti itu biasanya pake json callback script, nanti saya post tentang slidesow conten new post, popular post secara otomatis

29 Juni 2013 pukul 00.47

Gan mana script Slider jQuery Carousel untuk new post di blogger.

minta bantuannya yah gan.

30 Juni 2013 pukul 00.59

untuk recent/new post blogger atau comment slideshow anda bisa cek di artikel http://problogiz.blogspot.com/2013/05/recent-posts-slider-dan-recent-comments.html

Blogs

4 Agustus 2013 pukul 20.44

di coba dulu ya gan script nya
thx buat tutorialnya

_salam_

6 September 2013 pukul 09.46

Mkasih tutorialnya. Ini jquery creditnya ngambil darimana bos?

23 Oktober 2013 pukul 18.57

kok nggak bisa gan

10 Oktober 2014 pukul 12.22

Komentar ini telah dihapus oleh administrator blog.

Kim Monta

25 Desember 2015 pukul 10.17

Gan biar lebih keren lagi gimana cara kasih keterangan gambar pada slide show ini.. ana sdh trpkan di blog coba kunjungi blog ane di http://jerat-online.blogspot.co.id/

21 Maret 2016 pukul 13.59

Terimakasih Untuk tutorialnya,,
Sangat Bermanfaat

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

ProBlogiz

Home

Tutorial

SEO

Basic

Template

Membuat Slide Show jQuery Carousel Keren di Blogger

jQuery Carousel dengan UI Kit untuk Blogger

Javascript (Plugin Carousel)

Markup HTML

CSS

Cara Pasang Slide Show jQuery Carousel Keren di Blogger

Langkah Pertama

Langkah Kedua

Langkah Ketiga

Artikel Terkait Lainnya:

13 komentar

Google+ Followers

Like Me

Blog Arsip

Kategori

Artikel Popular

Artikel Terbaru

Support

Usefull Tools

Pages