Cara Membuat slide show Featured Image/Post di Blogspot

Cara Membuat Featured Image/Post di Blogspot

Cara membuat Featured Image/Post di Blogspot, seperti yang bisa Anda lihat di halaman depan blog ini, sangat mudah. Anda tinggal melakukan langkah-langkah berikut ini:

1. Template --> Edit HTML

2. Temukan kode <b:section class='main' id='main' showaddelement='no'>

3. Ubah jadi atau ganti dengan <b:section class='main' id='main' showaddelement='yes'> (mengubah ini doang kok: showaddelement='no' jadi showaddelement='yes'

4. Jika Featured Image/Post hanya dimunculkan di halaman depan, seperti di blog ini, Anda tinggal tambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di atas kode <!-- only display title if it's non-empty --> dan </b:if> di bawah kode <b:include name='quickedit'/>. (Selengkapnya baca DI SINI).

5. Save Template!

Langkag 1 s.d. 5 tersebut untuk memunculkan kolom Gadget baru di atas Blog post. Mari kita lanjutkan:

6. Klik "Layout". Nanti akan ada kolom "Add a Gadget" baru di atas kolom "Blog Posts"
7. Klik "Add a Gadget"--> Pilih HTML/Javascript
8. Masukkan kode HTML/Javascript.

Jika ingin hanya berupa gambar, seperti di blog ini, tinggal masukkan kode <img src="LINK GAMBAR/FOTO">

Jika ingin berupa Featured Content Slider Post, Anda bisa dapatkan kodenya di SINI. Ada 17 lebih pilihan tampilan featured post buat blogspot di sana.

Cara Membuat Featured Image/Post di Blogspot lainnya yang lebih praktis dan bagus, gak mau ribet ganti URL/LINK dan sebagainya, Anda gunakan CARA INI saja.

Mau Featured Post blognya seperti Image Slideshow punya Yahoo!? Ada di sini. Good Luck!

buat Slide Show Foto / Gambar Pada Postingan Blog dengan Diskripsi serta Link

Bagai mana Cara buat Slide Show Foto / Gambar Pada Postingan Blog  menarik dengan Diskripsi Blog serta mengarahkan ke Link tautan aslinya
1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget.
4. Pilih HTML/Javascript.
5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<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/AVvXsEg5xc19mxuW6E0rf5ke9jF7ZzXrPEQrzaihjSDxBO8MRmfQrlbQSGWKfxwLlYmVjEwsnStf17Wtdp2hfvlZk5Rf16GrPcOV0usqaWNcw65muED3hOuOyGihzR5xswuwzZ0KmoifGutflgYY/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/AVvXsEj5YD0G62bYYpcCrbGG9fPoAJvDPEHp2PL6RFM4WEBa9D7jG3JQWixMFbxPQJfUyygS4j6iFh2407OHbfUlXrm1_99Z2NnUL20pfoWMLJUTCbjvRLTR1RExtu94E8FcZLnaqleDek0nIvuX/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/AVvXsEgzoeyo8xlS4BVrZYhTvsIlsTLvqYWN2rnvHO-YsbCB_Hyl8Bjb2ZAIe9ZVcNlZHPHKKa4LvxytlajBzFPyQFUExlJPIl2iFcFN30SoPyUgdUvUfHaw0mzghTp_BSNfHLH96PUGoGUr3CWB/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/AVvXsEjUhXIIhZ9DMpY2B_utUDlxACbdzMFha9c0wsh4JlUiQ3o8sLiRjv1hJFUdrAluS7vNBaUJkpSjimzWhCAVG6zXbrsY8IZ_aJtO9zSDhG4UfO8CfnyFQHk2JzbiBmtdRpPv82xEbZRPC1nO/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/AVvXsEir_Vp5ZUn6bjqc-262vYn-BEvkmr7LeyaiKdY7koPimAe8FQGiurxMZ5q-fOrpksWif1VUcM3ATpr1oAHjpHtIGwOq2pnZIZWQRdtT4Cn80ua2OpNy56tCQjEtSc_-L-1rA3GEbLFIw7XK/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 

- See more at: http://blog-rangga.blogspot.com/2013/01/cara-membuat-slide-show-foto-gambar.html#sthash.5yw64cNF.dpuf
7. Save  HTML/Javascript
semoga berhasil