CARA MEMBUAT GALERY FOTO DI WIDGED BLOG

Bagaimanakah Cara Membuat widget Galery Foto di Blog?

1. Sign in ke Account Blogger Anda
2. Pilih Tata Letak kemudian pilih tambahkan gadget
3. Pilih HTML/JavaScript masukkan kode script dibawah ini:

<b:if cond='data:blog.pageType == "item"'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <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: 250px; /* Keep it 20px-40PX greater than ACTUAL Image size */
       height: 200px;
       position: relative;
       overflow: hidden;
       margin-left: 0;
    }
    #BUS-sliderContent {
       width: 250px;
       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: 250px !important;
        height: 40px;
    }
    .bottom {
        bottom: 0;
        left: 0;
        width: 250px !important;
        height:40px;
    }
    .left {
        left: 0;
        top: 0;
        width: 250px !important;
        height: 200px;
    }
    .right {
        right: 0;
        bottom: 0;
        width: 250px !important;
        height: 200px;
    }
    </style>
    <br />
<div id="BUS-slider">
<ul id="BUS-sliderContent">
<li class="BUS-sliderImage">
    <img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtHe3uINxNekgCm77QDuzACEX_ZDoXQ_oVvwNbCRv3Cg9PwmJL_R0vq6XvbNRVGG7J5ughALi1-vhhdgWps-zSQWGy5703JYM-Kn4IPumgYwB59nRehr2H82Sa2q13ijANJ93ZSg3AJ0w/s1600/nnn.jpg" width="250" /><a href="http:/yrnrn.blogspot.com/"><span class="top"><h3>Danau Toba
</h3>Desa Balige
</span></a></li>
<li class="BUS-sliderImage">
    <a href="http://yrnrn.blogspot.com/"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLriBdPvP-NRbaFK369EdWAtltbGkuF9m94GsKMh_kXQXikuNcGLtRa1-xIXGdHW__g9n-nPgfgEzodgFEhUlqSOiHSZjVScsdj91SSvQdXB1GLjkd7lN3gGOrvt-ET9h0hTjB_kVOfbsh/s1600/images+(1).jpg" width="250" />
    <span class="top"><h3>prambanan
</h3>yogya
</span></a></li>
<li class="BUS-sliderImage">
    <a href="http://yrnrn.blogspot.com/"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BVTCNI5LzuSSmHLSop3HCumrsO7hL0QOKLs18Hg8-93B4-D_guSx-e9v8URJ3Fz_GS5SRV00qb8LoNWY9QbLbJ4YYABXlAo4OwBwm6AsPPnxTwiRTNsaqdSSoJ_62ZKo50XThBjMWsi5/s1600/DSC_0475.jpg" width="250" />
  <span class="top"><h3>Lawu
</h3>Karang Anyar
</span></a></li>
<li class="BUS-sliderImage">
    <a href="http://yrnrn.blogspot.com/"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsxbGafliAP5hPX3sUDuXXMVYUJWtXuYKk1MAaITsg5M9oLPnXDswBfEhDsDu0_HlzllKhcsso8YqrJFcDdNwHT7Xv8dQMcx8fNMtJPmgmdARiysgBgBEw1C82iqfpNpoARPZjc8Fkwhd/s1600/ndn+4.jpg" width="250" />
    </a><span class="top"><h3>jalan jalan
</h3>kota
</span></li>
</ul>
</div>
</b:if>

4. Kemudian klik simpan

Note:

• Ganti angka berwarna biru untuk mengatur Width dan Height widget.
• Ganti tulisan berwarna merah dengan alamat URL blog anda.
• Ganti tulisan berwarna hijau dengan alamat URL foto anda.
• Ganti angka berwarna kuning untuk mengatur Width dan Height foto di widget.
• Ganti tulisan berwarna ungu dengan judul dan deskripsi foto.

Demikianlah tutorial cara membuat gallery foto diwidget, semoga bermanfaat.