Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog

November 22, 2013

Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog

Gak bisa tidur ni sob.... dari pada timbul pikiran yang negatif nanti bisa merugikan diri sendiri dan orang lain lebih baik berbagi artikel dengan sesama sahabat yang berkunjung ke blog ini mungkin ini bisa membawa manfaat sekalian beramal membantu orang lain melalui sebuah artikel ini he....he....

Kali ini saya coba pilih judul yaitu Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog kenapa saya memilih judul seperti itu ? karena yang akan saya bahas tentang cara pasang gambar atau foto seperti yang bisa sobat lihat contoh screen shot nya seperti diatas tulisan ini , Langsung ja ya sob ....!! nanti kalau kelaman jadi basi

Buat sobat yang mau mencoba untuk blog sobat cara agak gampang-gampang susah alias gasus , tapi kalau sobat teliti cara nya cukup mudah yaitu copy paste kode di bawah ini kehalaman HTML Postingan blog

<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: 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/AVvXsEjLDcAsz5J15DASBjD4pfjeLNGPiT_OzQ0pz9PpO5syBDtzbx0uJ4uOKrSGax5lAAuTC8oCP-Fp0F1i1tPmC65lxjxHMMBIcwbhq2ndG1mlTrMLY-U4_wHsWu0ce2zdoLJCJUSv8DqC5QsL/s1600/Untitled-2.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3> Mother And Rangga</h3>
The road to the lake Singkarak west sumatera all back home</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/AVvXsEj_CK4wJMmHyJNUmOAth85H5A-YVzrVm5wW5dIlpSj5PcQnHfLGO7DBua6EBpq5jUzGHWiWueF6_xx4urRNCehi3RpGPFBTxlcW0Fhyphenhyphen7tvvA3fCFfBnOwHCNsFuS0K_INAYDS0pWd7q8Orl/s1600/Untitled-6.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3>
Mother And Rangga</h3>
Rangga photo on the bridge leighton III</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS7THBNZLqtllpoo2QNQd_e-6DYX2qdVz5TsKnVzAbvLBM1QiCptKPgYdut-tdhzf5_SgbV5zQHG-88uIM_NN7oyCYyRYCHSWl2VnIWsXoi7cGeOzqY9uP6MAtL2ffKC-P-qGJRTcUDIs7/s1600/Untitled-1.jpg" width="550" />
    <span class="top"><h3>
Rangga photo</h3>
Rangga in the Clock Tower Bukitinggi West Sumatera</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNLwEVjDaIV5L3sUTLrCzQ6ndI1yo7NwCf5Cfhz4HFxmwfVfsqRaRU7Akc_hW-wcHC3oYGgJj-pJQMf5_IvLV5p63rKiVmtWXBYpFYKxEIiordLvRLF8ABX1HWg7jfnLKsWGOQOUI6r4Wp/s1600/Untitled-1.jpg" width="550" />
    <span class="bottom"><h3>
Rangga Photo</h3>
Rangga posing overpass Kelok sembilan west sumatera</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAs_BsJnlbNpEPHFO_tfFbSe7L07Y5VgEUx6JR1RmDAO5mHHH8v-qlS7JfoWIoJsKluGYGds_-uKYB9EOqZ3piCWt94UgvSoAeOAJkbDqBluqNN_OIG_P5Ex3miO_Kl1CtDoi0skJnzLS0/s1600/Untitled-2.jpg" width="550" />
    <span class="bottom"><h3>
Rangga , Father and Mother</h3>
Rangga with beloved family</span>
    </a></li>
<div class="clear BUS-sliderImage">
</div>
</ul>
</div>
<br />

Keterangan :

· Kode yang berwarna Orange atau kuning adalah URL yang bisa sobat ganti dengan URL blog sobat.

· Kode warna merah adalah URL Gambar , ganti dengan URL blog yang mau sobat tampilkan

· Tulisan warna hijau atau green Ganti dengan judul yang sobat inginkan kan

· Tulisan warna biru ganti dengan deskripsi

Kalau ada salah kata mohon dimaafkan dan kalau ada salah kode atau tidak berfungsi mohon di tinggalkan pesan di form komentar di bawah ini , selamat malam dan terima kasih .....

Komentar