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

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

The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Datepicker widget is a part of jQuery UI; it allows you to select a date from a popup/inline calendar. The following examples demonstrate some advance uses of the datepicker widget. Parse and Format Dates Set Date on Page Load Disable Specific Dates Style (or Highlight) Specific Dates Internationalization and Localization Update Datepicker Using AJAX Using Datepicker to Select Date Range Parse and Format Dates Datepicker provides two utility functions for converting a date string into JavaScript Date and vice-versa: $.datepicker.parseDate( format, value[, settings] ) $.datepicker.formatDate( format, date[, settings] ) The following example uses the onSelect event to parse and format the selected date in specific formats. The selected date is converted to a date object for calculation; then converted back to another date format: View source Ope...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum . Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica , quam nunc putamus parum claram, ant...

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