Cara Membuat Slider Photo Di Postingan Blog

Holla!! Gimana sih cara membuat slider photo di postingan blog??nahh ini jawabanya, Cuma butuh ketelitian mengganti URL-URL temen-temen. Lansung aja, pertama-tama sign in blog dulu temen-temen, setelah itu buat entri baru di pos, jika sudah copy script di bawah ini ke HTML samping compose

<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

       $('#BUS-slider').s3Slider({

          timeOut: 3000

       });

    });

    </script>

    <style>

    #BUS-slider {

       width: 550px; /* Keep it 20px-40PX greater than ACTUAL Image size */

       height: 335px;

       position: relative;

       overflow: hidden;

       margin-left: 0;

    }

    #BUS-sliderContent {

       width: 550px;

       position: absolute;

       top: 0;

       margin-left: 0;

    }

    .BUS-sliderImage {

       float: left;

       position: relative;

       display: none;  top: 0;

       border:1px solid #ddd;

    }

    .BUS-sliderImage span {

    position: absolute;

        font: 10px/15px sans-serif,Arial, Helvetica;

        padding: 10px 10px;

        background-color: #000;

        color: #fff;

        filter:'alpha(opacity=70)';

        -moz-opacity: .5;

        -khtml-opacity: .5;

        opacity: .5;

        text-align:justify;

    }

    .BUS-sliderImage span a {

    text-decoration:underline;

    color:#FE6602;

    }

    .clear {

       clear: both;

    }

    .top {

        top: 0;

        left: 0;

        width: 550px !important;

        height: 70px;

    }

    .bottom {

        bottom: 0;

        left: 0;

        width: 550px !important;

        height:90px;

    }

    .left {

        left: 0;

        top: 0;

        width: 110px !important;

        height: 335px;

    }

    .right {

        right: 0;

        bottom: 0;

        width: 110px !important;

        height: 315px;

    }

    </style>

    <br />

<div id="BUS-slider">

<ul id="BUS-sliderContent">

<li class="BUS-sliderImage">

    <img height="335" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh26TZfcLx7vUm4KcpMKzER0cZWJ8Hyvw6YWpVjobng_OTkgtG5WUAE4RuNiJ6YgquYPlHm6DLu0G9TaamQn61EnIp_IiM8xxWyupoVjspebAqtldzT6iz2lTyjRDhISiRPHbYzPmvSRek/w550-h335-no/1.jpg " width="550" /><a href="http://www.blogger.com/hollabuddy.blogspot.com/"><span class="top"><h3>

 example text 1 </h3>

example text 2</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>

    </li>

<li class="BUS-sliderImage">

    <img height="335" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZWVY1P-LaILID3Yr8j4_qxOEM5Ab56B9lV1dxlQs8u3gDj1KZEUMQSAvYQKQhiI-c7AtrN7ZHV1mFJahJ8Pv5JJo6o0zzLYDxz022oIj7hgaHlnmn5QIeaH2GQRjgw-wkrSLoSbun5-o/w550-h335-no/2.jpg " width="550" /><a href="http://hollabuddy.blogspot.com/"><span class="top"><h3>

example text 1 </h3>

example text 2 </span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>

    </li>

<li class="BUS-sliderImage">

    <a href="http://hollabuddy.blogspot.com/"><img height="335" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhjkyxspPxZ3PL07xSu2YuqnmWaXGHMV9iORWt6PZjp2mlhVrxIiTfGbu2GLOzWtSxHrY9esTc7cwevKQMbPicjygaRn_VkMFzWsLDetKMFd2ojIF2r0hkZgC_jfmD2cjaqaTaZm76rk/w550-h335-no/3.jpg " width="550" />

    <span class="top"><h3>

example text 1 </h3>

example text 2 </span>

    </a></li>

<li class="BUS-sliderImage">

    <a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VOaCdH82lKeQmX48lPQhORV_En-LYd0mW4Cgwa0lAW-pL-n2XLdr7-AsinLBMJ-mpyDFuzJhH9_DcO8I3Hn60_JN87wd8Q8GjOtoE0N4ZuMMWF850MMsjqL8RfWmuv6B2nJYvzU4xRo/w550-h335-no/4.jpg " width="550" />

    <span class="bottom"><h3>

example text 1 </h3>

example text 2 </span>

    </a></li>

<li class="BUS-sliderImage">

    <a href="http://hollabuddy.blogspot.com/"><img height="335" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEE2F2b9Duo0DGK6KDt00cEvCFL5l715Eft0dOPjTftp78KvLrWXiQGMRAf_c9CfRYS9R-5gXZpgv3zJ4ibfXNhU4xc4QEJJCPMDDOIisQerb7b2qJ76Cn17vSP2dI6X5XoDK15cpWBg/w550-h335-no/5.jpg " width="550" />

    <span class="bottom"><h3>

example text 1 </h3>

example text 2 </span></a></li>

</ul>

<div>

</div>
<br />

Keterangan :

Step 1, temen-temen bisa mengganti warna merah dengan URL foto anda

Step 2, temen-temen bisa mengganti warna biru dengan URL halaman foto temen-temen di blog

Step 3, temen-temen bisa mengganti warna hijau dengan teks judul foto anda

Step 4, temen-temen bisa mengganti warna coklat dengan teks diskripsi foto anda

Demikian Tutorial dari Hollabuddy.blogspot.com, semoga bermanfaat

• 

  example text 1

  example text 2?
• 

  example text 1

  example text 2
• 

  example text 1

  example text 2

• example text 1

  example text 2
• 

  example text 1

  example text 2