Cara Membuat Slideshow Foto di Blog

Assalamu'aliakum Wr. Wb.

Kali ini admin akan sharing cara membuat slideshow foto di blog/web agar tampilan blog/web menjadi lebih menarik, caranya mudah kalian cukup copy paste kode HTML yang sudah kami siapkan dengan caranya :

(tampilan hasil slideshow foto)

Berikut langkah-langkahnya : 

1. Masuk ke blog kalian pilih TEMA/THEME dan EDIT HTML

2. Masukkan kode berikut DIATASNYA ]]></b:skin> atau </style> dibagian head template

   untuk memudahkan gunakan Ctrl + F ketik ]]></b:skin> atau </style>

kode :

.easyslider-wrapper { 

    width: auto; 

    float: left; 

    position: relative; 

    padding-right: 2%; 

    padding-top: 10px; 

    }

.easyslider { 

    overflow: hidden; 

    position: relative; 

    width: 100%; 

    height: 350px; 

    background: #eee; 

    }

.image_reel { 

    position: absolute; 

    top: 0; 

    left: 0; 

    }

.image_reel img { 

    float: left; 

    width: 20%; 

    height: 350px;

    }

.paging { 

    background: none; 

    position: absolute; 

    bottom: 15px; 

    right: 20px; 

    padding:4px 0 2px; 

    z-index: 100; 

    display: none; 

    }

.paging a { 

    margin: 3px; 

    background: #fff; 

    width: 10px; 

    height:10px; 

    display: inline-block; 

    border: none; 

    outline: none;

    }

.paging a.active { 

    background: #15E3FF; 

    border: 1px solid #15E3FF; 

    }

.paging a:hover {

}

.easytitledes { 

    width:70%; 

    display: none; 

    position: absolute; 

    bottom: 20px; 

    left: 20px; 

    z-index: 101; 

    background: #000A3F;

    background: rgba(2, 0, 51, 0.6); 

    padding: 10px 15px; 

    }

.easytitledes a { 

    color: #15E3FF; 

    font: 14px sans-serif; 

    text-transform: uppercase; 

    font-weight: bold; 

    }

.easytitledes a:hover { 

    color:#29FF00 

    }

.easytitledes p { 

    color: #fff; 

    font: 12px Arial; 

    }

3. Masukan kode Jquery berikut diatasnya </head>
    Untuk memudahkan gunakan Ctrl + F </head>  

Kode :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
/*<![CDATA[*/$(document).ready(function() {
    $(".paging").show(); 
    $(".paging a:first").addClass("active");

var imageWidth = $(".easyslider").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

rotate = function(){ var triggerID = $active.attr("rel") - 1; 

var image_reelPosition = triggerID * imageWidth;

    $(".paging a").removeClass('active');
        $active.addClass('active');

    $(".easytitledes").stop(true,true).slideUp('slow');
    $(".easytitledes").eq( 
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

play = setInterval(function(){
    $active = $('.paging a.active').next();

if ( $active.length === 0) {
    $active = $('.paging a:first'); } rotate(); }, 8000); };

rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
/*]]>*/</script>

4. Masukan kode berikut di suatu bagian dalam HTML body, DIBAWAH <div class="main-wrapper"> atau <div id="main-wrapper"> atau <div id='post-wrapper'> atau <div class='main-post'> atau baris kode yang sejenis/mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.

Kode :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<a href="#"><img src="...image1.jpg" /></a>
<a href="#"><img src="...image2.jpg" /></a>
<a href="#"><img src="...image3.jpg" /></a>
<a href="#"><img src="...image4.jpg" /></a>
<a href="#"><img src="...image5.jpg" /></a>
   </div>
   <div class='descriptionslider'>
<div class="easytitledes"><a href='...post-link2.html'>Judul 1</a><p>Description 1</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 2</a><p>Description 2</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 3</a><p>Description 3</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 4</a><p>Description 4</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 5</a><p>Description 5</p></div>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>

Keterangan :

Warna ungu itu copy alamat link gambar

Warna hijau untuk alamat link

Warna biru untuk judul blognya

Warna orange untuk deskripsinya

CARA COPY LINK GAMBAR :

a). Buka website yang fotonya ingin di link

b). Arahkan pointer atau mouse ke gambar klik kanan (klak) pilih COPY IMAGE ADDRESS / COPY ALAMAT GAMBAR

c). Pastekan di tempat "...image1.jpg" hapus dulu tulisan "...image1.jpg" TANDA              PETIK JANGAN SAMPAI TERHAPUS

CARA COPY LINK WEBSITE

a). Copy link website

b). Paste di tulisan ...post-link2.html hapus dulu tulisan ...post-link2.html TANDA PETIK JANGAN SAMPAI TERHAPUS

Ganti JUDUL dan DISKRIPSI (teks Diskripsi bisa copy paste di teks website).
Pada kode diatas disiapkan 5 HTML foto/link. lakukan langkah yang sama untuk menambah foto/link website berikutnya.

5. Save Template, dan lihat hasilnya.

@adminmadrasah