ILMU 212: Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog

Kamis, 24 April 2014

Cara Membuat Slide Show Foto / Gambar Pada 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/AVvXsEh4CLkZ6-7dvba-r9AwRXkJMJbAHOuFbDtx7CzHbtKoCTUuhtiA-iC1Io-SbNcvSJ0Ww0WSQ7jPNEnmC4cXiZXpTQ0CRwj3sCIzROjVFsIEzW0ftPfyVS8-nr-jbfftecepOpQT3NCB0xsP/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/AVvXsEjIAElj6lmvvlkgm2auhx-H28iRsEeTXhMJFqU92R5RbOTML4zNlkK2deKAz_Wt2CgbwD2Hv-os1pmDMGETEgqwqrpBhG1NsFmvPGzOdaThh_u2YU1kTx55BQmBHCHfIDylNll3eB1npj5o/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/AVvXsEigw1bKhMNjJXvR6Fu9krZXHq1iOJGRJGYA7ftwxsY85knQ1RtTdcI4QghZf29vZYwM7mRIRvr7jBnLgyCuk8EWlxpkAO5dcfBlV_WwCrdUlMQctZQdFTX7MolH0VAmpyDrsNhYheRRXdkH/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/AVvXsEiC4ow9xXVB7F8G6lc05an3o_1xp3F0VM8HjritLn25sTEkayag0DfzY9eH1IJmcGGx_j_OJy43LCZQ5KTtY2ixIS-tYuVxvwB0woUiN6C4cs9epadXlfU6cCQ5_aRiFiJckyX_vKnN2RsI/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/AVvXsEhdxHW_3gCNqdmkacCiPnjOgoXk3IV21LSBA3EKvgX_m5-6BtvKnOthZKVW7VA7yoxidojlT1JZYjLXKrWjpcDpLUOv5oktHHhbDqw1NJLIccsOtJYqcUQDD1QnABfdJFTKpBZccqFaEv3B/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

Artikel Terkait:

Widget dan Tips Blog

Tips dan Trik

Tidak ada komentar:

Posting Komentar

JANGAN LUPA BERKOMENTAR DAN UNGKAPKAN PENDAPAT ANDA TENTANG ARTIKEL INI.

NO SARA
NO PORNOGRAFI
NO SPAM
NO LINK ON
NO LINK OFF

JANGAN LUPA UNTUK SELALU MEMBAGIKAN ARTIKEL INI KE JEJARING SOSIAL YANG ANDA SUKA YA :)

Langganan: Posting Komentar (Atom)