Slideshow Otomatis Blogger Dengan Imageflow 1.3.0 - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / / / Slideshow Otomatis Blogger Dengan Imageflow 1.3.0

Pembaharuan: 10 Desember 2013

Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam Slideshow Otomatis Blogger dengan ImageFlow 1.3.0

Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam ImageFlow, alasannya ialah ketika gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasinya memakai jQuery, yaitu dengan cara menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya dapat mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() ibarat ini:

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

Tapi Saya pikir, memakai jQuery pada ImageFlow merupakan sebuah pemborosan besar. Tidak efisien. Bahkan ImageFlow dapat bekerja tanpa jQuery! Kaprikornus Saya tetapkan untuk memakai ilmu sihir terakhir: Menyisipkan elemen <a> ke dalam atribut alt gambar (karena caption setiap slide diproduksi dari atribut alt pada gambar) ibarat ini:

skeleton += '<img src="' + image + '" alt="Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam  Slideshow Otomatis Blogger dengan ImageFlow 1.3.0">';

Dan berhasil!

Lihat Demo

Tahap 1: Mengedit Tema

Untuk membuatnya, pertama-tama masuklah ke sajian Tema lalu klik Edit HTML dan klik Lanjutkan:

Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam Slideshow Otomatis Blogger dengan ImageFlow 1.3.0
Mengedit HTML.

Temukan aba-aba ini:

]]></b:skin>

Salin aba-aba di bawah ini, lalu letakkan di atasnya:

