Artikel Copas 100%

Berbagi seadaanya.

Select Menu
  • Home
  • Blogging
    • Tutorial Blogspot
    • CSS
    • jQuery
    • Widget
  • Tools
    • Font Awesome
    • HTML Editor
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Sitemap
  • Static Page
  • Error Page
Home » Blogging » CSS » jQuery » Widget » Slide Show jQuery Carousel

Senin, 13 Januari 2014

Slide Show jQuery Carousel

Add Comment
Blogging, CSS, jQuery, Widget
Slide Show jQuery Carousel 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).

  • Demo



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

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>
Note !
Untuk url, image/gambar dapat Anda ganti atau sesuaikan dengan kebutuhan blog
untuk menambah gambar lebih banyak, Anda dapat menambah elemen <li>...</li>

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
Note
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;
}
Note !
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="http://yourjavascript.com/11152481411/slide-show-jquery-carousel.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>
Code CSS:
#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/AVvXsEjWKAUh2SLjJMP_PmQ34od3n0g201k2DpIwobup8_BjlHO1HKk0cHrIX1eoFvirFBJq4zftcvW9sS9zH_WPZCWbe4IeGUNBleupzqIaelEdGvkZ09AQIyGHsSPGy-ZvtQXOwkQ-N-RTusdx/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/AVvXsEgfLM6LgWubzlUX-aMQVYFCvQdHyZ_odAWsyZ2dy06V8s7jnKNmXvp0NFbo2l911ZiTbLVo5TExBeiO_Q1DAc3u06pHAjbtpJtFIjv9z_r32nCUmEpP79VGLMR4JdP1x5xPA20Fk4fr4XlC/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/AVvXsEjAQ4BC0-XErOhvk6nzDb_wnSV1gcyn8hOAxv-gdT_Tl0ijXtIIhKP3y9SPxFFX05wgqI66zwDNQB6zjNTPMvKFmQbwAVPECJtiSiNSy48I_l5ou-IZSTHv2ElUiqmzHnhlEzIxgakMoEgF/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/AVvXsEjAQ4BC0-XErOhvk6nzDb_wnSV1gcyn8hOAxv-gdT_Tl0ijXtIIhKP3y9SPxFFX05wgqI66zwDNQB6zjNTPMvKFmQbwAVPECJtiSiNSy48I_l5ou-IZSTHv2ElUiqmzHnhlEzIxgakMoEgF/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/AVvXsEjAQ4BC0-XErOhvk6nzDb_wnSV1gcyn8hOAxv-gdT_Tl0ijXtIIhKP3y9SPxFFX05wgqI66zwDNQB6zjNTPMvKFmQbwAVPECJtiSiNSy48I_l5ou-IZSTHv2ElUiqmzHnhlEzIxgakMoEgF/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="Image1" src="/Slide-Show-jQuery-Carousel/images/1.jpg" /><a href="#">Image1</a></li>
<li><img alt="Image2" src="/Slide-Show-jQuery-Carousel/images/2.jpg" /><a href="#">Image2</a></li>
<li><img alt="Image3" src="/Slide-Show-jQuery-Carousel/images/3.jpg" /><a href="#">Image3</a></li>
<li><img alt="Image4" src="/Slide-Show-jQuery-Carousel/images/4.jpg" /><a href="#">Image4</a></li>
<li><img alt="Image5" src="/Slide-Show-jQuery-Carousel/images/5.jpg" /><a href="#">Image5</a></li>
<li><img alt="Image6" src="/Slide-Show-jQuery-Carousel/images/6.jpg" /><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>

<script type="text/javascript">
$(function() {
$('#carousel ul')
.carouFredSel({prev: '#prev', next: '#next', pagination: "#pager", auto: true, scroll: 1000, pauseOnHover: true});
});
</script>

  • Demo

Selesai!!.

