Web Development Blog Shannenpio

Plugin ini pada dasarnya merupakan perpaduan antara Basic JQuery Image Rotator dengan JSON Blogger yang kemudian Saya jadikan sebagai semacam slideshow dengan konten yang akan diperbaharui secara otomatis berdasarkan posting yang sudah terbit. Saya memutuskan untuk membuat ini karena ada beberapa orang yang menanyakan melalui email mengenai bagaimana cara memadukan plugin Image Rotator dengan JSON Blogger . Plugin JQuery Image Rotator ini juga sudah dimodifikasi hampir secara keseluruhan, khusus untuk diaplikasikan pada widget ini. Beberapa hal yang Saya tambahkan diantaranya adalah navigasi, efek animasi kontainer dan dukungan fungsi callback yang dapat dijalankan pada sesi-sesi tertentu. Lihat Demo Implementasi Dasar Berikut ini adalah contoh implementasi paling mendasar yang bisa Anda lakukan untuk mengaktifkan plugin: <link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin...

Menjawab permintaan dari It's a Hardlife , Saya mencoba untuk memodifikasi JQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tipografi slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten: Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /** * Custom TinyCarousel by Taufik Nurrohman * Visit:http://hompimpaalaihumgambreng.blogspot.com */ #tinycarousel { width:532px; /* Lebar Slideshow */ height:1%; overflow:hidden; font:normal 10px/12px Arial,Sans-Serif; color:#666; margin:30px auto; } #tinycarousel .viewport { height:336px; overflow:hidden; position:relativ...

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;...

A letter from Arhan Tubar: Hello I like very much the automatic slideshow tutorial and I was wondering if you can help me with something. I would like to make the slideshow from this link: http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/ ...to be automatic like in your tutorials. Can you help me with this request? Thank you in advance. My answer is, “Yes, why not. This is just about inserting images into 3D Gallery markup. A special post for you. Sorry about my bad English” :p View Demo Step 1: Edit Your Template First go to the Template menu and then click Edit HTML and click Continue / Proceed : Edit HTML Find this code: ]]></b:skin> Copy the code below and paste it above ]]></b:skin> : /* * Auto Content 4 3D Gallery by Taufik Nurrohman * Visit: http://hompimpaalaihumgambreng.blogspot.com */ .dg-container { width:100%; height:450px; position:relative; margin:0 auto; } .dg-wrapper { width:370px; height:300px; margi...

Saya sempat kesulitan saat mencoba mengintegrasikan template JSON Blogger dengan JQuery AnythingSlider . Pada dasarnya masalahnya bukan mengarah kepada kesulitan di dalam membangun slideshow , tetapi lebih kepada masalah opsi-opsi dalam plugin ini. Beberapa opsi Saya rasa tidak begitu penting jika kita berhubungan dengan Blogger yang sederhana namun sangat cepat. Jadi, Saya telah meringkas beberapa opsinya untuk mempermudah konfigurasi: Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /* ============================================================================ AnythingSlider v1.7+ Default (base) theme By Chris Coyier: http://css-tricks.com with major improvements by Doug Neiner: http://pixelgraphics.us/ based on work by Remy Sharp: http://jqueryfordesigners.com/ W...

Saya menggunakan versi terakhir dari SLIDES yaitu pada 5 September 2011. Meskipun sebenarnya bagi Saya masih ada satu bug kecil saat Saya mencoba untuk berpindah tab halaman kemudian kembali lagi, saat itu durasi animasi menjadi sedikit berantakan sampai beberapa saat kemudian kembali normal. Nivo telah berhasil mengatasi ini dengan rilis kecilnya untuk mengatasi masalah yang hampir sama. Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /* * Slides, A Slideshow Plugin for jQuery * Intructions: http://slidesjs.com * By: Nathan Searles, http://nathansearles.com * Version: 1.1.9 * Updated: September 5th, 2011 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of ...