Carousel Slide Show

Carousel slideshow dibuat menggunakan jQuery. Slideshow berisikan image, teks, link dan title. Link bisa digunakan sebagai readmore atau dalam bentuk yang lain. Penulisan teks juga harus dibatasi karena box slideshow juga ketinggiannya telah ditentukan. Anda bisa menggunakannya seperti ketika memasang readmore saat posting. Agar lebih jelas silahkan buka link demo yang ada di bawah ini:

D E M O

Cara membuat carousel slideshow

Login ke Blogger.
Setelah halaman dasbor terbuka, silahkan klik "Rancangan (Design)".
Lanjutkan dengan klik "Edit HTML".
Lakukan "Backup Template".
Cari kode <head> dam letakkan javascript di bawahnya.
Cari kode ]]></b:skin>.
Letakkan kode CSS di atas kode tersebut.
Klik Simpan Template (Save Template).
Lanjutkan dengan klik "Rancangan (Design)".
Simpan xHTML melalui:
Add a Gadget » HTML/Javascript » Box HTML/Javascript » SIMPAN/SAVE

KODE CSS Carousel Slide Show :

#GRcarousel{
        width:405px; 
        border:6px solid #777;
        height:330px; 
        margin:0 auto;
        overflow:hidden;
        background: #4f5256;
        background: linear-gradient(top, #4f5256 0%,#81858c 6%,#4f5256 12%,#81858c 14%,#4f5256 100%);
        background: -o-linear-gradient(top, #4f5256 0%,#81858c 6%,#4f5256 12%,#81858c 14%,#4f5256 100%);
        background: -ms-linear-gradient(top, #4f5256 0%,#81858c 6%,#4f5256 12%,#81858c 14%,#4f5256 100%);
        background: -moz-linear-gradient(top, #4f5256 0%, #81858c 6%, #4f5256 12%, #81858c 14%, #4f5256 100%); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f5256), color-stop(6%,#81858c), color-stop(12%,#4f5256), color-stop(14%,#81858c), color-stop(100%,#4f5256));
        background: -webkit-linear-gradient(top, #4f5256 0%,#81858c 6%,#4f5256 12%,#81858c 14%,#4f5256 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5256', endColorstr='#4f5256',GradientType=0 );
}
#GRcaro_sliseshow{
        overflow:hidden;
        position:relative;
        width:402px;
        height:282px;
        border:1px solid rgba(0,0,0,0.5);
        margin-top:6px;
}
#GRcaro_sliseshow ul{
        position:relative;
        left:0;
        top:0;
        list-style:none;
        margin:0;
        padding:0; 
        width:1200px;  
}
#GRcaro_sliseshow li{
        width:400px;
        height:280px; 
        float:left;
        margin-left:0;
        text-shadow:1px 1px 1px #000;
}
#GRcaro_sliseshow li .GRpostbox{
        height:260px;
        width:396px;
        border:3px double rgba(0,0,0,0.2);
        padding:5px 0;
        background:rgba(0,0,0,0.3);
        font-size:12px;
        font-weight:bold;
        color:#FFFF33;
        font-family:Arial;
        font-size:12px;
        font-weight:normal;
}
#GRcaro_sliseshow li .GRpostbox h4{
        font-size:14px;
        font-weight:bold;
        color:#FCC;
        margin:10px 0 5px;
        padding:0 0 4px 0;
        width:190px;
        float:right;
        margin-right:5px;
        text-align:left;
        border-bottom:1px dotted #999;
        display:block;
}
#GRcaro_sliseshow li .GRpostbox img{
        height:240px;
        width:170px;
        border:2px solid #222;
        padding:8px;
        margin:2px 8px 2px 2px;;
        background:#ccc;
        float:left;
        border-radius:5px;
        GRpostbox-shadow:0 0 0 #fff;
} 
#GRcaro_sliseshow li .GRpostbox p{
        margin:5px;
        padding:5px;
        font-size:11px;
        text-align:justify;
        color:#eee;
        text-shadow:1px 1px 1px #000;
}
#GRcaro_sliseshow li .GRpostbox a{       
        font-size:14px;
        font-weight:500;
        text-transform:uppercase;
        color:orange;
        float: right;
        margin:10px 10px 0 0;
        text-decoration:none;
}  
#GRcaro_sliseshow li .GRpostbox a:hover{color:red;}
#buttons{
        padding:0 0 5px 0; 
        float:right;
}
#buttons a{
        display:block; 
        width:31px; 
        height:30px;
        text-indent:-999em;
        float:left;
        margin-top:4px;
        outline:0 solid;
}
#GRposttitle{
        padding:10px 10px 10px 50px; 
        float:left;
        background:url(http://gubhugreyot-icon.googlecode.com/svn/anima/GRgolo-anima-50x25.gif) 4px center no-repeat;
        border:2px solid #444;
}
#GRposttitle img{
        display:block; 
        width:45px; 
        height:18px;
        float:left;
        border:1px solid #444; 
}
#GRposttitle a{font-family:Tahoma;font-size:14px;font-weight:700;color:#fff;text-shadow:2px 2px 2px #000; 
padding-left:10px;text-decoration:none;padding-top:8px;}
#GRposttitle a:hover{color:orange;}
a#prev{background:url(https://lh6.googleusercontent.com/-cng835z10JY/T12qw1J5BCI/AAAAAAAAAVw/Rschu8XRPvI/s128/prev-carousel-slider.png) left center no-repeat;border:1px solid #333;margin-right:3px;background-size:auto 25px;}
a#next{background:url(https://lh3.googleusercontent.com/-YSK6v_Ni1bM/T12qvaPk45I/AAAAAAAAAVo/lqCqUSVOFVk/s128/next-carousel-slider.png) right center no-repeat;border:1px solid #333;background-size:auto 25px;}
.clear{clear:both}

