Lokasi : Komplek Graha Bukit Raya 1 Blok G3 No 16 LT 3, Bandung Barat

Lokasi : Komplek Graha Bukit Raya 1 Blok G3 No 16 LT 3, Bandung Barat

VIDEO TUTORIAL MIKROTIK VIDEO + MODUL TRAINING ORDER BISA VIA TOKOPEDIA KLIK LINK GAMBAR

VIDEO TUTORIAL MIKROTIK  VIDEO + MODUL TRAINING ORDER BISA  VIA TOKOPEDIA KLIK LINK GAMBAR
Update Video Tutorial > Lebih dari 350 Video Tutorial MIkrotik

Jadwal Training Mikrotik Running Setiap Awal dan Akhir Bulan

Excel Fundamental, Excel Advanced, Dan Excel Programming VBA

IT TRAINING CENTER CONTACT : 0812-1451-8859 / 081-1219-8859

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




Share

Artikel Lainnya :



No comments:

Post a Comment

Training Bulan ini

Padepokan IT Course

Lokasi Training
Jl. H.Gofur Komplek Graha Bukit Raya 1 Blok G3 No 16 Lantai 3, Cilame, Bandung Barat

Telp : 081214518859 (WhatsApp)
E-Mail : padepokanit.course@gmail.com
Instagram : @padepokanit
Website : www.padepokanit.com

Info Site

User Online Padepokan-IT Course

IT Tutorial, Training & IT Solution