Cara Membuat Recent Post Dengan Gambar v.1

Sedikit tentang recent post ini. Recent Post ini di dukung dengan gambar dan judul di bawah gambar, memudahkan pengunjung blog kita untuk menemukan Artikel tertentu secara langsung. Seperti gambar diatas, saya menggunakan ini sebagai Recent OST dan Musik terbaru yang saya upload sendiri di Animenload. Dan juga Recent Post ini kelihatan stylish, kalian juga bisa mengubah atau mengedit sendiri tampilannya jika kalian bisa. Jika tidak saya sarankan untuk tidak mengubah Settingan atau apapun, karena akan mempengaruhi tampilan atau bahkan Recent Post ini tidak akan muncul.

Langsung saja ke cara pemasangan:

Kopikan kode berikut ke dalam Widget HTML

<style>
ul.recent_posts_with_thumbs h2 {
position: relative;
border-bottom: 0px none !important;
margin: 0px !important;
font-size: 11px !important;
font-weight: 300 !important;
border-top: 3px solid #2E51A2;;
background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0%;
text-transform: none !important;
width: 110px;
padding: 7px 6px !important;
}
img.recent_thumb {
    display: block;
    position: relative;
    width: 122px;
    height: auto;}
.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {
float: left;
margin: 5px 2px 0px 2px;
border: 1px solid rgb(221, 221, 221);
padding: 1px;}
.recent_posts_with_thumbs a {text-overflow: ellipsis;
z-index: 10;
overflow: hidden;color:#FFFFFF;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script src="https://sites.google.com/site/potoanime/poto/recent-post-with-lebels.js"> </script>
<script>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 150;</script>
<script src="/feeds/posts/default/-/label%20kamu?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<script type='text/javascript'>
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'/', '/'+to+'/')
        });
    });
}
$(function() {
    resizeThumb('.recent_thumb', '72-c', 'w205-h205-c');
});
</script>

Sedikit tambahan. Kamu bisa mengubah opsi "numposts = 5" sesuka hati kamu dan jangan lupa untuk mengubah "label%20kamu" dengan label kamu.

Terimakasih telah berkunjung ke Fansublogger