.jpg)
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
Catatan/Keterangan :
Update » Senen KLIWON, Maret, 11, 2012
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 «
mw buat carousel..tp pusing iiiihh help
BalasHapus