Membuat Gallery Foto Dengan Keterangan Teks

Live Demo

Cara membuat laman gallery foto keren dengan teks keterangan.
Tutorial Membuat laman gallery foto slider keren dengan teks keterangan. Masukan Kode berikut di laman ataupun post blog sobat dan lihat hasilnya.

Gallery Foto

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://x2-files.googlecode.com/svn/trunk/Slider.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
       $('#BUS-slider').s3Slider({
          timeOut: 3000
       });
    });
    </script>
    <style>
    #BUS-slider {
       width: 600px; /* Keep it 20px-40PX greater than ACTUAL Image size */
       height: 385px;
       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 src="URL Gambar" height="385" width="600" /><a href="http://kampung-bodoh.blogspot.com"><span class="top"><h3>
Deafult sample post</h3>
Deafult Lorem Isum sample post deafult sample post</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <img src="URL Gambar" height="385" width="600" /><a href="http://kampung-bodoh.blogspot.com"><span class="top"><h3>
Deafult sample post</h3>
Deafult Lorem Isum sample post deafult sample post</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
<img src="URL Gambar" height="385" width="600" /><a href="http://kampung-bodoh.blogspot.com"><span class="top"><h3>
Deafult sample post</h3>
Deafult Lorem Isum sample post deafult sample post</span>
    </a></li>
<li class="BUS-sliderImage">
    <img src="URL Gambar" height="385" width="600" /><a href="http://kampung-bodoh.blogspot.com"><span class="top"><h3>
Deafult sample post</h3>
Deafult Lorem Isum sample post deafult sample post</span>
    </a></li>
<li class="BUS-sliderImage">
<img src="URL Gambar" height="385" width="600" /><a href="http://kampung-bodoh.blogspot.com"><span class="top"><h3>
Deafult sample post</h3>
Deafult Lorem Isum sample post deafult sample post</span>
    </a></li>
<div class="clear BUS-sliderImage">
</div>
</ul>
</div>

Keterangan :
URL Gambar -> di ganti dengan url gambar sobat
Deafult sample post -> di ganti dengan keterangan teks sobat
Deafult Lorem Isum sample post deafult sample post -> di ganti dengan keterangan teks sobat
http://kampung-bodoh.blogspot.com -> di ganti sesuka sobat saja

Tinggal di cek hasilnya, sekarang gallery foto sobat sudah keren.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Membuat Gallery Foto Dengan Keterangan Teks. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.

https://kampung-bodoh.blogspot.com/2014/12/membuat-gallery-foto-dengan-keterangan_18.html

✚

Kampung Bodoh

Membuat Gallery Foto Dengan Keterangan Teks

Ditulis Oleh : Robby Armansyah

Related Post