Membuat SlideShow Thumbnail

Membuat SlideShow Thumbnail. Setelah saya membagikan tentang Membuat Featured Content Slider sekarang saya juga ingin membagikan tentang slideshow juga namun slideshow kali ini berbeda dengan slideshow sebelumnya. Kalau yang sebelumnya tampilannya familiar dengan slideshow lainnya untuk kali ini menurut saya berbeda dari slideshow yang lain karena terlihat elegant dan keren deh pokoknya . Kalau menurut saya slideshow ini lebih baik di pakai di blog atau web yang berisikan tentang film, berita dan yang berhubungan tentang gambar-gambar. karena tampilannya seperti di bawah ini (Untuk melihat Demo Langsung Klik saja gambarnya).


Sekarang kita lihat langkah memasangnya yuk!

1. Seperti biasa login ke blogger
2. setelah itu masuk ke Tata letak => Edit HTML
3. lalu cari kode ]]></b:skin> dan masukan kode di bawah ini tepat di atasnya
   
   
   <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>
   
   
4. Setelah itu cari kode </head> lalu masukan kode di bawah ini tepat di atasnya. (catatan : apabila sudah terdapat kode di bawah ini di template sobat maka tidak usah menambahkannya lagi)
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   
   
5. Setelah itu masukan kode di bawah ini tepat di bawah kode di atas
   
   
   <script src='http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js' type='text/javascript'/>
   
   <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: &#39;fade&#39;, // the slide effect to use
   
   init: function() {
   // set the context to help speed up selectors/improve performance
   this.context = $(&#39;#slideshow&#39;);
   
   // set tabs to current hard coded navigation items
   this.tabs = $(&#39;ul.slides-nav li&#39;, this.context);
   
   // remove hard coded navigation items from DOM
   // because they aren&#39;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
   $(&#39;div.slides &gt; ul&#39;, $slideshow.context).cycle({
   fx: $slideshow.fx,
   timeout: $slideshow.timeout,
   speed: $slideshow.slideSpeed,
   fastOnEvent: $slideshow.tabSpeed,
   pager: $(&#39;ul.slides-nav&#39;, $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 = $(&#39;a[href=&quot;#&#39; + nextSlide.id + &#39;&quot;]&#39;, $slideshow.context);
   
   // if there is an active tab
   if(activeTab.length) {
   // remove active styling from all other tabs
   $slideshow.tabs.removeClass(&#39;on&#39;);
   
   // add active styling to active button
   activeTab.parent().addClass(&#39;on&#39;);
   }
   }
   };
   
   
   $(function() {
   // add a &#39;js&#39; class to the body
   $(&#39;body&#39;).addClass(&#39;js&#39;);
   
   // initialise the slideshow when the DOM is ready
   $slideshow.init();
   });
   
   </script>
   
   
6. lalu simpan dan mari kita menuju ke halaman Elemen Halaman untuk menaruh kode HTMLnya dan agar slideshow tersebut muncul
7. Setelah berada pada Elemen halaman, tambahkan sebuah gadget. Untuk menambahkannya sobat bisa memilih tempat yang sobat sukai, kalau saran saya sih di bawah header.
8. Setelah itu pilih yang HTML/Javascript
9. lalu masukan kode di bawah ini kedalamnya
   
   
   <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(Gambar besar) " >
   <div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
   <p>Penjelasan di bawah Judul di Gambar Besar</p></div>
   </li>
   <li id="main-post-2" style="background: transparent url(Gambar besar) " >
   <div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
   <p>Penjelasan di bawah Judul di Gambar Besar</p></div>
   </li>
   <li id="main-post-3" style="background: transparent url(Gambar besar) " >
   <div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
   <p>Penjelasan di bawah Judul di Gambar Besar</p></div>
   </li>
   <li id="main-post-4" style="background: transparent url(Gambar besar) " >
   <div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
   <p>Penjelasan di bawah Judul di Gambar Besar</p></div>
   </li>
   <li id="main-post-5" style="background: transparent url(Gambar besar) " >
   <div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
   <p>Penjelasan di bawah Judul di Gambar Besar</p></div>
   </li>
   
   </ul>
   </div>
   
   <ul class="slides-nav">
   
   <li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>
   
   <li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>
   
   <li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>
   
   <li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>
   
   <li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>
   
   </ul>
   
   </div>
   </div>
   
   Penjelasan :
   
   • Gambar besar=> ganti dengan image yang ingin tampil di image thumbnail besar
   • Judul di Gambar Besar => ganti dengan Tulisan Judul untuk di tampilkan di gambar besar
   • Penjelasan di bawah Judul di Gambar Besar => ganti dengan Tulisan penjelasan di pada gambar besar
   • URL Judul=> ganti dengan url yang menuju pada judul di gambar besar
   • Gambar kecil => ganti dengan image yang ingin tampil di image thumbnail kecil
   • Deskripsi di samping gambar kecil=> Tulis penjelasan di pada gambar besar
   
   
10. Setelah itu simpan deh dan sobat dapat melihat hasilnya

Bagaimana mudah bukan cara membuat slideshow Thumbnail? Nah untuk itu saya sarankan agar membacanya dengan detail agar tidak terjadi kesalahan sedikitpun. Saya akhir Terima kasih dan Happy Blogging .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg