Web Development Blog Shannenpio

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

Widget Recent Post dengan Preloader Memperkenalkan widget recent post dengan konsep preloader untuk menangani proses pemuatan halaman yang terlalu berat. Secara teknis, widget ini hanya akan memulai pemuatan konten setelah mencapai waktu yang telah ditentukan: Lihat Demo Unduh JavaScript Tambahkan sebuah elemen halaman HTML/JavaScript , kemudian salin kode ini dan letakkan di dalam formulirnya: <style type="text/css"> #dte_recent-post { margin:0 0; padding:0 0; font:normal 11px Arial,Sans-Serif; color:#333; margin:0 auto; min-height:100px; background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%; } #dte_recent-post li { list-style:none; margin:0 0; padding:7px 7px; background-color:white; border-bottom:1px solid #ddd; } #dte_recent-post li a img { float:left; margin:0 10px 0 0; padding:0 0; border:none; background:transparent; outline:none; } #dte_recent-post li a.titl...

var $ul = $('#blog-roll'), roll = function() { $ul.find('li').first().slideUp('slow', function() { $(this).appendTo($(this).parent()).fadeIn(); }); }, anim = setInterval(roll, 3000); // Pause on hover... $ul.hover(function() { clearInterval(anim); }, function() { setInterval(roll, 3000); }); Demo

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

Style Switcher Blog Style Switcher adalah aplikasi/aksesoris kecil yang biasa ada dalam sebuah situs untuk mengizinkan pengunjung mengganti tampilan dari luar sesuka hati. Dengan ini diharapkan pengunjung tidak akan bosan dengan artikel yang dia baca karena dia bisa memutuskan desain situs yang sedang dia kunjungi melalui Style Switcher. Versi asli yang lebih besar sebenarnya cenderung mengambil konsep penggantian file CSS secara keseluruhan: Style Switcher pada Yahoo! Mail Di sini Saya hanya akan mengambil beberapa perubahan kecil saja seperti warna latar, warna huruf, jenis huruf dan ukuran huruf. Versi ini agak berbeda dengan yang biasa Anda temui, karena versi ini sudah Saya lengkapi dengan JavaScript Cookies . Kelebihannya adalah, saat pengunjung blog Anda mengubah tampilan template Anda dari luar, meskipun dia sudah berpindah-pindah halaman, perubahan yang dia lakukan akan tetap bertahan: Lihat Sampel Untuk membuatnya, pertama-tama masuklah ke halaman editor HTML template And...

<!DOCTYPE html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <title>Top Commentators</title> <style type="text/css"> .top-commenter-line { margin:3px 0px; } .top-commenter-avatar { display:inline-block; vertical-align:middle; } </style> </head> <body> <script type="text/javascript"> // Top Commentators gadget with avatars, by MS-potilas 2012. // Gets a list of top commentators from all comments, or specified number of days in the past. // See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html // CONFIG: var homepage = 'http://latitudu.blogspot.com', // Homepage maxTopCommenters = 17, // How much? minComments = 1, // How many comments must top commentator have at least numDays = 0, // From how many days (ex. 30), or 0 from "all the time" excludeMe ...