Memperkenalkan widget recent post dengan konsep preloader untuk menangani proses pemuatan halaman yang terlalu berat. Secara teknis, widget ini hanya akan memulai pemuatan konten sehabis mencapai waktu yang telah ditentukan:
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin instruksi ini dan letakkan di dalam formulirnya:
<style scoped="scoped"> #dte_recent-post { font:normal normal 11px/normal Helmet,Freesans,Sans-Serif; color:#333; margin:0 auto; padding:0; min-height:100px; background:white url('data:image/gif;base64,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') no-repeat 50% 50%; } #dte_recent-post li { list-style:none; margin:0; padding:7px; background-color:white; border-bottom:1px solid #ddd; } #dte_recent-post li a img { float:left; margin:0 10px 0 0; padding:0; border:none; background:none; outline:none; } #dte_recent-post li a.title { display:block; font-size:12px; text-decoration:none; color:#1155CC; } #dte_recent-post li a.title:hover { text-decoration:underline; } #dte_recent-post li span.foot { clear:both; display:block; color:#ccc; margin-top:7px; font-size:10px; } </style> <ul id="dte_recent-post"></ul> <script> //<![CDATA[ var rp_homePage = "http://nama_blog.blogspot.com", // Your blog homepage rp_numPosts = 5, // How many posts? rp_thumbWidth = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail rp_numChars = 100, // Number of posts summary rp_sortByLabel = false, // Replace `false` with your specific label name to display posts by specific label // Example: rp_sortByLabel = "jQuery", to sort posts by label "jQuery" rp_noImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A 'no-image' image rp_monthNames = [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab rp_loadTimer = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...) //]]> </script> <script src="//dte-project.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>Konfigurasi Widget
| Opsi | Keterangan |
|---|---|
| rp_homePage | Ganti dengan URL blog Anda. |
| rp_numPosts | Digunakan untuk memilih jumlah posting yang akan ditampilkan. |
| rp_thumbWidth | Digunakan untuk memilih lebar thumbnail. Ubah lebarnya menjadi 0 untuk menghilangkan thumbnail. |
| rp_numChars | Digunakan untuk memilih jumlah huruf ringkasan posting. |
| rp_sortByLabel | Ganti nilai false menjadi nama label untuk menampilkan posting menurut label yang spesifik. Contoh: rp_sortByLabel = "jQuery" akan menampilkan semua posting dengan label jQuery. |
| rp_noImage | Thumbnail cadangan jikalau posting yang tampil dalam widget tidak mempunyai gambar. |
| rp_monthNames | Tentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda. |
| rp_newTabLink | Jika bernilai true, maka semua tautan dalam widget akan terbuka di tab/jendela gres dikala diklik. |
| rp_loadTimer | Digunakan untuk memilih seberapa usang widget akan menunda proses pemuatan sebelum jadinya mulai memuat. Secara normal bernilai "onload". Artinya bahwa widget akan memuat sehabis semua elemen halaman telah berhasil termuat. Anda juga dapat mengganti nilainya dengan satuan waktu milidetik untuk menunda waktu pemuatan selama beberapa detik ke depan. Contoh: rp_loadTimer = 3000 akan menunda pemuatan JSON selama 3 detik. |