Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog

• 

  Cara Membuat Menu Horizontal Mengambang Di Blog

  Cara Membuat Menu Horizontal Mengambang Di Blog , ya .....itu lah postingan saya kali ini , oh ya sob judul nya mungkin tidak sesuai karena saya juga tidak tahu nama menu ini , Menu yang satu ini posisi nya tetap/ relatif seperti navbar bawaan pada blog .
• 

  Cara Pasang Like Box Facebook Di Bawah Postingan Blog

  Like box facebook di blog yang kebanyakan widget nya di pasang di sidebar blog , kali ini saya akan mencoba berbagi dengan cara berbeda yaitu dipasang di bawah postingan seperti contoh gambar di bawah ini
• 

  Cara Membuat Tombol untuk merubah warna pada blog

  Postingan kali ini saya akan berbagi cara untuk merubah warna backgroud pada blog dengan sekali klik menggunakan tombol yang otomatis akan merubah warna dari background blog Rangga
• 

  Cara Menghilangkan Tanggal Pada Postingan Blog

  Tanggal pada postingan blog berguna untuk menunjukan kapan postingan di buat dan berguna juga untuk melihat update nya sebuah blog , tapi ada sebagian blogger yang sengaja menghilangkan tanggal postingan pada blog supaya blog terlihat lebih rapi atau sebagai nya dan yang pasti ada tujuan tertentu buat mereka
• 

  Cara membuat menambah kotak komentar facebook di samping kotak

  Cara membuat menambah kotak komentar facebook di samping kotak komentar blog , yaitu berguna untuk membantu buat pengunjung blog untuk berkomentar yang yang menggunakan login facebook , kotak komentar nya akan dipasang berdampingan dengan kotak komentar blog selain rapi juga tidak terlalu banyak memakan tempat blog seperti contoh gambar dibawah in

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/AVvXsEhvzDS3oyW-eZ1BZ7rWI0YPcyCznzIxUe3e2tu9YVOBXSM5qnBKv9UHDKhrmBbghliJ2OvjoIdRsvlspC_Yy5-7W8Il8Ihxvw00hdz2X-lAFgyWxkqjsrA7SAWLZqMkiYbqYkuDTwzQLyM_/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/AVvXsEisNQSvXiXARHcLAfEWmaGMErD74ZZhxXBErsVNjtm8KJja86k1tZSj3I2wtHB-8Bx9xTnAceCKF7T_pFx2luFxTu_m6eCbrjqD5jQ2OUFzCiHwxr3hOWd9HUKN2wAiB4eG3ZOB0V9DRa-6/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/AVvXsEgMGnaxrxxcNGYSY3vgiMYBKIdCgzpLjVQQDAoXI6J2ZQ-BZnnNwZZ8Z7LsQ1iYLMcfdkNnbugRWc8IizGXq9XnoMq8eZNYzI8C5JlQXL7osFJrhcuItsf6P-A-K49fvpAg9XbkgF3vYfzD/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/AVvXsEgxCmlAvWHRHXTrbXBCRDpyw_S9meXIeid3k3711tW0sI358d2UKE6tZUrIVOxpz65UEhNJv_Q6jJ549i14lEOR22tQdmLeq_01nzWHauHXmeihTmKHXoX_5kv-1j4J20cq7G8kDJ5dk0gu/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/AVvXsEjlkAD77-fn9LVJ7xbsd3sd8Go-IEOasccJWnz7VzsD6zRJ2hu5XJDAujyUXK1cO_3DPw3iVpeJK-KdSTVqQg5Wol9senRfOqoB4aUZGsRUuHEufy8Vhijc5BZZJFFdkQKTu6NixGH8-X52/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 .....