Cara Mudah Membuat Foto Slide di postingan blog

Cara Mudah Membuat Foto Slide di Postingan Blog

Banyak tips dan trik untuk mempercantik tampilan atau membuat blogger menjadi lebih kreatif dalam membangun sebuah blog, untuk kali ini saya akan share tentang bagaimana membuat rangkaian sebuah foto yang bisa berganti secara otomati dalam artikel Cara Mudah Membuat Foto Slide di Postingan Blog. Untuk para mastah mungkin ini hal biasa dan ga asing lagi, tetapi untuk saya pribadi ga ada salahnya untuk di tayangkan kembali Cara Mudah Membuat Foto Slide di Postingan Blog disamping memperkaya ilmu untuk saya pribadi, mungkin saja ada yang belum tau caranya, saya akan coba berbagi pengalaman untuk sobat, ok langsung aja kita ke TKP.

1. Tentunya sobat harus login/Masuk ke Blogger

2. Kemudian pilih ke Dasbor

3. Pilih buat Entri Baru yang warna orange

4. Ingat pilih yang HTML jangan yang Compose

5. Pastekan kode di bawah ini pada HTML jangan di compose

</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: 5px 5px;
        background-color: #000;
        color: #fff;
        filter:'alpha(opacity=70)';
        -moz-opacity: .10;
        -khtml-opacity: .10;
        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:70px;
    }
    .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="http://img.autobytel.com/car-reviews/autobytel/125091-top-10-nicest-cars/2014-Lamborghini-Aventador.jpg" height="335" width="550" /><a href="http://tunner2501.blogspot.com/"><span class="top"><h3>

Lamborghini-Aventador</h3>

The 2015 Lamborghini Aventador tops out at 217 miles per hour</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>

    </li>

<li class="BUS-sliderImage">

    <img src="http://img.autobytel.com//2012/ferrari/ff/2-800-oemexteriorfront-68011.jpg" height="335" width="550" /><a href="http://tunner2501.blogspot.com/"><span class="top"><h3>

Ferrari FF</h3>

The Ferrari FF is notable not only for being the first all-wheel drive</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>

    </li>

<li class="BUS-sliderImage"><img src="http://img.autobytel.com/2014/mitsubishi/lancer-evolution/3-800-061214%20mitsubishi%20lancer%20evolution%202014-71803.jpg" height="335" width="550" /><a href="http://tunner2501.blogspot.com/"><span class="top"><h3>

Mitsubishi Lancer Evolution</h3>

Like the WRX STI, the Mitsubishi Lancer Evolution</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>

    </li>

<li class="BUS-sliderImage">

    <a href="http://tunner2501.blogspot.com/"><img src="http://img.autobytel.com/2015/audi/rs-5/3-800-091614%202015%20audi%20rs5-74246.jpg" height="335" width="550" />

    <span class="top"><h3>

Audi RS 5</h3>

The 2015 Audi RS 5 is a ferocious all-wheel drive sports car</span>

    </a></li>

<li class="BUS-sliderImage">

    <a href="http://tunner2501.blogspot.com/"><img src="http://img.autobytel.com/car-reviews/autobytel/123314-2014-bmw-435i-photo-gallery/ABTL_2014-BMW-435i-Rear-Quarter-Left-Ridge-Sky.jpg" height="335" width="550" />

    <span class="top"><h3>

BMW 435i xDrive</h3>

The 2015 BMW 435i xDrive walks the line between luxury coupe and sports car</span>

    </a></li>

<div class="clear BUS-sliderImage">

</div>

</ul>

</div>

Keterangan Warna :

• Warna Merah :  Contoh : ( http://img.autobytel.com/car-reviews/autobytel/125091-top-10-nicest-cars/2014-Lamborghini-Aventador.jpg ) Link ini ganti dengan link foto sobat
• Warna Hijau : Contoh : ( Lamborghini-Aventador ) Ganti nama judul foto sobat
• Warna Biru : Contoh : ( The 2015 Lamborghini Aventador tops out at 217 miles per hour ) Ganti isi deskripsi atau keterangan apa saja yang berhubungan denga foto tersebut
• Warna Pink : Contoh : ( http://tunner2501.blogspot.com/ ) Ganti dengan alamat blog sobat

Selamat mencoba dan terima kasih telah sudi mampi ke blog newbie ini, mudah-mudahan artikel ini bermanfaat bagi yang membacanya.