Slideshow Foto pada Posting di Blog

Hai apa kabar?
Assalamualaikum semuanya
Kali ini saya mau menulis tentang beberapa kode yang bisa diisikan pada html di postingan blog kita.
Kenapa saya bilang beberapa?
Karena sebenarnya ini hasil saya berburu dari beberapa blog.  Iya,  berburu..  Bukan untuk mengisi konten blog saya,  tapi merangkum apa yg saya butuhkan.  Karena saya tidak mungkin copas dari buku tulis saya jika saya suatu saat membutuhkannya,  saya save disini untuk diri saya sendiri dan yang membutuhkan nya.
Pengalaman saya, memungut --- mencoba ---- dan gagal berkali-kali membuat saya banyak mencari dan tidak sadar sudah memasukkan kode yang sama.  Ada yang berhasil ada juga yang tidak.  Untuk itu tidak ada jaminan ini akan berhasil di blog anda..  
Oke teman-teman kita langsung aja intip dibawah ini.



Notes : harus lengkap ya..  Dan perhatikan setiap tulisannya.

CONTOH 1

 
Kode ini bisa untuk dimasukkan kedalam page postingan melalui html . 

Kode ini saya ambil dari blog rangga, klik disini untuk melihat tutorial aslinya :

<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/AVvXsEggXeQRH99j3sPdqW1I5zFuS-a0oZesA4zvZOA4B2hxKs7wSrkXgtngep4W74L8GTyPsRqlIFwai4mowqpCZSvqmVOf8W9XuHZ65jfV4fdQrKpQeulBJdsREgHceBX3vHGVBBILo0JQ9SwO/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/AVvXsEiFArSL_ysc7BJXvYrxcYVeVwsFriT3_8Po9UVeJZjsaVJejGTjR09bmz9oLvAc4T-_cHoL3kH7H1-Q2mw7klfLPB3xx8Cp1-tCHCZ25cxh4vURO3f2aaBYNMJFswptu_coUtC2yVJ7zy8W/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/AVvXsEit9UVaYGLv4W68GcRZ90M82M08JApLO505LnapgWYR_Nq2ecWh-ZNM4d9CiVBrIJhEtutXPMDi86pbB-9cMKlrKgDRZtLtGMUdldoEtojtRzlL7RCvAyRGyO19VcH1SQmjNmvx2HgA_Xtl/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/AVvXsEhESt8apDyLDOdh-DVh3K4Bc5vX6aTAmZBt5In1FBNlTqcTJgNBPMrZEXuf-2gZZ_oSnU22R3bu5InFgsn9RTyt3mou0-ihgLv27PvD3ylO1qeUitFMN6upaAYbK9rQWTJ5pl29WVTXjsPY/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/AVvXsEjEbqtr5V0pjLoGepKVbr543lp5E1xLVNjvS1gZP_3Wm7_VCQz6fLh9X_QuBvb60uGZUxQ1_-JtQ3DJF8rVolDkQDI3FfXffbNi83HbhVZrxRB1-hhS5IpYStjn1uIzQAgMlqTtld1D5XkH/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 />

CONTOH 2

Langkah pertama, Menggunakan Google Slide  , untuk mengakses google slide bisa melalui website pada PC ataupun download melalui smartphone. pengaplikasiannya mudah seperti menggunakan power point.

Langkah kedua.  Jika sudah selesai dengan langkah pertama tadi, untuk mempublikasikannya silahkan pilih file lanjut pilih Publish to the web.  

Nanti akan muncul pilihan : link  atau embed.   Kemudian atur kecepatan waktu munculnya gambar pada slideshow di postingan blog anda. 

Selanjutnya tekan tombol publish.  dan jangan lupa untuk berbagi link salin saja kode yang muncul dengan ctrl+c untuk copy. 

Langkah terakhir

kode yang disalin tadi bisa dimasukkan kedalam post blog anda melalui page html. 

contoh yang saya buat :