Javascript Carousel Slideshow

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

<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
      var speed = 3000;
      var run = setInterval('rotate()', speed);
      var item_width = $('#GRcaro_sliseshow li').outerWidth();
      var left_value = item_width * (-1);
      $('#GRcaro_sliseshow li:first').before($('#GRcaro_sliseshow li:last'));
      $('#GRcaro_sliseshow ul').css({
            'left': left_value
      });
      $('#prev').click(function () {
            var left_indent = parseInt($('#GRcaro_sliseshow ul').css('left')) + item_width;
            $('#GRcaro_sliseshow ul:not(:animated)').animate({
                  'left': left_indent
            }, 800, function () {
                  $('#GRcaro_sliseshow li:first').before($('#GRcaro_sliseshow li:last'));
                  $('#GRcaro_sliseshow ul').css({
                'left': left_value
                  });
            });
            return false;
      });
      $('#next').click(function () {
            var left_indent = parseInt($('#GRcaro_sliseshow ul').css('left')) - item_width;
            $('#GRcaro_sliseshow ul:not(:animated)').animate({
                  'left': left_indent
            }, 800, function () {
                  $('#GRcaro_sliseshow li:last').after($('#GRcaro_sliseshow li:first'));
                  $('#GRcaro_sliseshow ul').css({
                'left': left_value
            });
            });
            return false;
      });
      $('#GRcaro_sliseshow').hover(function () {
            clearInterval(run);
      }, function () {
            run = setInterval('rotate()', speed);
      });
});

function rotate() {
      $('#next').click();
}
//]]>
</script>

xHTML Carousel Slideshow :

<div id="GRcarousel"><div id="GRposttitle"><a href="http://bloggerstuars.blogspot.com">* GubhuGReyoT - BloGGerStarS-1 *</a></div>
<div id="buttons"><a href="#" id="prev">prev</a> <a href="#" id="next">next</a></div>
<div class="clear"></div>
<div id="GRcaro_sliseshow">
     <ul>
         <li><div class="GRpostbox"><h4>Gadis Jomblo butuh Jodoh...</h4><img src="https://lh6.googleusercontent.com/-DkmvIFciapU/T14I_KL_M2I/AAAAAAAAAWo/xuwBkTtzsGQ/s170/gubhugreyot_cwk-01.jpg" alt="Slide 1"/><p>Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ... </p><a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Hoooo... hooo...hoooo He.... he... he .... Hi.... hi ...">Readmore</a></div></li>
         <li><div class="GRpostbox"><h4>Gadis Jomblo butuh Jodoh...</h4><img src="https://lh3.googleusercontent.com/-d7ZHgHJuYEE/T14I_7CJKSI/AAAAAAAAAWs/aHBahifdv8Q/s170/gubhugreyot_cwk-02.jpg" alt="Slide 2"/><p>Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ... </p><a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Hoooo... hooo...hoooo He.... he... he .... Hi.... hi ...">Readmore</a></div></li>
         <li><div class="GRpostbox"><h4>Gadis Jomblo butuh Jodoh...</h4><img src="https://lh6.googleusercontent.com/-22OSTVfKIMI/T14JAoWd30I/AAAAAAAAAWw/dzBKHZLpryk/s170/gubhugreyot_cwk-03.jpg" alt="Slide 3"/><p>Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ... </p><a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Hoooo... hooo...hoooo He.... he... he .... Hi.... hi ...">Readmore</a></div></li>
         <li><div class="GRpostbox"><h4>Gadis Jomblo butuh Jodoh...</h4><img src="https://lh3.googleusercontent.com/-bG1AX7jozwg/T14JBQdPthI/AAAAAAAAAW4/2tBs_StLeTE/s170/gubhugreyot_cwk-04.jpg" alt="Slide 3"/><p>Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ... </p><a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Hoooo... hooo...hoooo He.... he... he .... Hi.... hi ...">Readmore</a></div></li> 
         <li><div class="GRpostbox"><h4>Gadis Jomblo butuh Jodoh...</h4><img src="https://lh5.googleusercontent.com/-GkzCLx_FMIE/T14JCKL2c2I/AAAAAAAAAXA/hmebmZZKYOY/s170/gubhugreyot_cwk-05.jpg" alt="Slide 3"/><p>Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ... </p><a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Hoooo... hooo...hoooo He.... he... he .... Hi.... hi ...">Readmore</a></div></li>
     </ul>
<div class="clear"></div>
</div>
</div>

Catatan/Keterangan :

Pilih Add Gadget dengan kolom yang cukup untuk memuat Carousel Slideshow.
Panduan backup template dan cara mencari kode di template silahkan buka di Spesial Tutorials yang terletak di sebelah kiri halaman.
Gunakan image slideshow dengan ukuran seperti yang terlihat di kode CSS (height=240px dan width=170px).
Anda bisa juga menyimpan seluruh kode termasuk kode css dan javascript melalui Add a Gadget.
Jika anda sudah menggunakan jQuery.1.3.2.js atau yang setara fungsinya dengan jquery tersebut (jQuery v.1.4.2 hingga jQuery v.1.7.1) maka jQuery dalam posting ini tak perlu digunakan karena dalam satu blog hanya perlu satu jQuery.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Senen KLIWON, Maret, 11, 2012

» Happy Blogging - gubhugreyot «

gubhug reyot

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh