Slideshow Otomatis Blogger dengan Imageflow 1.3.0

Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam Imageflow, karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasinya menggunakan JQuery, yaitu dengan cara menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya bisa mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() seperti ini:

onClick = function() {
    window.open($(this).attr('rel'));
}

Tapi Saya pikir, menggunakan JQuery pada Imageflow merupakan sebuah pemborosan besar. Tidak efisien. Bahkan Imageflow bisa bekerja tanpa JQuery! Jadi Saya memutuskan untuk menggunakan ilmu sihir terakhir: Menyisipkan elemen <a> ke dalam atribut rel gambar (karena caption setiap slide diproduksi dari atribut alt pada gambar) seperti ini:

document.write('<img src="img[o]" alt="&lt;a href=&#39;' + posturl + '&#39;&gt;'

+ postitle + '&lt;/a&gt;" />');

Dan berhasil!

Lihat Demo

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

@charset "utf-8";
/**
 * Auto Content 4 Imageflow 1.3.0 by Taufik Nurrohman
 * Visit: http://hompimpaalaihumgambreng.blogspot.com
 */
@media screen, projection {
  .imageflow {
    width:100%;
    overflow:hidden;
    position:relative; 
    text-align:left;
    visibility:hidden;
    margin:0px auto;
    font:normal 12px Verdana,Arial,Sans-Serif;
  }

  .imageflow img {
    border:none;
    padding:0px 0px;
    margin:0px 0px;
    background:transparent;
    position:absolute;
    top:0px;
    visibility:hidden;
    -ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the

IE7 */
    -webkit-box-shadow:0px 1px 10px black;
    -moz-box-shadow:0px 1px 10px black;
    box-shadow:0px 1px 10px black;
  }

  .imageflow p {
    margin:0 auto;
    text-align:center;
  }

  .imageflow .loading {
    border:1px solid white;
    height:15px;
    left:50%;
    margin-left:-106px;
    padding:5px;
    position:relative;
    visibility:visible;
    width:200px;
  }

  .imageflow .loading_bar {
    background:#fff;
    height:15px;
    visibility:visible;
    width:1%;
  }

  .imageflow .navigation {
    z-index:10000;
  }
  .imageflow .caption {
    font-weight:bold;
    position:relative; 
    text-align:center;
    z-index:10001;
    text-shadow:0px 1px 3px black;
  }

  .imageflow .caption a {
    text-decoration:none;
    color:white;
  }

  .imageflow .caption a:hover {text-decoration:underline;color:#8CD0D3;}
  .imageflow .scrollbar {
    border-bottom:1px solid #b3b3b3;
    position:relative; 
    visibility:hidden;
    z-index:10002;
    height:1px;
  }

  .imageflow .slider {
    background:url('http://1.bp.blogspot.com/-4lzSM34zaOA/T01-W0Mb1kI/

AAAAAAAACQU/5w3WsezYvRY/s1600/slider.png') no-repeat;
    height:14px;
    margin:-6px 0 0 -7px;
    position:absolute;
    width:14px;
    z-index:10003;
  }

  .imageflow .slideshow {
    cursor:pointer;
    height:14px;
    margin:20px 0 0 20px;
    position:absolute;
    width:14px;
    z-index:10003;
  }

  .imageflow .slideshow.pause {
    background:url('http://2.bp.blogspot.com/-yt4eRgtDd6I/T01wsFn-e4I/

AAAAAAAACPM/pdr8ljnrM9o/s1600/button_pause.png') no-repeat center;
  }
  .imageflow .slideshow.play {
    background:url('http://3.bp.blogspot.com/-H5F2nAmaVBA/T01wx0hM8oI/

AAAAAAAACPc/OpMSLH-WaO8/s1600/button_play.png') no-repeat center;
  }

  .imageflow .images {
    overflow:hidden;
    white-space:nowrap;
  }

  .imageflow .button {
    cursor:pointer;
    height:17px;
    position:relative;
    width:17px;
  }

  .imageflow .previous {
    background: url('http://4.bp.blogspot.com/-Eq4y210bsdE/T01wpORgybI/

AAAAAAAACPE/AwOmlS5OrpU/s1600/button_left.png') top left no-repeat;
    float:left;
    margin: -7px 0 0 -30px;
  }

  .imageflow .next {
    background: url('http://2.bp.blogspot.com/-VwvDUzRpSOo/T01wuzhWf-I/

AAAAAAAACPU/K4NQIxxIm7U/s1600/button_right.png') top left no-repeat;
    float:right; 
    margin:-7px -30px 0 30px;
  }
}

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://reader-download.googlecode.com/svn/trunk/imageflow-custom.js'

 type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var loadingText       = "Memuat gambar",
    animationSpeed    = 50,
    aspectRatio       = 1.964,
    circular          = true,
    imageCursor       = 'default',
    opacity           = false,
    opacityArray      = [10,8,5,3],
    imagesHeight      = 0.77,
    imageScaling      = true,
    percentLandscape  = 200,
    percentOther      = 100,
    preloadImages     = true,
    slider            = true,
    sliderCursor      = 'e-resize',
    sliderWidth       = 14,
    scrollbarP        = 0.7,
    onClick           = function() {},
    startID           = 1,
    slideshow         = true,
    slideshowSpeed    = 1500,
    slideshowAutoplay = false,
    startAnimation    = false,
    xStep             = 200;
//]]>
</script>

Klik Simpan Template.

Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
    showPostDate_g  = false;
    showComm_g      = false;
    slideOpenNewTab = true;
    idMode          = true;
    slidebyLabels   = false;
var slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-RdWht36FTLI/

TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png",
    text            = "Komentar",
    numposts_g      = 10,
    home_page       = "http://latitudu.blogspot.com/";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/

autoContent4Imageflow.1.3.js" type="text/javascript"></script>

Ganti URL http://latitudu.blogspot.com/ dengan alamat blog Anda lalu simpan.

Konfigurasi JSON & Imageflow 1.3.0

Pengaturan slideshow ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan opsi dalam Imageflow itu sendiri.

Pengaturan JSON - Auto Content Slider

Opsi	Keterangan
showPostDate_g	Jika bernilai `true`, bulan terbit artikel akan ditampilkan. Jika bernilai `false`, bulan terbit artikel akan disembunyikan.
slideOpenNewTab	Jika bernilai `true`, setiap link akan terbuka di tab/jendela baru. Jika bernilai `false`, setiap link akan terbuka di tab/jendela yang sama.
idMode	Jika bernilai `true`, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai `false`, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabels	Ubah nilainya menjadi `true` jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel `slideLabelName`.
slideLabelName	Digunakan untuk menentukan nama label yang spesifik setelah mengubah nilai `slidebyLabels` menjadi `true`.
pBlank	Adalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
text	Digunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_g	Digunakan untuk menentukan jumlah slide.
home_page	URL blog Anda.

Pengaturan Imageflow 1.3.0

Opsi	Keterangan
loadingText	Digunakan untuk menentukan deskripsi saat sedang memuat gambar.
animationSpeed	Digunakan untuk menentukan kecepatan gerakan slide.
animationSpeed	Digunakan untuk menentukan kecepatan gerakan slide.
aspectRatio	Rasio kontainer Imageflow (lebar dibagi dengan tinggi)
circular	Jika bernilai `false` slideshow akan memiliki titik awal dan titik akhir. Jika bernilai `true` slideshow akan membentuk lingkaran slide dan tidak akan pernah memiliki akhir (Saat slide telah habis, slide pertama akan muncul setelah slide terakhir).
imageCursor	Digunakan untuk menentukan kursor gambar.
opacity	Jika bernilai `true` setiap gambar di samping gambar yang sedang aktif akan memudar dan transparan. Semakin jauh jaraknya akan semakin transparan sesuai dengan pengaturan baris transparasi pada `opacityArray`.
imageCursor	Digunakan untuk menentukan kursor gambar (Untuk slideshow Blogger ini, tidak terlalu penting).
opacityArray	Digunakan untuk menentukan tingkat transparasi sesuai dengan jarak gambar dari gambar paling depan (maksudnya, gambar yang di tengah) menuju gambar terakhir/terjauh dari pandangan.
imagesHeight	Digunakan untuk menentukan tinggi kontainer gambar (tidak begitu jelas sebenarnya, tapi akan Saya perbaiki keterangan opsi ini jika sudah jelas).
imagesScaling	Jika bernilai `false` setiap gambar tidak akan mengecil meskipun jarak gambar sudah semakin jauh.
percentLandscape	Keterangan aslinya seperti ini: Scale landscape format. Tapi setelah Saya coba mengubahnya, opsi ini justru lebih mirip sebagai pengubah skala gambar sehingga gambar bisa menjadi jauh lebih besar dalam area yang tidak begitu luas (Anda harus tahu bahwa slideshow ini sebenarnya sangat responsif).
percentOther	Belum begitu meyakinkan. Keterangan asli: Scale portrait and square format.
preloadImages	Jika bernilai `false`, efek animasi loading tidak akan tampil.
slider	Jika bernilai `false`, slider di bagian bawah slideshow akan menghilang.
sliderCursor	Digunakan untuk menentukan kursor slider.
sliderWidth	Digunakan untuk menentukan lebar slider (tidak penting, kecuali jika Anda ingin mengubah backgrund-image slider ini).
scrollbarP	Digunakan untuk menentukan lebar scrollbar slider dalam persen.
onClick	Digunakan untuk menyisipkan fungsi tambahan saat gambar diklik.
startID	Digunakan untuk menentukan slide urutan ke berapa yang akan tampil terlebih dahulu.
slideshow	Jika bernilai `false`, simbol play di sebelah kiri atas akan menghilang.

Opsi standar Imageflow — Navigasi standar Imageflow

slideshowSpeed	Digunakan untuk menentukan kecepatan slideshow jika opsi `slideshow` bernilai `true`.
slideshowAutoplay	Jika bernilai `true`, Imageflow akan mengaktifkan fungsi slideshow otomatis saat pertama kali halaman diakses.
startAnimation	Kurang begitu meyakinkan. Keterangan aslinya: Animate images moving in from the right on startup.
xStep	Digunakan untuk menentukan radius lingkaran slideshow. Semakin besar nilainya, maka jarak antara gambar yang satu dengan yang lainnya akan semakin jauh.

Contoh Penerapan: circular:false, opacity:true

//<![CDATA[
    ...
    ...
    circular          = false,
    opacity           = true,
    opacityArray      = [10,8,5,3],
    ...
    ...
//]]>

Lihat Demo

button_right_dark.png

button_play_dark.png

button_pause_dark.png

button_left_dark.png

slider_dark.png

Slideshow Otomatis Blogger dengan Imageflow 1.3.0