Wednesday, May 11, 2011

Membuat Slide Show dengan thumbnail pada Blogger

Untuk membuat Slide Show di blogger adalah dengan menggunakan Jquery dan Javascipt.
Javascript digunakan untuk mendapatkan Informasi dari recent post, seperti Judul, gambar, dan keterangan postingan
Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat slide untuk recent post



Perhatikan slide di atas, akan terlihat dua buah slide. slide yang sebelah kiri menunjukan keterangan postingan dan gambarnya
slide yang sebelah kanan adalah slide navigasi, yang apabila diklik akan mucul keterangan dan gambarnya pada slide sebelah kiri.

Baiklah mari kita mulai.
Klik 'Layout' pada blogger, dan pergi ke "edit HTML", dan kemudian centang tulisan 'Expand Widget Templates' setelah itu cari kode "]]></b:skin>" dalam template kamu,
Lalu kopi-kan style CSS berikut diatas kode tersebut:

<style>
body {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:9pt;
line-height:1.4em;
text-align:left;
}


/* ---------[ Slideshow ]--------- */

#home-top {
width:950px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ---------[ Slideshow Slides ]--------- */

#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}

#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#slideshow .slides li .entry p {
margin: 0;
}

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}

/* ---------[ Slideshow Navigation ]--------- */

#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}

#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}

#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;

}



.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}

.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}

#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}

.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>
karena effect slide ini berdasarkan padaJquery plugin dinamai Cycle, jadi setelah kode CSS di atas
kita harus memasukan kerangka Jquery dan Cycle plugin.
Kemudian tambahkan kode javascript di bawah ini setelah kode "]]></b:skin>":
Klo yang diatas (Style cssnya) sebelum kode "]]></b:skin>", nah klo yang di bawah ini (Javascript) setelah kode "]]></b:skin>"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script>
kamu bisa mendownload kedua java scipt di atas, dan meletakannya di hostingan milik kamu. Kemudian letakan kode berikut setelahnya:
<script type="text/javascript">

$slideshow = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
tabSpeed: 1000,      // time it takes to slide in each slide (in ms)
fx: 'fade',   // the slide effect to use

init: function() {
 // set the context to help speed up selectors/improve performance
 this.context = $('#slideshow');

 // set tabs to current hard coded navigation items
 this.tabs = $('ul.slides-nav li', this.context);

 // remove hard coded navigation items from DOM
 // because they aren't hooked up to jQuery cycle
 this.tabs.remove();

 // prepare slideshow and jQuery cycle tabs
 this.prepareSlideshow();
},

prepareSlideshow: function() {
 // initialise the jquery cycle plugin -
 // for information on the options set below go to:
 // http://malsup.com/jquery/cycle/options.html
 $('div.slides > ul', $slideshow.context).cycle({
     fx: $slideshow.fx,
     timeout: $slideshow.timeout,
     speed: $slideshow.slideSpeed,
     fastOnEvent: $slideshow.tabSpeed,
     pager: $('ul.slides-nav', $slideshow.context),
     pagerAnchorBuilder: $slideshow.prepareTabs,
     before: $slideshow.activateTab,
     pauseOnPagerHover: true,
     pause: true
 });   
},

prepareTabs: function(i, slide) {
 // return markup from hardcoded tabs for use as jQuery cycle tabs
 // (attaches necessary jQuery cycle events to tabs)
 return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
 // get the active tab
 var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

 // if there is an active tab
 if(activeTab.length) {
     // remove active styling from all other tabs
     $slideshow.tabs.removeClass('on');

     // add active styling to active button
     activeTab.parent().addClass('on');
 }   
}   
};


$(function() {
// add a 'js' class to the body
$('body').addClass('js');

// initialise the slideshow when the DOM is ready
$slideshow.init();
});

</script>

Terakhir Klik 'Save Template'
Untuk kegiatan di "edit HTML sudah selesai.

sekarang kita mulai kode utama untuk slidenya,
selanjutnya letakan kode HTML berikut setelah javascript di atas:


Nah sekarang coba pergi ke >> Layout >> Page element, kemudian tambahkan 'Add a Gadget' di atas postingan kamu, baru kemudian kopikan kode yang di bawah ini:

<div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">

<!--code of the left part : image ,title and post summary -->

<div class="slides">
<ul class="clearfix" style="position: relative;">

<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>

</ul>
</div>
Kode di atas adalah untuk menampilkan slide bagian kiri; yang akan menampilkan gambar,judul, dan keterangan post
dan berikutnya kode untuk menampilkan slide bagian kanan; yang menampilkan judul postingan dengan Thumbnail.
Letakan kode di bawah setelah kode di atas:
<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>

<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>

<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>

<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>

<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>

</ul>

</div>
</div>

