Widget Recent Post Thumbnail untuk blogger

Widget

Recent Posts dengan miniatur gambar - widget ini memudahkan pengunjung blog anda untuk menemukan postingan baru/terupdate di blog anda. membuatnya juga mudah seperti memasang Random Post yang pernah saya posting.


caranya adalah sebagai berikut:

Langkah 1: Tambahkan kode berikut sebelum tag ]]></b:skin> dalam template Anda.

#recent-posts img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:36px;
height:36px;
padding:3px
}

atau kalau anda malas edit template, tambahkan tag pembungkus <style> dan </style> di css lalu tempatkan bersama dalam satu widget dengan kode scripnya.

Jika anda telah memasang Random Posts untuk Blogger anda lewatkan saja langkah di atas dan ganti kode css #recent-posts di atas menjadi #random-posts  karena kedua cssnya sama, kecuali anda telah melakukan perubahan.

Langkah 2: Tambahkan 1 widget HTML / Javascript di element untuk menempatkan widget Recent Posts ini. Teks Editing dan paste kode berikut ke dalam konten dan pilih SAVE.

<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Nhận xét';
var rcp_disable='Tắt Nhận xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPIlMlp7enDj7mMUotVby_FesoFS41K-jwpmdmp11Fmk60Nr_8T045XQ02CjyE-AFQs8GmdWcQT4a6Vl6wjRjVPQCw5c_Ibld6yhSbtRj3vUeYnR1r9DmsM1pvXZJBNm9kBwHs3ijS0qN/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Ganti 5 dengan artikel yang ingin ditampilkan, 150 adalah jumlah karakter isi posting kutipan. Jika Anda tidak ingin menampilkan informasi tanggal dan posting juga jumlah komentar silahkan ubah yes menjadi no untuk perintah tidak.

Semoga membantu...

Artikel Terkait

  • Membuat javascript random teks
    Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik l…
  • Memasang Sticky Widget Keren di Blogspot
      Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu 1. Menambakan kode CSS 2. Menambah kode JavaScript 3. Menambahkan kode HTML Menambah kode CSS 1. Login ke Blogger 2. Klik Template > Edit HTML > Lanjutkan 3. Tambahkan kode CSS, contoh kode seperti ini dan tempatkan di atas ]]></b:skin> :…
  • Membuat Sticky post di blogger dengan gadget
    Demo Membuat sticky post di blogger dengan gadget sangat mudah, mari kita lihat bagaimana kita bisa membuat sticky post menggunakan gadget HTML / Javascript. Saya tidak menemukan "solusi penuh" di mana sticky post dapat bekerja seperti seharusnya, yaitu hanya tampilkan pada halaman depan dari blog, tapi tidak pada halaman lain. . Menamb…
  • Widget Related Post dengan 6 style
    Bukan hal baru lagi memang membahas topik related post blogger, tetapi seiring dengan waktu related post semakin memiki keragaman yang terus di kembangkan oleh para blogger. kali ini saya akan membagi cara termudah untuk mendesain related post menggunakan tool generator yang telah di buat oleh master taufik nurohman. langsung saja ikuti langka…
  • Floating Social Bookmark CSS
    Sekarang ini untuk membuat floating social Bookmark sudah sangat mudah, anda bisa mengikuti dua cara di bawah ini. Demo Cara 1: Script Floating Social Bookmark diletakkan di widget blog. Login ke blog Anda. Pilih Tata letak Pilih Add Gadget (saran: pilihlah gadget paling bawah) Pilih HTML/JavaScript. Copy dan Paste-kan script dibawah …
  • Floating Social Bookmark Berefek Easing
    Pagi sobat blogger, bangun pagi semangat lagi. beberapa hari ini saya terus memposting ulang artikel di blog ini untuk memperbaiki artikel lama yang kurang greget. pagi ini saya akan memposting trik dan cara membuat sosial bookmark melayang untuk blogger, untuk demo dann penampakannya bisa sobat lihat di screnshoot berikut ini: Demo Beri…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...