Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Jumat, 04 Juni 2010

Membuat SlideShow Thumbnail

Kategori :
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 Dance. 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).

Membuat SlideShow Thumbnail
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>


    Membuat SlideShow ThumbnailMembuat SlideShow Thumbnail
  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'/>

    Membuat SlideShow ThumbnailMembuat SlideShow Thumbnail
  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 Smile.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

9 Komentar untuk Membuat SlideShow Thumbnail

tapi kan memperberat blog ya Kang? dulu aq pny blog kaya gini yg ada slideshow tapi lgsg tak ilangin slide-nya

@muzzy musthofa => memang sih memberatkan blog tapi tidak terlalu memberatkan kok, untuk loading blog yang ringan tetapi banyak aksesoris, itu tergantung kita mengoptimalkan speed blog kita. Terima kasih ^_^

enak bgt ya blog ini cpt banget, gak kaya blogQ yg super berat loadingnya! wuakakakakakakak.
salut banget deh sama Akang, kecil2 dah hebat banget. aq dah tuwir baru tahu blogging akhirnya pengetahuan jadi terbatas. he3x

wah makin lengkap aja nie trik blognya
kereeeeen

Thanks atas kunjungx

Wah sdh lama ane cari script slideshow kek gini,,,keren sob,,,makasih ya triknya,, oke trik memang oke deh

kayanya boleh dicoba karena saya suka upload gambar di blog nih :)

kok gk bsa sih...
jd hitam semua, gk ad gambar'a

Aku masih belajar membuat Blog nieh, maklum ibu ibu. hehhee.. Mau tampilkan Slide dr ambum Pisaca gmn caranya? mohon dibantu. Trus kalo mau share ke FB, kok ada foto Thumbnail. Nah utk ubah foto Thumnail itu gmn caranya? terima kasih