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:
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.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 type="text/javascript">
//<![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 = "http://reader-download.googlecode.com/svn/trunk/images/meee-44x44.png", // 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 type="text/javascript" src="http://reader-download.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 menentukan jumlah posting yang akan ditampilkan |
| rp_thumbWidth | Digunakan untuk menentukan lebar thumbnail. Ubah lebarnya menjadi 0 untuk menghilangkan thumbnail |
| rp_numChars | Digunakan untuk menentukan jumlah karakter ringkasan posting |
| rp_sortByLabel | Ganti nilai false menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: rp_sortByLabel = "JQuery" akan menampilkan semua posting dengan label JQuery |
| rp_noImage | Thumbnail cadangan jika posting yang tampil dalam widget tidak memiliki 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 baru saat diklik |
| rp_loadTimer | Digunakan untuk menentukan seberapa lama widget akan menunda proses pemuatan sebelum akhirnya mulai memuat. Secara normal bernilai "onload". Artinya bahwa widget akan memuat setelah semua elemen halaman telah berhasil termuat. Anda juga bisa 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. |
Hallo sobat jangan lupa baca artikel kesehatan hanya ada disini
Blogkesehatanmu
Blogger pemula, bukan juga seorang blogger master. Saya hanyalah seorang karyawan swasta yang senang mempelajari hal-hal baru seputar blog, SEO dan internet marketing.
0 Response to "Widget Recent Post dengan Preloader"
Posting Komentar