Cara Mudah Membuat Slide Show Mengandung Link Pada Blogspot

Cara Mudah Membuat Slide Show Mengandung Link Pada Blogspot

Kali ini saya memberikan cara bagaimana memasang Slide Show di blog. Saya mengusahakan tetorial ini untuk temen-temen yang masih sangat pemula, jadi saya sajikan agak bertele-tele. Gunanya Slide ini bisa membuat blog temen menjadi lebih menarik, enak di pandang dan tidak terkesan monoton, Apalagi jika template blog sobat terlalu banyak tulisan-tulisan kecil.

Saya sendiri masih berusaha memperbaiki kemampuan saya, jadi jika temen-temen merasa ada yang ada yang salah, silahkan temen-temen koreksi saya.

Latar Belakang
keberadaan Slide show dapat menambahkan kesan tersendiri bagi yang melihatnya.

Alat-Bahan
- Pc/Laptop.
- blogger.

Tujuan
Agar dapat mengedit dan menambahkan slide show yang di inginkannya.

Tahap Pelaksanaan
Berikut langkah-langkahnya :

1. Masuk, Log In Blogger Dashboard.

2. Klik Tata Letak.

3. Klik Tambahkan Gadget.

4. Block Semua Script di bawah ini, Kemudian Ctrl + C.

<style type="text/css">
/* http://dimpost.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
      
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTcAV-RxIRWE0I_wIAkt43WrpV0MICwVWnq77I6OdL-LtFGcs1VJAFj-r9kQo0RbejiE-vfNcC4UyZvgYlDqmBGtwopswXkE8wv1xfwXjZ7xx5G3twD_ZhkNsyQY9nnheitl7CBsN4I74/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlcfOzmgBuL8jjXYV19xzUh02p6CoJcGdU6hUufF8hUxZzSX1m9euxsXfiuFVb-MazQYpGmdAacQIkxyHIduGu8GJZ__tjZe1ehOrOHQe6uXpag1MmQB4Rw1vPn6x9nJg4SXxHFIl3uSNE/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIFEcPRi9ydyT5j67G1LHu-10QZw7K8cWQpTKo00Uiqk7pwFhvlFPRUJ3yq-100iRbA4FN2XgXJok9n58CoNd3JtxmvGxxWLH_Gnn7L-PXuCRa1HI_3xq_H6HluZB0soV8_BCyLa94iVx8/s1600/gurun+2.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_fi-dMemnMbwBLROKWtpMx6hMgMFtziaqgIxPJq3reDIAAI6P7YLX6QuOQMC67Wf7ccR-nhPQaSybtK4KxD8j9KQJnp41GtRTq-B69yY4P74MhuMDoY7d0cPFeJg3imNInjKXYVWEnHy/s1600/gurun.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDYZjXqp21q08bcXGT14IZkgwy0Wbi95LoOv0Dq1Kf6Vz2VRDxRCVPdThZXh2QEt7gRs4Yh7hbV8sJcyg8teN_onlqh-0uoVMJblSFMQF7iCwd1TnjsfH0fNJ8EuBbaqBFVipha-wtxWFz/s1600/hiu.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVgSXAjubDhpDGTLlYSvda22TWttjM2jSRAshXUF-xVg2U4SZJBxP6iwf4GsLpddvAkcOn4C8AD6Nt4BU0x2uTzP2kElNuyNkCwWiOMJ1ssiGURSnrYTsQ9g77RUizi4TlyJr5ZhtVlZur/s1600/hujan.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi76axZUkPSqnUkw2fh7w5hTzpV0dZ4KruuEK7-209ZcxkiE3cWS9tEd0aoahidkJiMIUj0ByzBFv7-rMYCZ1ZCK4R_GmEkRdnnNcoI540makS7cwoIPZSM39KJOXpeigvb5u7FG2ve-qHH/s1600/ilustrasi.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Code by <a href="http://bani-fahmi.blogspot.com/" target="_blank">baniblog</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://bani-fahmi.blogspot.com/" target="_blank">CSS</a> <a href="http://bani-fahmi.blogspot.com/" target="_blank">JavaScript</a> Rocks.
</div>
</div>

5. Kemudian Klik Save. Untuk meng-edit silahkn ganti alamat url gambar dan ukuran gambar pda slide anda untuk menyesuaikannya.

Referensi
 http://www.blogooblok.com/2015/03/membuat-slider-yang-elegan-dan-simple.html 

Wassalamualaikum Wr. Wb.