Perhatikan kode slide kiri dan slide kanan diatas, kamu akan melihat masing-masing attribute dari <a> untuk kode slide kanan menuju ke attribut <li> ke kode slide sebelsh kiri
contohnya:
disebelah kiri menampilkan:
<li id="main-post-1".....>
dan di sebelah kanan menampilkan:
<a href="#main-post-1".....>
jadi maksudnya, jika kita klik link di slide sebelah kanan, maka slide di sebelah kiri akan menampilkan kontennya.
slide di sebelah kanan mengontrol slide di sebelah kiri.
semua kode dari slide-slide tersebut tidak akan bekerja apabila tidak di inisialisasikan dalam satu variable.

Ok. Terakhir klik save widget, dan cek apakah slidenya sudah jalan.

Disadur dari
Simplex Design

No comments:

Post a Comment

Category

17 + (27) Ada - ada aja (8) Ada ada aja (1) Adidas (1) Adsense (7) Affiliate (1) Aktris (1) Alam kita (3) Alexa (2) Alexandra (1) Alias (1) Amazon (2) Anak (12) Anastasya (1) Andika (1) Android (2) Anggota (1) Angle Tattoos (1) Antivirus (8) Antivirus Terbaru (8) Apple (2) Apps untuk pelajar/mahasiswa (1) Ariel Peterpan (1) Arifinto (2) Artikel Menarik (21) Artis (1) Artis Indonesia (3) Artis manca (1) Astronomi (1) Auliani (1) Avatar berbicara (1) Bajak Laut (1) Bandung (1) BB++ (3) Belanja (1) berita (1) Berita Aneh (6) Berita Artis (6) Berita Astronomi (2) Berita Dalam negri (2) Berita Dunia (4) Berita Hewan (15) Berita Internasional (2) Berita Kesehatan (7) Berita Makanan Minuman (14) Berita Olahraga (8) Berita Panas (1) Berita Pendidikan (1) Berita Pengetahuan (2) Berita Renungan (5) Berita Sejarah (6) Berita Selebriti (1) Berita Teknologi (2) Berita Tentang Musik (2) Berita Tumbuhan (1) Berita unik (4) Berita Utama (2) Bieber (1) Bintang (1) Biografi (1) Bisnis (2) BlackBerry (7) Blog (49) Blogger (23) Brondong (1) Browser (1) Buah Unik (3) Budaya Aneh (1) Bugil (1) Cantik (1) Cara Bisnis Online (2) Cara daftar Facebook (1) Cara Recovery Data (2) Cara Self Test Printer (5) Cara Service Komputer (25) Cara Service Laptop (8) Cara Service Monitor (34) Cara Service Ponsel (3) Cara Service Printer (63) Cara Service TV (5) Cara Service UPS (1) Cari $ (16) Celebrity (3) Chrome (2) Clicksor (3) Contoh (1) Coppas Animal (1) Coppas Berita (5) Coppas Extreme (3) Coppas Foto Hot (3) Coppas Lucu (1) Coppas Mistery (1) Coppas Sejarah (1) Coppas Style (2) Coppas Unik (1) Cukur (1) Cute (5) Definisi dan Sejarah Tattoo (3) Dicukur (1) Dipanggil (1) disappear (1) Domain-Hosting (2) Download (4) Download MP3 Gratis (1) Download Software (21) Downloader (1) Dugaan (1) Dugem (1) Dunia (1) Dunia Alam (6) Dunia aneh (5) Dunia Arkeologi (1) Dunia Arkeologi dan Sejarah (1) Dunia Design (3) Dunia Ekonomi (3) Dunia Extream (3) Dunia informasi (6) Dunia Kriminal (2) Dunia Kuliner (3) Dunia Medis (4) Dunia Militer (2) Dunia Misteri (1) Dunia Pendidikan (1) Dunia Rohani (1) Dunia Sejarah (1) Dunia Sosial (7) Dunia Teknologi (6) Dunia Tips Dan Trick (1) Dunia Wanita (2) e-learning (1) Elizabeth (1) email (3) Excel (11) Facebook (8) Fakta Aneh (16) Fakta Dunia (8) Fakta Indonesia (13) Fakta Unik (68) Feed (1) Fenomena unik (1) Firefox (4) Flash (2) Football (1) Foto (2) Foto Hot (7) Freeware (24) Friendster (1) Funny (1) Funny Pics (15) Gadget (1) Gadget dan Hanphone (2) Gambar Aneh (1) Gambar Extream (4) Gambar Lucu (1) Gambar Unik (4) Game (1) Games (6) Gathan (1) Genit (4) Githa (1) Gmail (1) Google (28) Gosip (2) Gossip Celeb (4) Gratis (1) Gumilang (1) Handphone (3) hardisk (1) Health (3) Hilabi (1) Hollywood (1) Honda (1) Hot (2) Hot Girls (1) Hot News (25) Hot Pics (11) HP (1) HTC (5) html (3) Indonesia (2) info (11) Info Harga (1) Info Menarik (24) Internasional (1) Internet (19) IP Address (1) iPone (1) Istilah Komputer (1) Jadwal Piala Dunia 2010 (2) Jadwal Puasa (1) Jadwal Sholat (1) Japan (1) Jelita (1) Jennifer (1) Jepang (1) Joanne (1) Justin (1) Karena (1) Karier dan Gaya Hidup (1) kartu Natal (1) Katanya ... (5) Kate Middleton (2) Keajaiban Alam (3) Kebesaran Allah (1) Kecantikan (1) Kecantikan Dan Kesehatan (3) Kejadian Aneh (3) Kekayaan (1) Keramas (1) Keren (7) Kesehatan (5) Kisah Mistis (1) Koleksi (1) Komputer (12) Komputer dan Internet (5) Kontes Aneh (3) Kreatifitas (6) Kuliner (1) Kurniawan (1) Lady Gaga (1) Lain-Lain (2) Legenda (1) Lenovo (1) LG (2) Lifestyle (3) link (4) Link Friends (1) Lintas Indonesia (3) Lirik Lagu (1) Lorenza (1) Makan (1) Malinda (3) Maling (1) Maling ATM (2) Marcia (1) Meninggal (1) meta tag (2) Miliar (1) Military (1) Misteri (10) Misteri - Misteri Di Dunia (3) Miyabi (1) Mobil (30) Model (13) Modem ADSL (1) Monetize (16) Motivasi Dan Inspirasi (1) Motorola (1) mp3 (1) Musik (2) Nadine (1) Nafeeza (1) Nakal (4) Narkoba (1) Netbook (2) News (54) Nokia (1) Nonton (1) office 2010 (1) Oktaviany (1) Olahraga (1) Online (1) online ticket (1) Operasi (1) Otomotif (2) Paid Survey (2) paidreview (2) Panas (1) Panduan Service Monitor I (10) Panduan Service Monitor II (13) Parse (1) Payment (1) Paypal (1) PDF (4) Pengetahuan (4) Pengetahuan Umum (4) Pengingat Sholat (1) Pengolah Gambar (1) Photo (1) Piala Dunia 2010 (2) Ping (1) Plastik (1) Plug-in Wordpress (13) Polisi (1) Ponsel (10) Porno (1) Portable (2) POS UNAS SD-SMP-SMA 2010 (1) Powerpoint (2) Prediksi 2010 (1) Presenter (1) Pria (1) Printer (1) Produk (1) Produk Unik (10) Profil Artis (7) Profil Tokoh (5) Profile (1) Psikotes (1) Putri (1) Rahmat (1) Read more (1) Rehab (1) Rekor Dunia (30) related post. tips (3) Resetter Canon (26) Resetter Epson (18) Resetter HP (5) RSS (2) Sains Dan Antariksa (4) Salley (1) Samsung (9) Science (1) Sebagai (1) Sebelum (1) Sedang (1) Sejarah (3) Sejarah Dunia (1) Sekedar Share (11) sekilas info (2) Seksi (1) Seksiologi (2) Selebritis (1) Selesai (1) Seni Dan Budaya (1) Senjata (1) SEO (14) Sepeda (1) Sesudah (1) Setelah (1) Sexsualitas (1) Sexy (10) Shaleh (1) Sheila (1) Sistem Tools (1) sms lebaran (2) Software (22) Software HP (5) Softwere (8) Speedy (1) Sport (1) Statistik (1) Suami (2) Sulityo (1) Suster (1) Syahrini (1) Tahukah anda? (60) Tatto Bahu (1) Tattoo Badan (4) Tattoo China (1) Tattoo Dolphin (1) Tattoo Hewan (2) Tattoo Ikan Koi (1) Tattoo Jepang (1) Tattoo Kanji (1) Tattoo Lebah (1) Tattoo Lengan (2) Tattoo Malaikat (1) Tattoo Serangga (1) Tattoo Tengkorak (1) Tattoo Tribal (2) Tattoo Wanita (2) Taylor (1) Teknologi (2) Telanjang (1) Telkom Promo (1) Template (3) Tempo Dulu (1) Tercantik (1) Terima (1) Tip Trik Internet (8) Tip Trik Windows (7) tips (166) Tips and Trik (10) Tips Blog (1) Tips Cinta (1) Tips Dan Info (6) Tips Dan trick (5) Tips Dan Trik (3) Tips Diet (1) Tips Kecantikan (1) Tips Kesehatan (9) Tips Suami Istri (5) Tools (8) Topless (1) Tragedi (1) Translator (4) Tribal Tattoos (3) Tsunami (1) Tukang (1) Tumbuhan (1) Twiter (3) Uncategorized (2) Unik (4) Unik Dan Aneh (7) Update Antivirus (8) Upskrit (1) Usaha (1) Utility (1) Video (1) Video Extream (1) Video mesum (4) virus (3) Wakaka (2) Wanita (1) Warta Terkini (9) Warteg (1) Widget (2) windows (26) windows 7 (3) WP (1) Ziddu (7) ZTE (1)