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

  • Tool font size di posting blogger
    Fluid Text widget Resizer adalah tool yang berguna untuk merubah ukuran font di posting dan script ini saya adopsi dari drive dinamis. Ini akan muncul tepat di bawah judul posting Anda dan akan memungkinkan pengunjung Anda untuk mengubah ukuran teks untuk kenyamanan mereka. Ukuran teks pada seluruh blog Anda akan diperbesar Dari sidebar samp…
  • jQuery Fitur / Recent Posts Slider Widget untuk Blogger
    Memasang Featured post/slide di blogger memang bukan hal baru, dengan widget ini kita bisa membuat sebuah kelompok/unggulan posting yang ingin di tampilkan dalam bagan tersendiri. sebagai contoh jika Anda ingin menampilkan posting dari 1 kategori "Blogger" maka semua posting akan ditampilkan dari kategori "blogger". atau Anda dapat menggunakan…
  • Widget tabview dengan jQuery dan CSS
    Tab view adalah salah satu widget yang cukup berguna terutama untuk menghemat halaman blog anda, Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. jika blog anda memiliki banyak gadget sebaiknya gunakan menu tabview ini untuk sedikit mengurangi tempat pada halaman blog anda yang terpakai…
  • 4 Style CSS widget Label Blogger
    Berikut ini beberapa modifikasi label default blogger. Anda hanya mendownload kode CSS yang diberikan berikut dan terapkan pada editing template Anda sebelum ]]></b:skin> atau </style> 1. Label Blog Style One .label-size { float:left; margin:0 0 7px 20px; position:relative; font-family:'Helvetica Neue',Helvetica,A…
  • CSS widget popular post Blogger
    Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik. Silakan masuk pada akun blogger Anda Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja. langkah di atas d…
  • Widget Recent Post Dengan Thumbnail Tooltips
    Jika blog Anda memiliki posting yang banyak dan Anda ingin membantu pengunjung Anda untuk menemukan posting terbaru Anda dengan cepat maka recent post sangat membantu. Seperti yang telah Anda lihat di beberapa blog milik blogger lain. biasanya widget ini ditempatkan dalam sidebar blog. Widget recents post ini dapat menampilkan posting terbaru deng…

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