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="<a href='' + posturl + ''>' + postitle + '</a>">');Dan berhasil!
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
URL: https://plus.google.com/108949996304093815163/about
*/
@media screen, projection {
.imageflow {
width:600px; /* Lebar Slideshow */
position:relative;
text-align:left;
visibility:hidden;
margin:0 auto;
font:normal normal 12px/1.4 Verdana,Tahoma,Arial,Sans-Serif;
}
.imageflow img {
border:none;
padding:0;
margin:0;
background:transparent;
position:absolute;
top:0;
visibility:hidden;
/* Enables bicubic image resampling for the IE7 */
-ms-interpolation-mode:bicubic;
/* Uncomment this declaration to enable shadow around images
-webkit-box-shadow:0 1px 10px black;
-moz-box-shadow:0 1px 10px black;
box-shadow:0 1px 10px black;
*/
}
.imageflow p {
margin:0 auto;
text-align:center;
}
.imageflow .loading {
border:1px solid white;
height:15px;
left:50%;
margin-top:4px;
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;
margin-top:60px; /* Jarak atas slider terhadap daftar gambar */
}
.imageflow .caption {
font-weight:bold;
position:relative;
text-align:center;
z-index:10001;
text-shadow:0 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:transparent url('http://1.bp.blogspot.com/-4lzSM34zaOA/T01-W0Mb1kI/AAAAAAAACQU/5w3WsezYvRY/s1600/slider.png') no-repeat 50% 50%;
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:transparent url('http://2.bp.blogspot.com/-yt4eRgtDd6I/T01wsFn-e4I/AAAAAAAACPM/pdr8ljnrM9o/s1600/button_pause.png') no-repeat 50% 50%}
.imageflow .slideshow.play {background:transparent url('http://3.bp.blogspot.com/-H5F2nAmaVBA/T01wx0hM8oI/AAAAAAAACPc/OpMSLH-WaO8/s1600/button_play.png') no-repeat 50% 50%}
.imageflow .images {
overflow:hidden;
white-space:nowrap;
}
.imageflow .button {
cursor:pointer;
height:17px;
position:relative;
width:17px;
}
.imageflow .previous {
background:transparent url('http://4.bp.blogspot.com/-Eq4y210bsdE/T01wpORgybI/AAAAAAAACPE/AwOmlS5OrpU/s1600/button_left.png') no-repeat 0 0;
float:left;
margin:-7px 0 0 -30px;
}
.imageflow .next {
background:transparent url('http://2.bp.blogspot.com/-VwvDUzRpSOo/T01wuzhWf-I/AAAAAAAACPU/K4NQIxxIm7U/s1600/button_right.png') no-repeat 0 0;
float:right;
margin:-7px -30px 0 30px;
}
}Kemudian temukan kode ini:
</head>
Salin kode di bawah ini kemudian letakkan di atasnya:
<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.5,
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>
<script src='http://reader-download.googlecode.com/svn/trunk/imageflow-custom.js' type='text/javascript'></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">
var showPostDate_g = false,
showComm_g = false,
slideOpenNewTab = true,
idMode = true,
slidebyLabels = false,
slideLabelName = "Mengenai",
pBlank = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png",
text = "Komentar",
numposts_g = 10,
home_page = "http://nama_blog.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4Imageflow.1.3.js" type="text/javascript"></script>Ganti URL http://nama_blog.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.
| 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. |
| 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. |
| 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],
...
...
//]]>