@charset "utf-8";  /*! ImageFlow 1.3.0 for Blogger by Taufik Nurrohman => http://gplus.to/tovic */  @media screen, projection {   .imageflow {     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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACUSURBVHjaYvz//z8DEmAD4iggDgRiaajYUyBeD8TLgPgXXCVIIxSbAfG9/7jBPagasHqYJmMg/vafMPgGVQvWyAbEt/8TD0Bq2UAa0/6TDtKYgN70ZiAdeIM0qpOhUZ2JgUwA0niTDH03QRq3kqFxK0XRAUs1xCYAM+SUQ3KSY8SSyGOhiVwCKvYCmsgXIydygAADADh+f/4z7YkeAAAAAElFTkSuQmCC') 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('data:image/png;base64,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') no-repeat 50% 50%}   .imageflow .slideshow.play {background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHpJREFUeNpi/P//PwOlgImBCoBmhrBRw5AnQNwCxBJEmwIKWDQMA3+AeAUQ22BRg4LxGYIMzgNxMhBzUmIIDLwF4l4gVqHEEGSQT64hH4B4ArkuuQTEmUDMQ2qYUBQ7r4C4BYglCGmGYUYsGRCUYn+RkmIZh1cuBggwAJJY01fg92o9AAAAAElFTkSuQmCC') 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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH1JREFUeNpi/P//PwOlgImBCmDADGGjxBAJIG4B4icYMqCAJYBtgHgFEP/5jwAoanBp5ATiZCA+/x87wGuIChB3AfHb//gBTkPy/xMPCLpkAhB/oMQQGOYB4kwgvkSJIVSJHWxYAohbgPgVuhwjGRkQlGJ/IQswDq9cDBBgAB+v01QBu/akAAAAAElFTkSuQmCC') no-repeat 0 0;     float:left;     margin:-7px 0 0 -30px;   }   .imageflow .next {     background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHpJREFUeNpi/P//PwOlgImBCoBmhrBRw5AnQNwCxBJEmwIKWDQMA3+AeAUQ22BRg4LxGYIMzgNxMhBzUmIIDLwF4l4gVqHEEGSQT64hH4B4ArkuuQTEmUDMQ2qYUBQ7r4C4BYglCGmGYUYsGRCUYn+RkmIZh1cuBggwAJJY01fg92o9AAAAAElFTkSuQmCC') no-repeat 0 0;     float:right;     margin:-7px -30px 0 30px;   }   .imageflow-date:before,   .imageflow-comment:before {content:" - "}   .imageflow-comment {display:none} }

Klik Simpan Tema.

Tahap 2: Meletakkan Slideshow

Masuklah ke sajian Tata Letak lalu tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bab atas posting:

Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam Slideshow Otomatis Blogger dengan ImageFlow 1.3.0
Menambahkan widget.

Salin aba-aba di bawah ini lalu letakkan di dalam formulirnya:

<div class="imageflow-container" id="imageflow-container"></div> <script> var imageflow_config = {     url: 'http://dte-feed.blogspot.com',     numPost: 7,     labelName: null,     monthArray: [         "Januari",         "Februari",         "Maret",         "April",         "Mei",         "Juni",         "Juli",         "Agustus",         "September",         "Oktober",         "November",         "Desember"     ],     noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',     newTabLink: false,     containerId: 'imageflow-container',     imageflow: {         loadingText: "Memuat gambar", /* Loading text */         imageWidth: 400, /* Image width */         animationSpeed: 50, /* Animation speed in ms */         aspectRatio: 1.964, /* Aspect ratio of the ImageFlow container (width divided by height) */         buttons: true, /* Toggle navigation buttons */         captions: true, /* Toggle captions */         circular: true, /* Toggle circular rotation */         imageCursor: 'default', /* Cursor type for all images - default is 'default' */         imageFocusM: 1.0, /* Multiplicator for the focussed image size in percent */         imageFocusMax: 4, /* Max number of images on each side of the focussed one */         imageScaling: true, /* Toggle image scaling */         imagesHeight: 0.67, /* Height of the images div container in percent */         imagesM: 1.0, /* Multiplicator for all images in percent */         onClick: function() {}, /* Onclick behaviour */         opacity: false, /* Toggle image opacity */         opacityArray: [10, 8, 6, 4, 2], /* Image opacity (range: 0 to 10) first value is for the focussed image */         percentLandscape: 118, /* Scale landscape format */         percentOther: 100, /* Scale portrait and square format */         scrollbarP: 0.6, /* Width of the scrollbar in percent */         slider: true, /* Toggle slider */         sliderCursor: 'e-resize', /* Slider cursor type - default is 'default' */         sliderWidth: 14, /* Width of the slider in px */         slideshow: true, /* Toggle slideshow */         slideshowSpeed: 1500, /* Time between slides in ms */         slideshowAutoplay: false, /* Toggle automatic slideshow play on startup */         startID: 1, /* Image ID to begin with */         glideToStartID: true, /* Toggle glide animation to start ID */         startAnimation: false, /* Animate images moving in from the right on startup */         xStep: 150 /* Step width on the x-axis in px */     } }; </script> <script src="//dte-project.googlecode.com/svn/trunk/blogger-imageflow.js"></script>

Konfigurasi Widget

Pengaturan Widget secara Umum
Opsi Keterangan
url Ganti nilainya dengan URL blog Anda.
numPost Digunakan untuk memilih berapa banyak gambar yang ingin ditampilkan.
labelName Digunakan untuk menampilkan gambar dari posting dengan label tertentu. Ganti nilainya menjadi nama label, misalnya: labelName: "Liburan" untuk menampilkan gambar dari posting dengan label Liburan.
monthArray Daftar nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage URL gambar cadangan untuk posting yang tidak mempunyai gambar di dalamnya.
newTabLink Jika bernilai true, tautan pada widget akan membuka pada tab/jendela gres ketika diklik.
containerId ID kontainer penampung widget.
Pengaturan ImageFlow 1.3.0
Opsi Keterangan
loadingText Digunakan untuk memilih teks ketika sedang memuat gambar.
imageWidth Digunakan untuk memilih resolusi gambar dalam lebar (Saya menciptakan konfigurasi ini untuk meningkatkan performa saja dan tidak akan mempengaruhi lebar gambar secara pribadi ketika tampil alasannya ialah walau bagaimanapun lebar gambar akan tetap menyusut sesuai dengan posisinya; berlaku kalau konfigurasi imageScaling bernilai true).
animationSpeed Digunakan untuk memilih kecepatan animasi slide.
aspectRatio Rasio kontainer ImageFlow (lebar dibagi dengan tinggi).
buttons Jika bernilai false, tombol navigasi kiri dan kanan tidak akan tampil.
captions Jika bernilai false, judul (dan juga tautan) setiap gambar tidak akan tampil.
circular Jika bernilai false slideshow akan mempunyai titik awal dan titik akhir. Jika bernilai true slideshow akan membentuk bulat slide dan tidak akan pernah mempunyai batas simpulan (saat slide telah habis, slide pertama akan muncul sehabis slide terakhir).
imageCursor Digunakan untuk memilih tipe kursor gambar.
opacity Jika bernilai true setiap gambar di samping gambar yang sedang aktif akan memudar. Semakin jauh jaraknya, akan semakin transparan tampilannya sesuai dengan pengaturan baris transparasi pada konfigurasi opacityArray.
opacityArray Digunakan untuk memilih tingkat transparasi sesuai dengan jarak gambar dari gambar yang paling akrab dengan pandangan mata (maksudnya, gambar yang di tengah) menuju gambar terakhir/terjauh dari pandangan mata.
imagesHeight Digunakan untuk memilih tinggi kontainer gambar dalam persen (tidak begitu terang sebenarnya, tapi akan Saya perbaiki keterangan konfigurasi ini kalau sudah jelas).
imagesScaling Jika bernilai false setiap gambar tidak akan mengecil meskipun jarak gambar sudah semakin jauh.
percentLandscape Keterangan aslinya ibarat ini: Scale landscape format. Tapi sehabis Saya coba mengubahnya, konfigurasi ini justru lebih ibarat sebagai pengubah skala gambar sehingga gambar dapat menjadi jauh lebih besar dalam area yang tidak begitu luas (Anda harus tahu bahwa ukuran slideshow ini dapat beradaptasi dengan lebar area yang ada).
percentOther Belum begitu meyakinkan. Keterangan asli: Scale portrait and square format.
slider Jika bernilai false, navigasi penggeser di bab bawah gugusan gambar akan menghilang.
sliderCursor Digunakan untuk memilih tipe kursor navigasi penggeser.
sliderWidth Digunakan untuk memilih lebar navigasi penggeser (tidak penting, kecuali kalau Anda ingin mengubah latar gambar navigasi ini).
scrollbarP Digunakan untuk memilih lebar scrollbar navigasi penggeser dalam persen.
onClick Digunakan untuk menyisipkan fungsi pelengkap yang akan bekerja kalau gambar diklik.
startID Digunakan untuk memilih urutan gambar yang akan tampil terlebih dahulu.
slideshow Jika bernilai false, simbol play/pause di sebelah kiri atas akan menghilang.
Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam Slideshow Otomatis Blogger dengan ImageFlow 1.3.0
Navigasi standar ImageFlow.
slideshowSpeed Digunakan untuk memilih kecepatan interval slideshow kalau konfigurasi slideshow bernilai true.
slideshowAutoplay Jika bernilai true, animasi slideshow akan pribadi bekerja sesaat sehabis slideshow termuat tanpa harus menekan tombol play.
startAnimation Kurang begitu meyakinkan. Keterangan aslinya: Animate images moving in from the right on startup.
xStep Digunakan untuk memilih radius bulat slideshow. Semakin besar nilainya, maka jarak antara gambar yang satu dengan yang lainnya akan semakin jauh.

Contoh Penerapan: circular: false, opacity: true

imageflow: {     ...     ...     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

Sumber https://www.dte.web.id/

Slideshow Otomatis Blogger Dengan Imageflow 1.3.0

Pembaharuan: 10 Desember 2013

Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam Slideshow Otomatis Blogger dengan ImageFlow 1.3.0

Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam ImageFlow, alasannya ialah ketika gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasinya memakai jQuery, yaitu dengan cara menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya dapat mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() ibarat ini:

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

Tapi Saya pikir, memakai jQuery pada ImageFlow merupakan sebuah pemborosan besar. Tidak efisien. Bahkan ImageFlow dapat bekerja tanpa jQuery! Kaprikornus Saya tetapkan untuk memakai ilmu sihir terakhir: Menyisipkan elemen <a> ke dalam atribut alt gambar (karena caption setiap slide diproduksi dari atribut alt pada gambar) ibarat ini:

skeleton += '<img src="' + image + '" alt="Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam  Slideshow Otomatis Blogger dengan ImageFlow 1.3.0">';

Dan berhasil!

Lihat Demo

Tahap 1: Mengedit Tema

Untuk membuatnya, pertama-tama masuklah ke sajian Tema lalu klik Edit HTML dan klik Lanjutkan:

Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam Slideshow Otomatis Blogger dengan ImageFlow 1.3.0
Mengedit HTML.

Temukan aba-aba ini:

]]></b:skin>

Salin aba-aba di bawah ini, lalu letakkan di atasnya:

@charset "utf-8";  /*! ImageFlow 1.3.0 for Blogger by Taufik Nurrohman => http://gplus.to/tovic */  @media screen, projection {   .imageflow {     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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACUSURBVHjaYvz//z8DEmAD4iggDgRiaajYUyBeD8TLgPgXXCVIIxSbAfG9/7jBPagasHqYJmMg/vafMPgGVQvWyAbEt/8TD0Bq2UAa0/6TDtKYgN70ZiAdeIM0qpOhUZ2JgUwA0niTDH03QRq3kqFxK0XRAUs1xCYAM+SUQ3KSY8SSyGOhiVwCKvYCmsgXIydygAADADh+f/4z7YkeAAAAAElFTkSuQmCC') 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('data:image/png;base64,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') no-repeat 50% 50%}   .imageflow .slideshow.play {background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHpJREFUeNpi/P//PwOlgImBCoBmhrBRw5AnQNwCxBJEmwIKWDQMA3+AeAUQ22BRg4LxGYIMzgNxMhBzUmIIDLwF4l4gVqHEEGSQT64hH4B4ArkuuQTEmUDMQ2qYUBQ7r4C4BYglCGmGYUYsGRCUYn+RkmIZh1cuBggwAJJY01fg92o9AAAAAElFTkSuQmCC') 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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH1JREFUeNpi/P//PwOlgImBCmDADGGjxBAJIG4B4icYMqCAJYBtgHgFEP/5jwAoanBp5ATiZCA+/x87wGuIChB3AfHb//gBTkPy/xMPCLpkAhB/oMQQGOYB4kwgvkSJIVSJHWxYAohbgPgVuhwjGRkQlGJ/IQswDq9cDBBgAB+v01QBu/akAAAAAElFTkSuQmCC') no-repeat 0 0;     float:left;     margin:-7px 0 0 -30px;   }   .imageflow .next {     background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHpJREFUeNpi/P//PwOlgImBCoBmhrBRw5AnQNwCxBJEmwIKWDQMA3+AeAUQ22BRg4LxGYIMzgNxMhBzUmIIDLwF4l4gVqHEEGSQT64hH4B4ArkuuQTEmUDMQ2qYUBQ7r4C4BYglCGmGYUYsGRCUYn+RkmIZh1cuBggwAJJY01fg92o9AAAAAElFTkSuQmCC') no-repeat 0 0;     float:right;     margin:-7px -30px 0 30px;   }   .imageflow-date:before,   .imageflow-comment:before {content:" - "}   .imageflow-comment {display:none} }

Klik Simpan Tema.

Tahap 2: Meletakkan Slideshow

Masuklah ke sajian Tata Letak lalu tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bab atas posting:

Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam Slideshow Otomatis Blogger dengan ImageFlow 1.3.0
Menambahkan widget.

Salin aba-aba di bawah ini lalu letakkan di dalam formulirnya:

<div class="imageflow-container" id="imageflow-container"></div> <script> var imageflow_config = {     url: 'http://dte-feed.blogspot.com',     numPost: 7,     labelName: null,     monthArray: [         "Januari",         "Februari",         "Maret",         "April",         "Mei",         "Juni",         "Juli",         "Agustus",         "September",         "Oktober",         "November",         "Desember"     ],     noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',     newTabLink: false,     containerId: 'imageflow-container',     imageflow: {         loadingText: "Memuat gambar", /* Loading text */         imageWidth: 400, /* Image width */         animationSpeed: 50, /* Animation speed in ms */         aspectRatio: 1.964, /* Aspect ratio of the ImageFlow container (width divided by height) */         buttons: true, /* Toggle navigation buttons */         captions: true, /* Toggle captions */         circular: true, /* Toggle circular rotation */         imageCursor: 'default', /* Cursor type for all images - default is 'default' */         imageFocusM: 1.0, /* Multiplicator for the focussed image size in percent */         imageFocusMax: 4, /* Max number of images on each side of the focussed one */         imageScaling: true, /* Toggle image scaling */         imagesHeight: 0.67, /* Height of the images div container in percent */         imagesM: 1.0, /* Multiplicator for all images in percent */         onClick: function() {}, /* Onclick behaviour */         opacity: false, /* Toggle image opacity */         opacityArray: [10, 8, 6, 4, 2], /* Image opacity (range: 0 to 10) first value is for the focussed image */         percentLandscape: 118, /* Scale landscape format */         percentOther: 100, /* Scale portrait and square format */         scrollbarP: 0.6, /* Width of the scrollbar in percent */         slider: true, /* Toggle slider */         sliderCursor: 'e-resize', /* Slider cursor type - default is 'default' */         sliderWidth: 14, /* Width of the slider in px */         slideshow: true, /* Toggle slideshow */         slideshowSpeed: 1500, /* Time between slides in ms */         slideshowAutoplay: false, /* Toggle automatic slideshow play on startup */         startID: 1, /* Image ID to begin with */         glideToStartID: true, /* Toggle glide animation to start ID */         startAnimation: false, /* Animate images moving in from the right on startup */         xStep: 150 /* Step width on the x-axis in px */     } }; </script> <script src="//dte-project.googlecode.com/svn/trunk/blogger-imageflow.js"></script>

Konfigurasi Widget

Pengaturan Widget secara Umum
Opsi Keterangan
url Ganti nilainya dengan URL blog Anda.
numPost Digunakan untuk memilih berapa banyak gambar yang ingin ditampilkan.
labelName Digunakan untuk menampilkan gambar dari posting dengan label tertentu. Ganti nilainya menjadi nama label, misalnya: labelName: "Liburan" untuk menampilkan gambar dari posting dengan label Liburan.
monthArray Daftar nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage URL gambar cadangan untuk posting yang tidak mempunyai gambar di dalamnya.
newTabLink Jika bernilai true, tautan pada widget akan membuka pada tab/jendela gres ketika diklik.
containerId ID kontainer penampung widget.
Pengaturan ImageFlow 1.3.0
Opsi Keterangan
loadingText Digunakan untuk memilih teks ketika sedang memuat gambar.
imageWidth Digunakan untuk memilih resolusi gambar dalam lebar (Saya menciptakan konfigurasi ini untuk meningkatkan performa saja dan tidak akan mempengaruhi lebar gambar secara pribadi ketika tampil alasannya ialah walau bagaimanapun lebar gambar akan tetap menyusut sesuai dengan posisinya; berlaku kalau konfigurasi imageScaling bernilai true).
animationSpeed Digunakan untuk memilih kecepatan animasi slide.
aspectRatio Rasio kontainer ImageFlow (lebar dibagi dengan tinggi).
buttons Jika bernilai false, tombol navigasi kiri dan kanan tidak akan tampil.
captions Jika bernilai false, judul (dan juga tautan) setiap gambar tidak akan tampil.
circular Jika bernilai false slideshow akan mempunyai titik awal dan titik akhir. Jika bernilai true slideshow akan membentuk bulat slide dan tidak akan pernah mempunyai batas simpulan (saat slide telah habis, slide pertama akan muncul sehabis slide terakhir).
imageCursor Digunakan untuk memilih tipe kursor gambar.
opacity Jika bernilai true setiap gambar di samping gambar yang sedang aktif akan memudar. Semakin jauh jaraknya, akan semakin transparan tampilannya sesuai dengan pengaturan baris transparasi pada konfigurasi opacityArray.
opacityArray Digunakan untuk memilih tingkat transparasi sesuai dengan jarak gambar dari gambar yang paling akrab dengan pandangan mata (maksudnya, gambar yang di tengah) menuju gambar terakhir/terjauh dari pandangan mata.
imagesHeight Digunakan untuk memilih tinggi kontainer gambar dalam persen (tidak begitu terang sebenarnya, tapi akan Saya perbaiki keterangan konfigurasi ini kalau sudah jelas).
imagesScaling Jika bernilai false setiap gambar tidak akan mengecil meskipun jarak gambar sudah semakin jauh.
percentLandscape Keterangan aslinya ibarat ini: Scale landscape format. Tapi sehabis Saya coba mengubahnya, konfigurasi ini justru lebih ibarat sebagai pengubah skala gambar sehingga gambar dapat menjadi jauh lebih besar dalam area yang tidak begitu luas (Anda harus tahu bahwa ukuran slideshow ini dapat beradaptasi dengan lebar area yang ada).
percentOther Belum begitu meyakinkan. Keterangan asli: Scale portrait and square format.
slider Jika bernilai false, navigasi penggeser di bab bawah gugusan gambar akan menghilang.
sliderCursor Digunakan untuk memilih tipe kursor navigasi penggeser.
sliderWidth Digunakan untuk memilih lebar navigasi penggeser (tidak penting, kecuali kalau Anda ingin mengubah latar gambar navigasi ini).
scrollbarP Digunakan untuk memilih lebar scrollbar navigasi penggeser dalam persen.
onClick Digunakan untuk menyisipkan fungsi pelengkap yang akan bekerja kalau gambar diklik.
startID Digunakan untuk memilih urutan gambar yang akan tampil terlebih dahulu.
slideshow Jika bernilai false, simbol play/pause di sebelah kiri atas akan menghilang.
Hal yang paling sulit ialah perihal bagaimana caranya menyisipkan URL posting ke dalam Slideshow Otomatis Blogger dengan ImageFlow 1.3.0
Navigasi standar ImageFlow.
slideshowSpeed Digunakan untuk memilih kecepatan interval slideshow kalau konfigurasi slideshow bernilai true.
slideshowAutoplay Jika bernilai true, animasi slideshow akan pribadi bekerja sesaat sehabis slideshow termuat tanpa harus menekan tombol play.
startAnimation Kurang begitu meyakinkan. Keterangan aslinya: Animate images moving in from the right on startup.
xStep Digunakan untuk memilih radius bulat slideshow. Semakin besar nilainya, maka jarak antara gambar yang satu dengan yang lainnya akan semakin jauh.

Contoh Penerapan: circular: false, opacity: true

imageflow: {     ...     ...     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

Sumber https://www.dte.web.id/
Blogger Gambar Javascript Lanjutan Widget
Langganan: Posting Komentar (Atom)