Laman

▼

Cara Mudah Membuat foto slide show di dalam Postingan Blog di Blogger


Ditutorial sebelumnya telah dibahas bagaimana membuat foto slideshow yang diletakan di sidebar. Kali ini kita akan bahas bagaimana caranya membuat foto slide show berada didalam postingan. Langkahnya adalah sebagai berikut:

1.       Login Ke Blogger
2.       Selanjutnya Masuk Ke Menu tata Letak
3.       Kemudian Pilih Widget HTML/Javascript, letakan di bagian atas postingan
4.       Selanjutnya Paste Code Dibawah ini

<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: 500px; /* Keep it 20px-40PX greater than ACTUAL Image size */
       height: 300px;
       position: relative;
       overflow: hidden;
       margin-left: 0;
    }
    #BUS-sliderContent {
       width: 500px;
       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="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMk0Rrvv573PELai2eKCkiKcw6zaaP_9mw1AM6_RnlIRYKjcS5ypX3CCAMVxhaS00K610gAwrZ4EllvIpln2QZcu_IDuMkyBBz5FriaUCHC6APE7CMymP1G_Dp3TP6QMjg0_t-TA62qUG/s1600/01.+di+padepokan+IT+Course.jpg " width="500" /><a href="http://padepokan-it.blogspot.com/"><span class="top"><h3>Training IT</h3>
Training, Kursus, Private IT Di Bandung</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLy2Y3NuUnlmzA38KQUVCGuJtH5rduxws2aEmEbR16IGQBpGOoiYxpxXNwp-uiykVcDxsUwWRcZxzsVb5lHfHYLCSjH6Kq1vu9jew__qx8KH1DUF17lyyaBKh-_NAA-QTk_twtBSDKc2Y/s1600/training+jaringan+dan+mikrotik.jpg" width="500" /><a href="http://padepokan-it.blogspot.com/"><span class="top"><h3>
Training Jaringan Dan Mikrotik</h3>
Training Jaringan Dan Mikrotik Di Padepokan IT Courses</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <a href="http://padepokan-it.blogspot.com/"><img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUWXIWFFUm6xdHtujvA638909e8G8XP8iJ4KLCu5Kl2oH7_UsIAWhc4BYOOfGYuW42CTN0rZDad6KpEC7H_FX0c3uFHdBAXKV-aCks-fjL_vtlGeruGjd2P9Mu_xY16pz-bjNxIt998dMp/s400/user+web+programming.jpg" width="500" />
    <span class="top"><h3>
Training Web Programming</h3>
Training Web Programming di Badan Geologi Bandung</span>
    </a></li>
<li class="BUS-sliderImage">

    <a href="http://padepokan-it.blogspot.com/"><img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikATrPGWzvVMRSjIRoCJ2v702Dteb9zox6Fllu1ERcrl8tv3psS_cXCvtcVRD15MLZLtDTn5hYwPW337NvvfA54ASAURWUPAaJsAR-r3RInGFROZnJVSq8vw5k-YhONYDLySfTLt7g68Bw/s400/user+vito.jpg" width="500" />
    <span class="bottom"><h3>
Training Mikrotik</h3>
Training Mikrotik Membahas Setting Gateway, Bandwidth Manajemen, Firewall, dan Hotspot</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="http://padepokan-it.blogspot.com/"><img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGDX-6GjSSM_BuocU9j-N8vhLIv-fa1Ru7CQ_tPNWhgIvnja2jR-WxEMIxHvS0eSFMSLwRVXFTe73vYU49vUYh-xlVydtWhtQXz-aVs_HatgtweXFKYx981EPiFJ4C6e-WPJZeh95eDGs/s400/foto+user+Erika+SMAK+BPK+Penabur.jpg" width="500" />
    <span class="bottom"><h3>
Training Internet Marketing</h3>
Membahas Blog Marketing, Youtube Marketing, dan Social Media Marketing</span>
    </a></li>
<div class="clear BUS-sliderImage">
<a href="http://padepokan-it.blogspot.com/"><img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEJLlwDWE4JpmHWC_XG6dktbiN7d6ugXtbkz7y2kqyQZGOHFQ5A46E8CBuJuwtGMQKHGYpkZmKx1O5oJxOK8N6ETLs7hjMsvPtPR7NNrxSFoj8xngOo10nSY8U86LJO77HBzRBjW9E9Yf5/s400/Training+IT+Support.jpg" width="500" />
    <span class="bottom"><h3>
Training IT Support</h3>
Membahas Pekerjaan IT Support di Level teknis dan Skill Yang Harus Dikuasai</span> </a>
<div class="clear BUS-sliderImage">

</div>
</div></ul></div>

<br />


Output dari script ini adalah Memasang menampilkan foto-foto secara  bergantian berbentuk slide hingga tampak seperti menonton sebuah video.

5.       Pada Script diatas Ganti  url Link URL  Image  sesuai link gambar anda Script yang dikasih warna kuning
6.       Anda bisa menambahkan sebanyak mungkin foto yang anda mau, tinggal menambahkan saja kode HTML URL FOTOnya. 
7.       Anda bisa mengedit tinggi & lebar dari foto tersebut. Kode HTML yang saya berikan cocok untuk sidebar blog berukuran 300 x 500 . Anda dengan mengganti kode HTML berwarna pink dengan ukuran yang anda mau sesuai dengan ukuran sidebar blog Anda. 
8.       Hasilnya akan Tampak Seperti Gambar dibawah ini

TAMPILAN SLIDE SHOW FOTO DALAM POSTINGAN BLOG



Selamat Mencoba

PADEPOKAN IT COURSES
IT Tutorial, Training Center, & IT Solution
www.padepokanit.com




No comments:

Post a Comment