Web Development Blog Shannenpio

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

Judulnya sangat panjang karena Saya sendiri tidak tahu harus memberi nama apa kepada widget ini. Pada intinya widget ini adalah widget recent post biasa, namun memiliki kemampuan untuk menggandakan diri agar bisa menampilkan daftar posting terbaru lebih dari satu buah berdasarkan label yang spesifik: Lihat Demo Pada awalnya Saya membuat widget ini agar bisa menampilkan posting-posting terbaru dari blog tunggal saja, namun mengingat ada juga beberapa blog yang suka menampilkan daftar posting dari blog lain, jadi sekarang widget ini tidak hanya berfungsi untuk menampilkan daftar posting dari satu feed blog, melainkan juga bisa menampilkan daftar posting dari feed blog Blogger yang lain. Pemasangan Widget Masuk ke halaman Tata Letak kemudian tambahkan sebuah widget HTML/JavaScript . Salin kode ini dan letakkan di dalam formulirnya: <link rel="stylesheet" type="text/css" scoped="scoped" href="https://cdn.statically.io/gh/gudangranda/shannenpio-jso...

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

Pada konfigurasi widget Posting Populer , pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template . Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style> : /* Custom CSS for Blogger Popular Post Widget */ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { margin:0 0; padding:0 0; list-style:none; border:none; background:none; outline:none; } .PopularPosts ul { margin:.5em 0; list-style:none; font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif; color:black; counter-reset:num; } .PopularPosts ul li img { display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left; } .PopularPosts ul li { background-color:#eee; margin:0 10% .4em 0; padding:.5em 1.5em .5em .5em; counter-increment:num; position:relative; } .PopularPosts ul li:before, .PopularPosts ul li .item-title a { font-weight...

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

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

Pembaharuan 22 April 2013: Mengintegrasikan widget dengan cookies , menambahkan opsi summary dan menyingkirkan opsi tt_id . Widget ini bukan widget recent comment biasa yang biasanya Anda temukan di blog-blog lain, karena widget ini memiliki kemampuan untuk memberitahu kepada administrator bahwa terdapat komentar baru yang telah masuk. Demonya bisa Anda lihat di sini, namun efeknya hanya akan terlihat apabila terdapat (paling tidak) satu komentar baru yang masuk di blog ini: Lihat Demo Unduh JavaScript Untuk memasang widget ini, pertama-tama tambahkan sebuah elemen halaman HTML/JavaScript . Salin kode ini kemudian letakkan di dalam formulirnya: <style type="text/css" scoped="scoped"> .cm-outer { margin:0 auto; padding:0 0; font:normal normal 11px Arial,Sans-Serif; border:1px solid; border-top:none; } .cm-outer li { margin:0 0; padding:7px 10px 12px; list-style:none; clear:both; border-top:1px solid; } .cm-outer .cm-header {margin:0 0 5p...

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

Pembaharuan 29 Maret 2013: Menambahkan opsi thumbSize , noThumb , sortAlphabetically , showNew dan newText Berikut ini adalah sebuah widget daftar isi blog berbentuk tabulasi. Terdiri dari dua sisi berupa daftar kategori dan daftar posting. Setiap nama kategori akan menjadi tab, sedangkan daftar posting akan menjadi konten tab yang akan muncul setiap kali tab diklik: Lihat Demo Unduh CSS Unduh JavaScript Integrasi Widget ke Blogger Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong : Menambahkan halaman statis baru Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML : Pilih mode HTML Salin kode di bawah ini kemudian letakkan di dalam formulirnya: <link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" /> <div id="tabbed-toc"><span class="loading">Memuat......

Membangun Aplikasi Quick Search dengan JSON Blogger Selain melalui halaman pencarian biasa, Blogger juga mengizinkan kita untuk mengakses posting-posting acak di dalam feed yang dapat disortir berdasarkan kata kunci. Ini bisa dilakukan melalui parameter q . Format dasar URL feed untuk memanggil data posting dengan sortir berdasarkan kata kunci adalah seperti ini: http://nama_blog.blogspot.com/feeds/posts/summary?q= Kata Kunci Yang jika diakses akan menghasilkan halaman berisi daftar posting tersortir berdasarkan kata kunci dari parameter q seperti ini ⇒ Daftar posting dengan kata kunci 'september' Dengan memanfaatkan kerangka dasar widget Blogger , event onsubmit pada formulir dan juga penargetan elemen kontainer yang tepat, maka parameter ini memungkinkan kita untuk menciptakan aplikasi quick search . Yaitu sebuah aplikasi yang bisa digunakan untuk mencari artikel/posting dalam sebuah blog tanpa harus berpindah dari halaman asal. Seluruh hasil penelusuran akan tampil pada t...

Widget ini dibuat sebagai pengganti aplikasi Google Translate yang berat. Murni, dibuat dari kode HTML dan JavaScript, sehingga Anda bisa terbebas dari permintaan HTTP yang biasanya datang dari JavaScript bawaan widget Google Translate. Di sini JavaScript berfungsi untuk melakukan pemformatan URL translasi berdasarkan pola query string dari Google Translate yang berbentuk seperti ini agar kita bisa menuju ke halaman Google Translate tanpa harus terlibat dengannya pada saat awal kunjungan: https://translate.google.com/translate?u=https://www.nama-situs.com&langpair= from | to &hl=en from ⇒ Bahasa Asal to ⇒ Bahasa Tujuan Kode Widget <style type="text/css"> #translator-wrapper { display:block; width:200px; border:1px solid #0A340A; background-color:white; overflow:hidden; position:relative; } #translator-wrapper select { border:none; background:transparent; font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif; width:100%; color:black; -...