Postingan

Widget Recent Post dengan Preloader

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

Animasi Blog Roll

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

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

Style Switcher Blog dengan Cookies

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

Blogger JSON - Top Commentators

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

Membuat Facebox/Like Box Preloader

Gambar
Di sini Saya menggunakan metode Iframe Preloader yang pernah Saya tuliskan untuk menahan proses muat widget Facebox pada blog. Dengan cara ini maka proses muat halaman akan menjadi lebih cepat karena kita telah menahan Facebox untuk memuat sebelum keseluruhan halaman berhasil termuat: Lihat Demo Sebelum melanjutkan ke langkah pembuatannya (atau lebih tepatnya: langkah modifikasi), Anda harus sudah memiliki widget Facebox pada blog Anda. Jika belum, buat widget Facebox Anda terlebih dahulu » Telusuri tentang cara membuat widget Facebox di blog Preloader ini hanya berlaku untuk Facebox yang dibangun menggunakan Iframe, jadi saat Anda memilih kode widget, ambillah yang berada pada tab Iframe : Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode CSS di bawah ini lalu letakkan di atasnya: /* Iframe Preloader */ .framePreloader iframe { background-color:white; border:non...

Recent Post dan Recent Comment pada Drop Down Menu??

Gambar
Widget Blogger pada Menu Navigasi Seringkali Saya melihat beberapa orang mencoba menuliskan semua kategori posting pada drop down menu. Mereka melakukannya secara manual. Saya pikir, seandainya Saya bisa menggunakan JSON untuk ini, maka mereka tidak perlu lagi repot-repot memperbaharui menu setiap kali label baru ditambahkan. Tapi setelah Saya coba ternyata hasilnya proses muat halaman menjadi sangat lambat. Jadi Saya mencoba menggunakan alternatif menarik lainnya, yaitu widget recent post dan recent comment yang Saya letakkan pada menu-menu sekunder. Kita tahu bahwa kebanyakan widget semacam ini dibangun oleh elemen-elemen daftar, oleh karena itulah kita bisa menaruhnya dengan sangat pas ke dalam menu (yang juga dibangun oleh elemen-elemen daftar). Masih sama. Halaman menjadi sedikit lebih lambat. Ya, itu terjadi karena widget-widget ini harus memanggil feed posting untuk menampilkan isi widget tersebut. Terlebih lagi, menu navigasi secara umum diletakan di bagian atas, sehingga ...