Widget Recent Post dengan Preloader
Tabel Konten
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. |
56 Komentar
Surga Kenari
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?
Taufik Nurrohman
Aktifkan fitur lightbox melalui pengaturan.
Terkait: Konsep JQuery Lightbox
Surga Kenari
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?
uki
TETOOOOOOOT........ anda kurang beruntung :p
Anonim
asli beneran nyeseul beli bukunya, padahal disini ada..
MasOes
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 :)
Bayu Handono
mas kenapa kebanyakan recent post, pengen popular post nih. hehe ngarep :p
Taufik Nurrohman
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.
Anonim
izin nyobah gan.. saya pingin banget pasang d blog saya...
makasih ya gan...
Admin SS
mas kalau ini buat nampilin posting terbaru label. gmna ya mas??
terima kasih
Taufik Nurrohman
Baca tabel konfigurasi di atas. Untuk menampilkan posting berdasarkan label, ganti nilai
false
pada variabelrp_sortByLabel
dengan nama label, misalnya begini:Admin SS
saya coba buat 2 label kok gak bisa ya mas??
Taufik Nurrohman
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).
Admin SS
"Buat nama kategori baru khusus untuk diterapkan pada widget ini"
ini mksudnya apa mas??:D
Taufik Nurrohman
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:
Unknown
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..
Taufik Nurrohman
Widget-widget ini memakai pemanggil berupa ID:
Kalau jumlah ID elemen ditemukan lebih dari satu hasilnya jadi error.
Unknown
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??
Taufik Nurrohman
Tidak bisa. Coba saja!
Unknown
oh jadi tdak bisa yah mas..
Unknown
kok recent post nya ga keload? cuma mentok di gambar loading doank?
mohon pencerahannya mas! ^_^
Taufik Nurrohman
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:
Selengkapnya, baca tabel konfigurasi di atas.
Unknown
kalau widget popular post preloader ada ga mas? :D
Taufik Nurrohman
Nggak ada. Widget yang asli saja sudah cepet.
Unknown
kalau cara hilangin tanggal, waktu, dan bulannya gimana mas?
Taufik Nurrohman
Unknown
makasih telah membantu mas! :D
Cahya Maulana
mas kalo pangen jadi random post gmna mas ??
Ridwan N
Mas Jika ingin memeasangnya dibawah setiap postingan bagaimana ya?
Taufik Nurrohman
Letakkan widget di bawah kode
<div class='post-footer'>
Unknown
Makasih banyak widget bagusnya, mas.
Jadi cakep deh tampilan blog saya :-bd
Unknown
kalo widget recent post ini dibuat menjadi horizontal bisa gk....!!! kalo bisa apa aja yg perlu dirubah....
Belitungku.NET
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
EM
ada masalah mas, ketika saya mencoba untuk merubah warna background dari kelas berikut mas
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
Taufik Nurrohman
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.
EM
ok terima kasih mas
:-bd
Anonim
wah mantap ini..
Mardi
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
Hari
masalahnya hampir sama, bantu plz
Unknown
YouTube thumbnail is not showing . It happened 4 days ago.
Taufik Nurrohman
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.
Unknown
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.
Taufik Nurrohman
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.Unknown
I just asked them and no reply ..
Its making me sad
haha
Unknown
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
Unknown
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 :)
Gue aja
Makasih infonya bang
ISyamsun
ijin pasang di blog mas. makasih :-bd
Angga
Makasih buat widgetnya mas taufik.. :-bd
Saya jg mau numpang tanya dong mas.
. 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
Taufik Nurrohman
Kamu bisa memanfaatkan indeks dari variabel
i
untuk menemukan posting pertama. Indeks yang paling awal tentunya adalah0
. Misalnya begini:Angga
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.
Admin
mas taufik, jika ingin link dan gambar ada title, dibagian js mana ya harus dirubah?
Taufik Nurrohman
Admin
thanks mas taufik :)
Unknown
gak bisa ya jadiin versi carousel?? ._. saya nyoba make
owlgraphic*com/owlcarousel/ gak bisa..
Direkori Penerjemah
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.