Postingan

Menampilkan postingan dengan label Tingkat Lanjut

Performa Widget Random Post

Gambar
Saya harus mengatakan bahwa widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak: <script src='/feeds/posts/default?alt=json-in-script&max-results= 99999 &callback=randomPosts'></script> Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post —termasuk juga widget artikel terkait — tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil ( dius...
Posting Komentar
Baca selengkapnya

Plugin Feed Rotator untuk Blogger

Gambar
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...
Posting Komentar
Baca selengkapnya

Kotak Penelusuran Blogger dengan Ajax JQuery

Gambar
Kotak Penelusuran Blogger dengan Ajax JQuery Beberapa waktu yang lalu Saya pernah menuliskan cara menampilkan hasil penelusuran dengan JSON Blogger tanpa harus berpindah dari halaman awal menuju halaman hasil penelusuran dengan JavaScript (Anda bisa membacanya di sini ). Melalui JQuery $.ajax() kita bisa meniadakan penyisipan script callback dan langsung memanggil JSON dengan cara seperti ini: $('#search-form').on("submit", function() { $.ajax({ url: '../feeds/posts/summary?alt=json-in-script&q= KATA_KUNCI ', type: 'get', dataType: 'jsonp', success: function(json) { ... } }); }); Sehingga jika dijabarkan akan menjadi seperti ini: HTML Formulir <form action="/search" id="ajax-search-form"> <input type="text" name="q"> <input type="submit" value="Search"> </form> JQuery (function($) { v...
Posting Komentar
Baca selengkapnya

Memperbaharui Pemuatan JSON berdasarkan Event Scroll

Gambar
Sebuah kumpulan data dalam daftar akan menampilkan indikator sedang memuat dan akan memulai pemuatan data baru saat jarak gulungan telah mencapai titik maksimal Metode ini masih sama dengan metode-metode penundaan pemuatan JSON yang biasa Saya lakukan untuk widget-widget Saya yaitu dengan cara menyisipkan script callback secara tidak langsung ke dalam area <head> dengan ID tertentu. Kemudian, jika Saya ingin memperbaharui muatan JSON yang sudah ada, Saya tinggal menyingkirkan script callback yang lama kemudian menggantinya dengan duplikat baru dengan parameter yang sudah diperbaharui. Bayangkan saja bahwa sudah terdapat sebuah script callback dengan ID foo di dalam area <head> seperti ini: ... ... <script id="foo" src="../feeds/posts/summary?alt=json-in-script&callback=functionName" type="text/javascript"></script> </head> Kemudian Saya akan menyingkirkannya dengan cara menangkap ID elemen tersebut sebagai awalan un...
Posting Komentar
Baca selengkapnya

XHTML Blogger, Item Kontrol

Tombol Edit Cepat Posting Biasanya berbentuk gambar/ikon pensil dan terletak di dalam footer posting: <b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='&quot;item-control &quot; + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' height='18' src=' http://img2.blogblog.com/img/icon18_edit_allbkg.gif ' width='18'/> </a> </span> </b:if> </b:includable> Data Keterangan Tampilan/Contoh Tampilan data:post.editUrl Elemen ini akan menghasilkan URL pengeditan posting http://www.blogger.com/post-edit.g?blogID=489094982896596XXXX&postID=622513084927827XXXX&from=pencil data:top.editPostMsg Elemen ini akan menghasilkan deskripsi/pesan tautan pengeditan posting Edit Entri data:post.adminClass Ele...
Posting Komentar
Baca selengkapnya

Rilis: Galleria V2 - Widget Masonry untuk Blogger

Gambar
Pembaharuan 26 Mei 2013: Terjadi perubahan besar pada penulisan variabel-variabel di dalam widget ini. Saya terpaksa melakukannya demi pengembangan dan perbaikan widget yang lebih leluasa ke depannya agar tidak mengganggu para pemakai widget ini. Bagi Anda yang sudah memakai widget ini sebelum tanggal 26 Mei 2013 , Anda akan mendapatkan teks peringatan bahwa widget Anda harus segera diperbaharui. Perubahan fitur: (1) Opsi showThumbnails ditiadakan (2) Menambahkan fitur Infinite Scroll (3) Mengganti parameter indeks feed dari window.location.search menjadi window.location.hash dengan bantuan event hashchange , sehingga pengguna tidak perlu memuat ulang halaman secara keseluruhan hanya untuk mengubah window.location.search pada address bar . Sebelum ini Saya telah membuat widget Galleria versi pertama , kali ini Saya membuat versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap. Masalah besar yang terjadi pada versi pertama adalah dia menampilkan ...
Posting Komentar
Baca selengkapnya

Widget Daftar Isi Blogger dengan Navigasi Halaman

Gambar
Pembaharuan: 28 Februari 2013 Navigasi halaman pada widget daftar isi??? Blogger??? Pada akhirnya Saya menemukannya, seorang penggagas JSON Blogger dengan sistem navigasi halaman. Beliau berasal dari Spanyol ( Vagabundia ). Pada dasarnya cara kerja navigasi widget ini di dalam mengontrol JSON hanyalah dengan cara mengubah nilai parameter start-index secara tidak langsung: http://nama_blog.blogspot.com/feeds/posts/default? start-index=1 &amp;max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=yourfunction Kode di atas akan menampilkan posting terbaru dengan keadaan normal yaitu mulai dari posting pertama ( start-index=1 ) dan berhenti pada posting ke sepuluh ( max-results=10 ). Namun, dengan cara mengubah nilai start-index , Anda bisa memanggil posting dari urutan berapapun meski bukan dari urutan pertama. Misalnya: http://nama_blog.blogspot.com/feeds/posts/default? start-index=17 &amp;max-results=10&amp;orderby=published&amp;alt=json-i...
Posting Komentar
Baca selengkapnya

Slideshow Otomatis Blogger dengan Imageflow 1.3.0

Gambar
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;...
Posting Komentar
Baca selengkapnya