Home » » Slideshow Otomatis Blogger dengan Imageflow 1.3.0

Slideshow Otomatis Blogger dengan Imageflow 1.3.0



Imageflow 1.3.0 for Blogger

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!



Tahap 1: Mengedit Template

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

Edit HTML Blogger
Mengedit HTML


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:

Menambahkan Widget
Menambahkan widget


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

OpsiKeterangan
showPostDate_gJika bernilai true, bulan terbit artikel akan ditampilkan. Jika bernilai false, bulan terbit artikel akan disembunyikan.
slideOpenNewTabJika bernilai true, setiap link akan terbuka di tab/jendela baru. Jika bernilai false, setiap link akan terbuka di tab/jendela yang sama.
idModeJika bernilai true, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai false, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabelsUbah nilainya menjadi true jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel slideLabelName.
slideLabelNameDigunakan untuk menentukan nama label yang spesifik setelah mengubah nilai slidebyLabels menjadi true.
pBlankAdalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
textDigunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_gDigunakan untuk menentukan jumlah slide.
home_pageURL blog Anda.

Pengaturan Imageflow 1.3.0

OpsiKeterangan
loadingTextDigunakan untuk menentukan deskripsi saat sedang memuat gambar.
animationSpeedDigunakan untuk menentukan kecepatan gerakan slide.
animationSpeedDigunakan untuk menentukan kecepatan gerakan slide.
aspectRatioRasio kontainer Imageflow (lebar dibagi dengan tinggi)
circularJika 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).
imageCursorDigunakan untuk menentukan kursor gambar.
opacityJika 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.
imageCursorDigunakan untuk menentukan kursor gambar (Untuk slideshow Blogger ini, tidak terlalu penting).
opacityArrayDigunakan untuk menentukan tingkat transparasi sesuai dengan jarak gambar dari gambar paling depan (maksudnya, gambar yang di tengah) menuju gambar terakhir/terjauh dari pandangan.
imagesHeightDigunakan untuk menentukan tinggi kontainer gambar (tidak begitu jelas sebenarnya, tapi akan Saya perbaiki keterangan opsi ini jika sudah jelas).
imagesScalingJika bernilai false setiap gambar tidak akan mengecil meskipun jarak gambar sudah semakin jauh.
percentLandscapeKeterangan 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).
percentOtherBelum begitu meyakinkan. Keterangan asli: Scale portrait and square format.
preloadImagesJika bernilai false, efek animasi loading tidak akan tampil.
sliderJika bernilai false, slider di bagian bawah slideshow akan menghilang.
sliderCursorDigunakan untuk menentukan kursor slider.
sliderWidthDigunakan untuk menentukan lebar slider (tidak penting, kecuali jika Anda ingin mengubah backgrund-image slider ini).
scrollbarPDigunakan untuk menentukan lebar scrollbar slider dalam persen.
onClickDigunakan untuk menyisipkan fungsi tambahan saat gambar diklik.
startIDDigunakan untuk menentukan slide urutan ke berapa yang akan tampil terlebih dahulu.
slideshowJika bernilai false, simbol play di sebelah kiri atas akan menghilang.

Opsi standar Imageflow
Navigasi standar Imageflow


slideshowSpeedDigunakan untuk menentukan kecepatan slideshow jika opsi slideshow bernilai true.
slideshowAutoplayJika bernilai true, Imageflow akan mengaktifkan fungsi slideshow otomatis saat pertama kali halaman diakses.
startAnimationKurang begitu meyakinkan. Keterangan aslinya: Animate images moving in from the right on startup.
xStepDigunakan 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],
    ...
    ...
//]]>





button_right_dark.png
button_play_dark.png
button_pause_dark.png
button_left_dark.png
slider_dark.png


0 comments:

Post a Comment

Visitor

RECENT POSTS

Followers