Blog Tutorial

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

Jumat, 17 Desember 2010

Featured Content Image Slideshow

Kategori : ,
Featured Content Image Slideshow
Udah berapa hari y ga update tentang Blogging, maaf y untuk para pengunjung setianya oketrik kalau nunggu2 tentang postingan blogging, bukannya saya malas, tapi akhir2 ini sibuk banget. Sebagai gantinya sekarang saya akan memberikan post tentang blogging yang berjudul Featured Content Image Slideshow, trik ini terdapat pada template buatan saya yaitu okezine blogger template, kalau mau lihat demonya silahkan ke link itu dan klik demo.
  1. Login ke blogger
  2. masuk ke Rancangan >> Elemen Halaman
    Rancangan oketrik
  3. Tambah kan sebuah gadget (pilih tempat yang anda suka tapi lebar)
    Gadget oketrik
  4. Pilih yang HTML/Javascript dan taruh kode di bawah ini di dalamnya


    <style>
    ul.slideshow{list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:20px 10px 0 5px; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; }
    ul.slideshow li{position:absolute; left:0; right:0}
    ul.slideshow li.show{z-index:500}
    ul img{width:600px; height:240px; border:none}
    #slideshow-caption{width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500}
    #slideshow-caption .slideshow-caption-container{padding:5px 10px; z-index:1000}
    #slideshow-caption h3{margin:0; padding:0; font-size:16px}
    #slideshow-caption p{margin:5px 0 0 0; padding:0}
    </style>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[

    $(document).ready(function() {

    //Execute the slideShow, set 6 seconds for each images
    slideShow(3000);

    });

    function slideShow(speed) {


    //append a LI item to the UL list for displaying caption
    $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

    //Set the opacity of all images to 0
    $('ul.slideshow li').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('ul.slideshow li:first').css({opacity: 1.0});

    //Get the caption of the first image from REL attribute and display it
    $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
    $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

    //Display the caption
    $('#slideshow-caption').css({opacity: 0.7, bottom:0});

    //Call the gallery function to run the slideshow
    var timer = setInterval('gallery()',speed);

    //pause the slideshow on mouse over
    $('ul.slideshow').hover(
    function () {
    clearInterval(timer);
    },
    function () {
    timer = setInterval('gallery()',speed);
    }
    );

    }

    function gallery() {


    //if no IMGs have the show class, grab the first image
    var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

    //Get next image caption
    var title = next.find('img').attr('title');
    var desc = next.find('img').attr('alt');

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

    //Hide the caption first, and then set and display the caption
    $('#slideshow-caption').animate({bottom:-70}, 300, function () {
    //Display the content
    $('#slideshow-caption h3').html(title);
    $('#slideshow-caption p').html(desc);
    $('#slideshow-caption').animate({bottom:0}, 500);
    });

    //Hide the current image
    current.animate({opacity: 0.0}, 1000).removeClass('show');

    }

    //]]>
    </script>

    <ul class='slideshow'>

    <li><a href='http://okezine.blogspot.com/2010/12/ini-lokasi-penjualan-tiket-semifinal.html'><img alt='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis...' src='http://3.bp.blogspot.com/_QfoNn403afE/TQO9fAHPgJI/AAAAAAAABnU/YdxBwnI4LF0/s1600/101058_tiket-asli--atas----tiket-palsu_300_225.jpg' title='Tickets ; Lorem Ipsum'/></a></li>

    <li><a href='http://okezine.blogspot.com/2010/12/merah-putih-wajib-waspadai-filipina.html'><img alt='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis...' src='http://1.bp.blogspot.com/_QfoNn403afE/TQR-BWDx6XI/AAAAAAAABnc/_BMRf7nx7_I/s1600/F3PTPGmN27.JPG' title='Indonesia VS Philipina'/></a></li>

    <li><a href='http://okezine.blogspot.com/2010/12/booth-segera-tinggalkan-laos.html'><img alt='Pelatih asal Inggris, David Booth tak lama lagi akan meninggalkan timnas Laos.' src='http://1.bp.blogspot.com/_QfoNn403afE/TQO8y8uE-1I/AAAAAAAABnM/EqvR4cDMFaY/s1600/100998_irfan-haarys-bachdim-berhadapan-dengan-penjaga-gawang-laos_300_225.jpg' title='Boot Tinggalkan Laos'/></a></li>

    <li><a href='http://okezine.blogspot.com/2010/12/chelsea-manfaatkan-laga-mu-lawan.html'><img alt='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis...' src='http://2.bp.blogspot.com/_QfoNn403afE/TQO8dTIBYQI/AAAAAAAABnI/xcWD246b81I/s1600/56800_john_terry_300_225.jpg' title='Lorem Ipsum bla bla bla'/></a></li>

    </ul>


    Penjelasan :
    • kode yang berwarna Hijau, ganti dengan alamat url postingan anda
    • kode yang berwarna kuning, ganti dengan deskripsi atau penjelasan dari postingan anda
    • kode yang berwarna biru, ganti dengan alamat gambar postingan anda
    • kode yang berwarna coklat, ganti dengan judul postingan anda
  5. Setelah itu simpan dan lihat hasilnya
    simpan oketrik

Mudah bukan? trik baik untuk blog yang berisikan berita dan informasi dan trik ini membuat daya tarik kepada pengunjung agar lebih betah di blog anda, namun trik ini agak sedikit membuat blog anda berat karena menggunakan script javascript dan jquery. mungkin ini saja yang bisa saya sampaikan. Terima kasih dan Happy Blogging.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

5 Komentar untuk Featured Content Image Slideshow

keren oketrikkk,,,
baru tau ane caranya begini

mas, mau nanya nih, gimana cara membuat koment admin beda backgrund kyak mas, soalnya, template sy agak mirip sm tmplate mas ini, trik biasa gk sama, thnk befor mas, :)

keren oketrik... makasih yah buat tutorialnya

mantap banget nih

ditunggu lagi yah trik2 selanjutnya

thankss banget mas :)

keren ni gan , lumayan bettt

Makasih banyak nih oketrik atas triknya...