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:
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode 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="//tovic.github.io/dte-project/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. |
Labels: Blogger, Dasar, JavaScript, Widget
56 Comments:
mas Taufik, coba klik gambar yg ada di posting mas Taufik,
akan muncul popup img ..
nah kalo di blog saya kok tidak yah??
dulu sih iya, tp saya gak tau knp bisa tiba2 skrg gak popup lagi..?
ada pencerahannya Mas?
mas kenapa kebanyakan recent post, pengen popular post nih. hehe ngarep :p
Aktifkan fitur lightbox melalui pengaturan.
Terkait: Konsep JQuery Lightbox
Widget posting populer sudah ada versi bakunya. Jadi kalau dibuat versi JavaScript-nya malah tidak menarik. Kalau mau memodifikasi widget posting populer masih bisa kok memakai kerangka dari widget bawaan Blogger.
saya lihat sudah aktif fitur lightbox nya mas..
tp kok gak popup yah..
dulu banget waktu masih polos templatenya sih popup..
*garuk2 pala* bingung..
ada solusi mas?
TETOOOOOOOT........ anda kurang beruntung :p
izin nyobah gan.. saya pingin banget pasang d blog saya...
makasih ya gan...
mas kalau ini buat nampilin posting terbaru label. gmna ya mas??
terima kasih
Baca tabel konfigurasi di atas. Untuk menampilkan posting berdasarkan label, ganti nilai false pada variabel rp_sortByLabel dengan nama label, misalnya begini:
rp_sortByLabel = "Lorem Ipsum"
saya coba buat 2 label kok gak bisa ya mas??
Tidak bisa, ini cuma untuk satu label. Kalau mau menggunakan lebih dari satu label, bukannya masih bisa dibuat pengelompokan label baru lagi pada posting-posting yang ingin ditampilkan? :\ (Buat nama kategori baru khusus untuk diterapkan pada widget ini).
"Buat nama kategori baru khusus untuk diterapkan pada widget ini"
ini mksudnya apa mas??:D
Misalnya kita ingin menampilkan semua posting berlabel 'Binatang' dan 'Tanaman'. Agar kedua tipe posting itu bisa tampil, semua posting berlabel 'Binatang' dan 'Tanaman' diberi label lagi bernama 'Makhluk Hidup' (misalnya), setelah itu masukkan nama labelnya dalam variabel:
rp_sortByLabel = "Makhluk Hidup"
Mas saya coba memasukkan kode mas didalam 2 HTML/JavaScript dengan menerapkan label yang berbeda tapi hanya 1 yang terload..
begitu juga jika sudah terdapat widget daftar isi Blogger dengan navigasi halaman..
hanya 1 yang terload..
kira2 apa masalahnya mas..
Widget-widget ini memakai pemanggil berupa ID:
<ul id="dte_recent-post"></ul>
document.getElementById('dte_recent-post').doSomething();
Kalau jumlah ID elemen ditemukan lebih dari satu hasilnya jadi error.
oh jadi gitu yah mas..
jadi klo mau menggunakan lebih dari 1 label harus membuat/merubah file yang di:
"http://reader-download.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"
mengganti "document.getElementById nya" dan nantinya untuk targetnya dibuat lagi ID lg..
wah klo begi semakin banyak label maka javascript jg semakin banyak..
atau apa bisa document.getElementById diganti dengan document.getElementByClass??
Tidak bisa. Coba saja!
oh jadi tdak bisa yah mas..
kok recent post nya ga keload? cuma mentok di gambar loading doank?
mohon pencerahannya mas! ^_^
Widget ini Saya setel waktu muatnya dimulai saat halaman sudah termuat semua. Kalau widget tetap tidak termuat, lebih baik gunakan timer saja, jangan memakai indikator halaman termuat:
rp_loadTimer = 3000; // Pemuatan widget dimulai tiga detik kemudian sejak halaman dibuka/script berhasil diakses
Selengkapnya, baca tabel konfigurasi di atas.
kalau widget popular post preloader ada ga mas? :D
Nggak ada. Widget yang asli saja sudah cepet.
kalau cara hilangin tanggal, waktu, dan bulannya gimana mas?
#dte_recent-post li span.foot {display:none;}
makasih telah membantu mas! :D
mas kalo pangen jadi random post gmna mas ??
Mas Jika ingin memeasangnya dibawah setiap postingan bagaimana ya?
Letakkan widget di bawah kode <div class='post-footer'>
asli beneran nyeseul beli bukunya, padahal disini ada..
Makasih banyak widget bagusnya, mas.
Jadi cakep deh tampilan blog saya :-bd
kalo widget recent post ini dibuat menjadi horizontal bisa gk....!!! kalo bisa apa aja yg perlu dirubah....
Assalamualaikum, siang mas.
kok di blogku gak muncul ya mas? Loading lama, aku tungguin tp gak muncul juga.
Mohon dibantu ya mas. Terimakasih tutorialnya.
Kim
ada masalah mas, ketika saya mencoba untuk merubah warna background dari kelas berikut mas
#dte_recent-post li {
list-style:none;
margin:0 0;
padding:7px 7px;
background-color:white; /* saya ubah menjadi transparent*/
border-bottom:1px solid #ddd;
}
efek laodingnya yang seharusnya berhenti karena halaman sudah dimuat tetapi malah terus muncul mas,
tetapi jika backgroundnya tidak dirubah, efek loadingnya hilang, untuk mengatasi masalah ini bagaimana caranya mas?
terima kasih
Saya menambahkan latar warna putih pada elemen daftar untuk menutupi animasi loading di belakangnya. Jadi ketika konten telah termuat, efek animasi loading akan tertutupi oleh warna latar konten tersebut. Kalau dibuat transparan ya jadi terlihat latar di belakangnya. Intinya, samakan saja antara warna elemen daftar dengan warna latar animasi.
ok terima kasih mas
:-bd
wah mantap ini..
Mas taufik widgetnya berhasil di pasang, tapi kok thumbnailnya gak muncul sesuai posting. yg muncul gambar no images. coba lihat ini mas http://blogsism.blogspot.com
masalahnya hampir sama, bantu plz
YouTube thumbnail is not showing . It happened 4 days ago.
External hosted thumbnails will not go into Blogger JSON object. So the image from YouTube and another server will not be displayed on this widget (and most of the widgets I made). Consider to upload images directly through Blogger image uploader so that they could appear in JSON.
Oh no :(! . I need to upload an image on each post I made.
My site is running a video-blog. Majority all my post contain YouTube Video.
So , do you planning on fixing the widget?
I hope you can fix it.
Fixing? No, this is currently not a bug. Blogger just simply don't accept/put YouTube thumbnail into their JSON. If you have time, maybe you can make a request about including YouTube thumbnails into Blogger JSON through https://productforums.google.com/forum/#!categories/blogger, so that the thumbnail could appear in the future. But I can't guarantee you'll get a response from them.
Actually this problem can be solved using the old way like the comment I wrote here
But this method is outdated. Taking the first thumbnail URL through image tag character detection. Only works with default feed mode. Waste of bandwidth IMO. And it was created when json.feed.entry[i].media$thumbnail.url hasn't been released.
I just asked them and no reply ..
Its making me sad
haha
kalau widget recent post auto reload bisa buatin nggak bos Taufik? ane cari2 di mbah google nggak ada..maksudnya yaitu seperti metode milik beranda facebook..jadi setiap ada post baru langsung muncul, tanpa melakukan reload halaman. kayaknya pernah baca dengan ajax bisa dibuat, tp entah saya juga belum tahu, hehe
oh iya sekalian..kalau yang daftar isi dengan halaman itu bisa buatin yang berdasarkan tanggal nggak bro? maksudnya kayak punya http://index.okezone.com/ itu, jadi kita milih tanggalnya, maka akan ketemu post pada tanggal itu. Thanks :)
hehehe... setiap gambar image ( img ) jika ingin bisa dibaca oleh mesin pencari yaaa harus ditambah ALTERNATE atau alt .
Contohnya :
<a href="URL gambar Anda" kemudian anda harus menambahkan ( img alt="Judul gambar/posting Anda" )
Kalau Gambar terkena MOUSE maka akan muncul judul gambar/postingnya... BEGITU MAS :)
Makasih infonya bang
ijin pasang di blog mas. makasih :-bd
Makasih buat widgetnya mas taufik.. :-bd
Saya jg mau numpang tanya dong mas. [img]https://lh3.googleusercontent.com/-a2RaABK4BbM/VMr1RqcWZRI/AAAAAAAACGg/F3zW3YZ77ig/s512/iki-gambare.jpg[/img]
. itu screenshot widget yg udah sy ubah pake CSS. yang jd masalah gimana caranya nilai rp_thumbWidthnya di buat berbeda, untuk li:first-child thumbnail besar dan li yang lain ukuran kecil. kalo cuma pake css kn pemborosan ukuran thumbnya mas. sejak kemaren-kemaren saya udah coba edit file JSnya tapi gak berhasil-berhasil mas.mungkin otak sy gak nyampe :'( . mohon pencerahannya mas taufik
Kamu bisa memanfaatkan indeks dari variabel i untuk menemukan posting pertama. Indeks yang paling awal tentunya adalah 0. Misalnya begini:
if (rp_thumbWidth !== 0 && rp_thumbWidth !== false) {
var rp_thumbWidthOriginal = rp_thumbWidth,
rp_thumbWidthFirst = 600; // <= Ini untuk thumbnail pertama
// Cek indeks elemen
rp_thumbWidth = i === 0 ? rp_thumbWidthFirst : rp_thumbWidthOriginal;
if ("media$thumbnail" in entry) {
postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + entry.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/s" + rp_thumbWidth + "-c") + '" alt="Loading..."/>';
} else {
postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + rp_noImage + '" alt="Loading..."/>';
}
} else {
postImage = "";
}
Makasih banget buat jawabannya Mas Taufik. udah saya coba, dan berhasil, tapi ada yg mesti di ubah sedikit deklarasi variabelnya. Semoga Mas Taufik dan keluarga senantiasa sehat.
mas taufik, jika ingin link dan gambar ada title, dibagian js mana ya harus dirubah?
postImage = '<img title="' + postTitle + '" style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + entry.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/s" + rp_thumbWidth + "-c") + '" alt="Loading..." />';
skeleton += '<a title="' + postTitle + '" href="' + postUrl + '"' + linkTarget + '>' + postImage + '</a>';
thanks mas taufik :)
gak bisa ya jadiin versi carousel?? ._. saya nyoba make
owlgraphic*com/owlcarousel/ gak bisa..
Mas, numpang tanya.
Awalnya saya pake widget ini normal bahkan sudah beberapa tahun pake widget keren ini gak ada masalah.
Tapi sekarang kok gak muncul widgetnya ya, mas?
Kira-kira masalahnya dimana ya, mas?
Ohm ya, blog saya >>> http://www.direktoripenerjemah.com/
Terima kasih sebelumnya.
Post a Comment
<< Home