Membuat foto slide plus link pada blog

Maksudnya adalah kita membuat semacam iklan berbentuk rangkaian foto (foto slide) yang akan ditampilkan pada blog kita. Foto slide itu sudah dipasang link yang apabila di "klik" akan di dialihkan ke web/blog lain.

Langkah :
1. Menyiapkan foto, yaitu  :
Foto yang sudah mempunyai url. Caranya buatlah album foto (beberapa foto) yang akan dibuat slidenya, kemudian upload di blog dan terbitkan. Ukuran besarnya foto harus disesuaikan dengan keperluan slide yang akan kita buat nanti, karena mungkin bisa terlalu besar atau terlalu kecil. Biasanya harus di resize. dan diberi ukuran yang sama untuk semua foto. Cara resize bisa dengan aplikasi Paint, Photosop, atau yang mana aja. Tapi kalau saya, dibantu dengan smartphone android dengan apl. photo resizer (unduh di play store), lebih praktis karena fotonya juga berasal dari hp. Dari foto yang sudah diterbitkan di blog inilah yang nanti kita salin url-nya untuk di-paste-kan di srcipt html foto slide yang akan kita buat.

2 . Script
Copy script berikut, kemudian edit sesuai dengan  url foto yang sudah disiapkan dan url web/blog yang menjadi tautan.
Inilah sriptnya :

<style type="text/css">
#simplegallery2 {
 //CSS for sample Gallery
position: relative;
 visibility: hidden;
 border: 5px solid black;
 margin: auto;
}

#simplegallery2 .gallerydesctext {
 //CSS for description DIV of Example 1 (if defined)
text-align: left;
 padding: 2px 5px;
 font-family: calibri;
}
</style>

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

<script type="text/javascript" src="http://code.helperblogger.com/image-gallery.js">
</script>

<script type="text/javascript">
var mygallery2=new simpleGallery({
 wrapperid: "simplegallery2", //ID of main gallery container,
 dimensions: [240, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [

 ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUpHR_Is9zWhDPqP5i4JNQYWw1Z64bW_vRENftMJuqt1FTF4MRO7gVZOX5OwuhC8pipDdqv3kQkEAkNKa5tIbh5b8I68oQ7DFMyeLV_Tnelp7BVjER9TGPnrSV9K2RQYTaiinGu70kUoxo/s640/IMG_2014032851529.jpg", "http://ayufaiza.blogspot.com/2013/11/menjahit-gaun-pengantin-kebaya-di.html", "_new", "IMAGE DESCRIPTION HERE"],

 ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ5wiHx0MYD7OQ0rUmRazw99ijebwOTxMbYnaUI1sItzESc31rz0zDp9IaH-wY0hFTHQJyT8qbjC35Lldb55Nnh67JeQ6AJ6-5znAAF5pGNCmSldQTnIYlKkc1T9vR-e6LSbMeIEKJsXZd/s640/IMG_2014032834472.jpg", "http://ayufaiza.blogspot.com/2013/11/menjahit-gaun-pengantin-kebaya-di.html", "_new", "IMAGE DESCRIPTION HERE"],

 ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi29GEMrx9i6jwwDYt2WduUKEUr_o4iqHTLB1B2ZXRlvNxe3Pzk0jKZtfmmeFAbkotkVW7CT3weKmiXybpS-fNAepoBdxeRhf9fPX0huTh-I3a2X9wynhp4xlBrAimsAbs9F8OZXGwuDlZe/s640/IMG_2014032816710.jpg","http://ayufaiza.blogspot.com/2013/11/menjahit-gaun-pengantin-kebaya-di.html", "_new", "IMAGE DESCRIPTION HERE"],

 ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLX3tfcEe9LI_yUHYQO4mzEXI2rrHP7m0L8Q-3DqZVuVFeVWRLOIhUVolKHhEvzFf7aQpL0lGEaOIPIaVX4dmHLjInNz_ONiK4EdZ1W2clEcfsbKr2bgExH0U9vhlZkzpL9G79La6RoVG-/s640/IMG_201403283749.jpg", "http://ayufaiza.blogspot.com/2013/11/menjahit-gaun-pengantin-kebaya-di.html", "_new", "IMAGE DESCRIPTION HERE"],

 ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnyL-ZAfRH6P3YRlWan_ZlDjhLuidsHRj9F1PReYQxpWAG88gEshECgKJyhLWSajyxvlj_9-yxctzpUPr9BErYIo48G7NMh7VYoMZLP7AAcmjKEhX5mD7FYsr4F9MpyiBJubFBPe4QbTK1/s640/IMG_2014032824948.jpg", "http://ayufaiza.blogspot.com/2013/11/menjahit-gaun-pengantin-kebaya-di.html", "_new", "IMAGE DESCRIPTION HERE"]
 ],
 autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
 persist: true,
 fadeduration: 1000, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
 //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
 //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})
</script>
<div id="simplegallery2"></div>

Keterangan :

• warna biru = setelan ukuran bingkai foto, bisa dirubah sesuai keinginan
• warna hijau = ganti dengan url foto anda yang sudah disiapkan sebelumnya
• warna merah = ganti dengan url web/blog yang akan menjadi tautan slide
• warna ungu = isi dengan deskripsi foto

3. Masuk ke blogger dashbor >>tata letak>>pilih menu "HTML/JAVA SCRIPT", kemudian pastekan kode html diatas kedalam kolom konten. Kolom judul, boleh diisi boleh tidak.

Terakhir jangan lupa simpan hasil perubahan, dan lihat hasilnya....