Sekian, berbagi cerita 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 selanjutnya.
Selamat Mencoba!!!
Suka Artikel? Bagikan: Facebook Twitter Google+
0 Komentar untuk "Slide Show jQuery Carousel"

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Popular Week

  • EDU Backlink
    EDU Backlink
    Backlink .EDU sekarang ini masih menjadi incaran bagi para blogger untuk menaikkan ranking situs/blog mereka, tapi kadang-kadang kita meras...
  • Bosan Dengan Dunia Blogger..
    Bosan Dengan Dunia Blogger..
    Selamat pagi sobat semua.. Mungkin anda sudah merasakan suatu kejenuhan yang anda alami saat ini dengan blog anda mungkin pertama anda membu...
  • About This Tattoo
    About This Tattoo
    Apa itu Tattoo? Dalam Bahasa Indonesia disebut dengan istilah "Rajah". Tattoo merupakan produk dari Body Decorating dengan mengga...
  • Opini Tentang Blog Ini
    Opini Tentang Blog Ini
    Sejauh ini saya sudah merasa bersalah dengan apa yang saya share.  Beberapa hal gak penting terkadang juga saya share sampai sampai sobat bi...
  • Optimasi Posting Blog
    Optimasi Posting Blog
    Yang namanya sebuah blog, tentu tidak terlepas dari posting. Posting dalam blogger merupakan sebuah "entry" yang ditulis dengan me...
  • Menampilkan Pesan Pada Jam Tertentu
    Menampilkan Pesan Pada Jam Tertentu
    Pernah terpikirkan untuk menampilkan pesan pada jam tertentu (Time Message) pada blog kita? tentu saja ya, Ada kalanya ketika sedang tidak o...
  • 7 Apps Android Untuk Pengguna Blogger
    7 Apps Android Untuk Pengguna Blogger
    Dibawah ini adalah 7 AplikasiAdroid yang populer dan banyak digunakan oleh pengguna Blogger. Dan sebagai seorang pengguna blogger tidak ada ...
  • Free Download Smadav 9.3 Pro Full Version + Serial Number
    Free Download Smadav 9.3 Pro Full Version + Serial Number
    Semenjak Blogger saya di hapus saya jarang update di Faceblog jadi ketinggalan software yang sudah update deh, tapi gak apa apa daripada g...
  • Banned Spammer di Komentar Blog
    Banned Spammer di Komentar Blog
    Beberapa teman saya bertanya bagaimana cara menghentikan spammer di Blog.. Artikel ini saya dapat dari master tuts tahun lalu, javascript in...
  • Scattered Polaroids Gallery (Tersebar)
    Scattered Polaroids Gallery (Tersebar)
    Sebuah flat bergaya Polaroid Galeri di mana item-item (di sini saya gunakan foto) yang tersebar secara acak dalam sebuah wadah (Container). ...
Diberdayakan oleh Blogger.

Labels

  • Android
  • Blogging
  • CSS
  • Facebook
  • Game
  • jQuery
  • Komputer
  • Lain-Lain
  • Photoshop
  • SEO
  • Software
  • Template
  • Twitter
  • Widget

Blog Archive

  • ▼  2014 (101)
    • ►  Juli (5)
    • ►  Juni (10)
    • ►  Mei (12)
    • ►  April (12)
    • ►  Maret (11)
    • ►  Februari (14)
    • ▼  Januari (37)
      • Pop Up Facebook Like Box With Lightbox Effect Vali...
      • Dynamic Mag Responsive Blogger Template
      • Adobe Photoshop Cs6
      • Headline Breaking News di Blog
      • Faster Vsand Blogger Templates SEO Valid HTML5 Res...
      • Loading Page Blogger
      • Floating Social Share Buttons for Blogger
      • Recent Comment Blogger Valid HTML5
      • Recent Posts Slider With Navigation
      • List Icon Font Awesome dan CSS Value Content V4.0.3
      • Tips SEO Dari Google [Download]
      • Karma - Creative Landing Page Blogger Templates
      • Compact News Previewer with jQuery
      • Polaroid Photobar Gallery with jQuery
      • Hover and Click Trigger for Circular Elements with...
      • CSS3 Lightbox
      • jQuery Image Slider With Three Panels and 3D Look
      • Accordion Style Slider with Valid CSS3
      • Slide Show jQuery Carousel
      • Menambah Tombol Open / Close pada Blog
      • 7 Apps Android Untuk Pengguna Blogger
      • Timely Alarm Clock - Bitspin Sekarang Gratis Setel...
      • Aplikasi Kamera Android Terbaik Pilihan 2014
      • Icon Social Share dengan Tooltip
      • Membuat Google Custom Search Engine di Blogger
      • Popular Posts Multi Color Flat UI
      • Photo Collage Max 2.2.5.6 Full Crack
      • Blackberry Messenger for PC
      • RespoAum Responsive Blogger Template
      • Elegant Photography Blogger Template
      • News Pro Responsive Blogger Template
      • iNews 2014 Responsive Blogger Template
      • Label Cloud CSS Blogger (Versi Hijau)
      • Widget Kotak Berlangganan With Sosial Icons
      • Cara Mengaktifkan dan Setting Robot.txt Pada Blog
      • Membuat Breadcrumbs Terindex Oleh Google
      • Cara Membuat Menu Navigasi Vertical Di Blog
  • ►  2013 (71)
    • ►  Desember (13)
    • ►  November (6)
    • ►  Agustus (1)
    • ►  Juni (8)
    • ►  Mei (33)
    • ►  April (10)

Labels

  • Android
  • Blogging
  • CSS
  • Facebook
  • Game
  • jQuery
  • Komputer
  • Lain-Lain
  • Photoshop
  • SEO
  • Software
  • Template
  • Twitter
  • Widget

Labels

  • Android
  • Blogging
  • CSS
  • Facebook
  • Game
  • jQuery
  • Komputer
  • Lain-Lain
  • Photoshop
  • SEO
  • Software
  • Template
  • Twitter
  • Widget

About Me

Unknown
Lihat profil lengkapku or visit on

© Artikel Copas 100% powered by Blogger.com.
All Right Reserved.