Home » » Cara Membuat atau Memasang Slide Show Pada Blogger

Cara Membuat atau Memasang Slide Show Pada Blogger

  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/AVvXsEiDsMeRizYwPSvYVLt6ex5FJPtf05YBk-ZLFPlcnX7-whFJpYM59aqt0NmVYj55nOjuBufL-AqdnE5m8-bTv_JyYZyvDvZG6qxVyHXMMzz1It6H426AO9w6bPZhi33-uCBDPOH-nc5P4bI/s1600/Left_Arrow.png', 30, 30], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrI2hTMeOUloWd1ZLyNzWZv_dlLSmSIOZAMWipoeyNEBXrseJ3hPCgHKLiVTYjeiI8q7sKkBdJMpGA_f9IY9oNaKcD3e_o3k9VG5hdlutuW1JCwmyPxXZYYSCgMD93OQElqGBl6nLOf4Q/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/AVvXsEilVQIptI8UV92IKTx-yQ5HgE4pUUR3iKRBXexTyju9ql4ZU4tq8Me3i0kGLH6x_0UFhyZxXC7IgTdEGTC_TRtWJ6-m2ltr8A33WLl-tqkfH3tBUaMqlRTi5DgoksW1W8SpB4iq3D6DBYs/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/AVvXsEg7Q_q9i22o3WfyU-xyziKLNoBLZ-s-R71VMt09nOMZPlwMEeLmIV7p1m5vZ2RoHjsQHuLRsLKqslfTRed8sL9Mn4i7Wp_n4Kupny-Rz-wLiHdYj_3w4CE_Rbr46nJaXY7mvpmGXsEeMME/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/AVvXsEiVDds_JScbRGJl0ApguA8yaok4bQqGvgmDnbNe-hp8BDnGs357xSuUW5SXaPQRfrDJMaeOIz7N9u3mM6rttBK3fbIQiBO_ggC_NrdsCtArh-yEeqbFnZB-blUFSP8umhs-f1p5P5RBlFk/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/AVvXsEiXxT3tN__50zWDBE5kPSzs19L8CYwWxcdf79bfbjWyAYjT09U_BewS5ZXbVsKTxul0uH0p39uHWTJR54LQjULVw5NqHAbo1KR82YorFUcTsOA48VHjwbu4EEWk6dRMwT0OQ0ARhY3bImY/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/AVvXsEgeHNSQIshSCeHoOJXtPL9rkwFv6bcAKpUrYANQ_x5yKnNybufsMasgizSF0IQWwRsRtd-VxtfLnol2Tpuios18saUqz2EBDqY3Gm6SjVzJXaig6T8JLkVqAg8LXuo3IwlzJS5fsIZ7wSY/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/AVvXsEgwt_zAge3WV6V3B-CkxRs9SCHDEo9i10diETwv5hQHa6gRnWbIlbUpTRAmEX6rm63I05WE6P_7x2ZZf6hlyO1JrmBM4DlCeI-4U9NDPMAJR05pQIJQg1Kvr5TeBiMmOlpGCzM1x5OkGuQ/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/AVvXsEgvBYsWbjrTx9lbXnRI9sPpkgEFywItxWC28Sp_YJY9hstqxsIfzsWidO5U8lpm6Y4Z1OrYZkAd1IACD38ICqEDR789tdvBpaZRGAn6g6gYDeDtlU4Uk5dQXREkpeI9h5w7RUJ3T203dx8/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/AVvXsEiKtsodBlPR3YLmAFijIGwNYX5QTRe372y0PmAeC3T4bnDk9nuoTbddg8MZl7iImZtO4sVFOq6GsS8DvMJua3a3x3Y9kp9e0SH6r4rqL-TV5JavSRiyLpNHA9jqAikTXT4h3Fgq6uAZWP0/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/AVvXsEgmFO0_LlDaruqdSIfUZkMwI1C2RYLHCb7f4BXykZLDM9eJ01nNOis8JNwSHxLegFKFlLdEDOt7IuVs-eCxi92OMnA9ScoOKxdvvk5SAH4Rsshyphenhyphen_xSqT_Nflb_0vswFYj21LMuLesi8gbg/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/AVvXsEgc-CSMwW0-2j3X3agjIuB9HGCUf8z7Sd92yMemfY-7o5brKYaL0DrDUzeL6fKA3PkXffVIprh1LvzGXMyFE1A-0IDJ3pKt2b5TUkWReQNxRqGmf1q5MDzL1a8g_i8k4ohAnyWOPWD7UQ8/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/AVvXsEjPzWFaoMmsMdvfR_g1iBbRZq8LxN9dZ0e31fcU_i5MRoCHFSdhpYY3Xsksxl0Ff-1iqx_h25sZMpmHrT_TCm_pWyLTmDtRmo2ucLa5wZn6uzQeiOD6yvnSQGg8kVvrekI4IZA5uTTGF3c/s1600/images+(3).jpg" alt="#" /> </a> </div>


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

0 komentar:

Posting Komentar

Download

Popular Posts

Arsip Blog

Sample Text