Beranda
Tip's - Trick's

Cara bikin slide show kayak di ganool..!! di blog

{ Jangan Malas Membaca Ya }
Cara bikin slide show kayak di ganool atau kayak blog ane...hehe!!, sebelumnya karena ganool memakai platform dari blogger, jadi tutorialnya ini khusus untuk blogger..sedang yang pakai platform lain silahkan edit sendiri kode HTML nya, nanti ane sertakan CSS dan JQuery nya. oia kalau mau lihat macam mana jadinya agan bisa lihat di blog ane.


Langsung aja Caranya Gan....
  1. log in dulu gan ke blogger. 
  2. kemudian klik rancangan -> edit HTML. 
  3. Nah, jangan lupa di download dulu template nya, nanti kenapa2 rusak atau bugs ane yang disalahin,
  4. 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;
    }
  5. setelah di copy, cari ]]></b:skin> dan letakkan kode CSS nya diatas ]]></b:skin>
  6. lalu copy kode JQuery dibawah ini dan letakkan di atas kode </head>

    <script src='https://sites.google.com/site/akubisagila123/ok/jquery.min.js' type='text/javascript'/>

    <script src='https://sites.google.com/site/akubisagila123/ok/stepcarousel.js' type='text/javascript'>

    /***********************************************

    * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts

    * This notice must stay intact for legal use

    ***********************************************/
    </script>
  7. kemudian KLIK SIMPAN TEMPLATE & klik di bagian TATA LETAK.
  8. 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/AVvXsEi7naPWWBhD1u85BauCKiuZRApQ0d-KIcW_zHYJVWW59NI5FZxK5wVTXAXU1AT5Czjmd0aebUR41bLPmHzJHqw7B0Vdkuzdxbe8dpIFUJAnVN05EVll3pb_6WBbyiSMmzztl0n4rGqOOyU/s1600/Left_Arrow.png', 30, 30], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj80r9koZ7DblCgdkoS2q9UTlmCiBAwluLr94eBvDwFjwT_4LRwMi0PvTyuOV3nESfLMqp7OKspJ1u7guNhcr3SZVVtqkDsSjFcvHwatMpZilhsTfoJb4-1E7rV3OwY-Ii7wXXUFrHRWkc/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">


<!-- Ganti link di bawah ini dengan link agan -->


<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/AVvXsEjOeSg9VHR-kvLTPMDGJFFenIB7gL0umlOBYYDuEEqcLjRGw1_3pC6BU651QUemZhJ46A_tOId5z7HIze4SPH_ESQefh73qocXfdHSGY6-39EWPs4j3SxH2G8HHK5awisixpTCsuTrVM98/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/AVvXsEh9TpmiywKCMMcZ-Onapsw-6LnKa44MVKEVuBEgpT0jgwIm5XJnu9w5qOM8vvyQPwU52W7uIseKp8d9OOkIApnkIdXhWrEN7ECtvHO4B_f-4QO-Y0OCZZHrQsOLlguXpBQIESbwVgvZEnA/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/AVvXsEg_x7PhZtcKRZpw9l-F9L4_NLOPK8SksCod6vMZQs21U7SrSxSHIlRTrP0sqKMeSrRhLx3hHrqsr2aJv5d-D1fbsvPTehwW71PGlE7dOwg43sRNTA-IsuB8axHXAv7DPQBCPrfWlmrAN5Q/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/AVvXsEj8p8ct8MHXhel9VX9BbbiD18Ron66WT74XH8lOH-4RkSanNvBnl9i3UAB6zwmmtXbZU72WFKIt8EAlZMBsK5vYQ7ldSV0RjKfjiFGALA0UO4MWRjO_oz34B7wqVB5LVLSj73d35yf-VOM/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/AVvXsEhk5CD6hBA13MMRwQVYPWN3XO0VSD-Bbk8U-ZTi8zBqrK8OgD5oByQFNvhZk-ucHcXInU2GkV3GLHSn6VVajRjvIsIJ5qlWvbOkA2OXnTkLaIOiXdPIh391Ke__CScHHigILDtj3-KDVlc/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/AVvXsEgcCMFhINKZu64LN9cxfmG1xk5OC18tw3QstAqUErbtMg9T5i6A-9Ign1cmU4aY0sAUpoQP4Bme49ki-FxGI2sW8TEhKaeYLp7fnMjbBcnKCcj5afnzw9sM_34nxxl30H8ClbIN5fRfgqU/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/AVvXsEhsg8xBSTlaGv1HpAhkzgXlwlBYnQmFXlmC5lWQsXBS5KUGG37pnMFp3V43UoA8PllCPSvWBAbawDsYT3wiGgXZ3EqzOlUyjpyvR5l9tKwQyx6NClinMzatZwY6m222dIFmce3Bn-jJNdk/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/AVvXsEirEX2gNnUt914UJwnLrNQJ6fXUHuligyQC6-C5nRRAlkY0s-QyWcm0uQn7Ew5WRGO0tHRoM6G2vYbUdko4tDgifcK0L4qaLtjJWqeTln2iCRph-5g_7lJVrm94wHGhuoU4rMGUeIcD9eM/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/AVvXsEhwGNKmd_8-pADuQTH2PVN9SmchxiuKWgWYNz8MT1W8I2YN4C49jPEsDz7orEbcz-nNzdhqi4hshx7ErjnCVQwP7iYfBIfcC5QpyuTNaZ2ZZCjf9hYUr6WLc6drZ95LYtgi0RXtKhkcQn8/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/AVvXsEjToTCNw1P0VjMvKw-UGNIL6IM-iWnW88QjxUk80QzDW77DvWZmq9wvaGvWHAdJxVrW4sSvJiwDdVT8Q-7nkGCZ2EAAnGkh75YLY_xdmPquvetP663XWEzJh6WLlMdxW0D50HO9gdQLf_Q/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/AVvXsEj6MzKgA_j5iq4PbTzaMeweKDDOFkoWaJmPkdaE3Gh-8H6kxdbj6KqxUf-P_-XgYoX36R3Baz7rOMZtdoafYYjP3bPLZdiNKy-gU7mM_joTzUYqYQK6224lAfMjWlRF8vb-VqokP3Uqpww/s1600/images+(3).jpg" alt="#" /> </a> </div>


</div></div></center>
     9.  Dan yang terakhir Simpan Gadgetnya.


 OKe. sampe disini doang gan tutornya ^_^ gampang kan? hehe..


Selamat Mencoba...

2 komentar

  1. kalo buat wordpress gimana bro. buat tutorailnya juga donk...
    • Maaf bro ane belum pernah make wordpress jadi untuk saat ini hanya blogger yg ane tau bro ^_^