Cara Membuat atau Memasang Slide Show Pada Blogger

log in dulu gan ke blogger.
kemudian klik rancangan -> edit HTML.
Nah, jangan lupa di download dulu template nya, nanti kenapa2 rusak atau bugs ane yang disalahin,
jika template sudah di amankan. Copy kode CSS dibawah ini:

.carousel{
float:left;
margin: 0;
padding:0px;
}
.carousel .widget {
width: 920px;
background:#000000;
margin: 0;
padding:0;
}
.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 910px;
height: 155px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
}
.stepcarousel .panel img{
float: left;
background:#666666;
margin: 0px;
padding:5px;
}
.stepcarousel .panel img:hover{
background:#000000;
}
setelah di copy, cari ]]></b:skin> dan letakkan kode CSS nya diatas ]]></b:skin>

lalu copy kode JQuery dibawah ini dan letakkan di atas kode </head>

kemudian KLIK SIMPAN TEMPLATE & klik di bagian TATA LETAK.
di bagian TATA LETAK, ADD GADGET dan pilih HTML/javascript, lalu copy kode dibawah ini :

<center>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:false, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsr7DxmNq3SgCpktFW2Rykl6iVE0eR1HPNOKPs18E5VbWMkJ9K87Xr3N6kzpuEGaul9EU5ZMFEIrBU9pWfXftKKZH0cr0cQunXHyCVORfBBleE4gf2Huj3JwI8-9pj5DnDNJn2rbyUNWQ/s1600/Left_Arrow.png', 30, 30], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMDhoahr8wEPSh5UQioIVZzvlibESfkoI3LSv3BCBGvw8mNRPWBq6F-UFEiGTsZDNITYl6LlgwGTa6nn-pjAXkGIbJEJrOtiV-avuIZ9vfLUimA3i13kjdDt2saFaZYqsItRMFz-rBEBA/s1600/Right_Arrow.png', -75, 30]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script><style type="text/css">
#mygallery{overflow: hidden;}
</style>
<div class="stepcarousel" id="mygallery">
<div style="width: 5170px;" class="belt">



<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Anti-Virus" href="http://co-paz.blogspot.com/search/label/Anti-Virus" target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMwnU8K-QTuQfdQvUUDyNff_3cHl3I3yO3FP3c1lh9lzbaI1Iv11bkmY7UmxyDDMmoGzoK3MOaFQEUqb2hIm31wKHCayWJkG1ytNoKaRQL4Gc8xcwaFrfH9iopSUCHKcNHlOOCT7Fm3Qc/s320/antivirus.jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Blog_Tips" href="http://co-paz.blogspot.com/search/label/Blog_Tips" target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlD4cLqcLv-1ko1YMEA-EYY8HQYq8dMJQ3jqcWm9os3FGHqyNSBBd3bHAW1CELh1ablrQdrUSkXKrAFKc5tztYwopQuQgjL_ywC5RjCYzZ4G5nmVJOr5Nj6um2Bm2zsUYAvOHV0Oe_KY/s1600/blogtips.jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Cheat" href="http://co-paz.blogspot.com/search/label/Cheat"target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6hCd8BH4p2MNlugbsXLFinPLrXRhWEx8B8d29KCHwbEn9gTp9GW_Ju-gjGExDy8wx4BkS9AYjl_Zo00FYuTf-D3MiC_U_YG1WpMY5MuO1-SXQCqjuytBGSUbfp38siH0ySLmZPqKXa9c/s1600/Cheater.jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Games" href="http://co-paz.blogspot.com/search/label/Games"target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewRP0qLd8K1FqjON64KZ3CtgReB-3GhYiRENJxBlTiupCyAtHyWLKBee-G3g1XsE3tdmEW4udnQPFyCJu8JOelbdj7tK7nguJqMUiKAb-XCjGzkiaEE4kqd4Pf_SiigpJ7flrTnaDQG8/s1600/game.jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Internet" href="http://co-paz.blogspot.com/search/label/Internet"target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0KlRYwQoWVZyGxeR0Pfi5cMf6oX5WmqfzDdE7yXWD4CWWG04O30mtNghX2AMtaOX_mSJvdAyF7MAj1Hbxgl-5OK0E8hk0utxdidexg26C54Om0DV2isBM-DBfPpCMnmLTw8rFDad0Se4/s1600/internet.jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Multimedia" href="http://co-paz.blogspot.com/search/label/Multimedia"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-M8e00utaBSDmd6Y8sNnfmpsDJonWcpqZ47C9LtIuTSn9IEqVDwIDlaSdijVcb47NZUUlHCQL5lOQXEIJUJbSEJ87FQRMmp0VDzAdsJBnfoRgJ_nL7w4Nq0ltOE30hrsshb-bD1pChuI/s1600/multimedia.jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Rip | Portable" href="http://co-paz.blogspot.com/search/label/Rip%20dan%20Portable"target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHT2JrqxbKC_IaI48kScyLL1swGD8F3v-ROc_GN2WoYur42hMUP2_yaMojzr2vfaelNNrwZJP_vz5kAAlqtLpJ3b_4mhUrgx42H9i33rL1Zp2jLyXIOHsFMS6UZ4CDLcZL0rNTXtOhwWI/s1600/portable.jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Software" href="http://co-paz.blogspot.com/search/label/Software"target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK5QhyphenhyphenvvbYGjowFyBLSJaIgzfVsQT6ZQiChu7s56ZEwztupwSrMdeHTwS04SVXImZW2yDvzWaG26AhVyWXElIEUwbWaSGqlGX8L8wR4gCL7yRsQnhBVTcDo6Ie8OHjmHWPI8-CjgJ4UeE/s1600/software.jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Tip's - trick's" href="http://co-paz.blogspot.com/search/label/Tip%27s%20-%20Trick%27s"target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBIFJRsH_2j-jfLArFZJolg0p1yGebCzC5464y9jrDRsZNfAmDPDQMasnLJlEpQmYBJRSAGIp3-0taV_Z6VO5gjvGsdYQ4VsV0MF5oMqNyUSVMoT3sK-04VwrWaT83JS5GdM6_vAWuB_Y/s1600/images+(2).jpg" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="VB - Tip's" href="http://co-paz.blogspot.com/search/label/vb%20tips"target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu06nKPPoctNH2txsv0iiHT_DiemQS5SxAi6eZVZokoA_BbTyoQx9X9W9DE8GYY3zREEa0EV-dj4CWD8dtQL2XIusqHGTjI9Y_Xs97V4pdAmEUeFiRlhB3jb9hUduPGpzRF8GielIZuVo/s1600/VB+TIPS.png" alt="#" /> </a> </div>

<div class="panel" style="float: none; position: absolute; left: 0px;">
<a title="Windows All" href="http://co-paz.blogspot.com/search/label/Windows"target="blank"><img width="140" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8d5_l6IXyDaMa95ekTIPGFvey-Dt4hfJjNGsK0gewqnoxpfmOwm43fJ1m24y7Prv8nfJmejyjEaUSLlQk9Bg_EJihavKCP8ZxlIURn8jKwmIM8cN1JiBkkluYAO6KKU_8DIjOgl_tPg/s1600/images+(3).jpg" alt="#" /> </a> </div>

</div></div></center>

9. Dan yang terakhir Simpan Gadgetnya.

Cara Membuat atau Memasang Slide Show Pada Blogger

Popular Posts