Mecha versi 2.6.4 sudah dirilis!

Widget Recent Post dengan Preloader

Tabel Konten
  1. Konfigurasi Widget 
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

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 

OpsiKeterangan
rp_homePageGanti dengan URL blog Anda.
rp_numPostsDigunakan untuk menentukan jumlah posting yang akan ditampilkan.
rp_thumbWidthDigunakan untuk menentukan lebar thumbnail. Ubah lebarnya menjadi 0 untuk menghilangkan thumbnail.
rp_numCharsDigunakan untuk menentukan jumlah karakter ringkasan posting.
rp_sortByLabelGanti nilai false menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: rp_sortByLabel = "jQuery" akan menampilkan semua posting dengan label jQuery.
rp_noImageThumbnail cadangan jika posting yang tampil dalam widget tidak memiliki gambar.
rp_monthNamesTentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda.
rp_newTabLinkJika bernilai true, maka semua tautan dalam widget akan terbuka di tab/jendela baru saat diklik.
rp_loadTimerDigunakan 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.

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 variabel rp_sortByLabel dengan nama label, misalnya begini:

rp_sortByLabel = "Lorem Ipsum"

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:

rp_sortByLabel = "Makhluk Hidup"

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:

<ul id="dte_recent-post"></ul>
document.getElementById('dte_recent-post').doSomething();

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

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:

rp_loadTimer = 3000; // Pemuatan widget dimulai tiga detik kemudian sejak halaman dibuka/script berhasil diakses

Selengkapnya, baca tabel konfigurasi di atas.

Unknown

kalau widget popular post preloader ada ga mas? :D

Unknown

kalau cara hilangin tanggal, waktu, dan bulannya gimana mas?

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

#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

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 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 = "";
}

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

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>';

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.

Komentar telah ditutup.