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

  • 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 Floating bar dengan jquery dan CSS
    Salah satu teman berkomentar di blog saya menanyakan bagaimana menerapkan sebuah floating bar di blog. Apakah Anda tahu apa floating bar di blog dan bagaimana membuat yang seperti itu? . Demo Lihat live demo sebagai Beberapa contoh yang baik lainnya untuk floating bar dapat ditemukan di Meebo dan Wibiya, saya pikir banyak dari Anda yang t…
  • 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…
  • Widget Popular Posts Style Sliding Galeri
    Banyak Blogger menyediakan tutorial untuk menyesuaikan widget Populer post standar Blogger dengan CSS. Menurut pendapat saya, widget Popular post dapat membantu pembaca untuk memilih artikel yang paling tren di blog tertentu. Selain itu, widget Populer post juga dapat disesuaikan agar lebih menarik perhatian dari para pengunjung. Jadi, di sin…
  • Widget popular post readmore
    Popular posts pasti selalu terpasang dalam blog, sebab dengan widget popular post inilah kita bisa menunjukkan pada pengujung untuk membaca artikel yang banyak di baca. Dari itu kita bisa memanfaatkan PopularPost Widget biasa berkode PopularPosts1 dalam template blogger untuk dimodifikasi dengan baik dan menarik. Salah satu yang bisa dilakukan…
  • Widget Recent Post Thumbnail untuk blogger
    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. Demo caranya adalah sebagai berikut: Langkah 1: Tambahkan kode berikut sebelum tag ]]></b:skin> dalam template …

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