Cara membuat recent post Bergambar , recen post ini mirip dengan widged blogger entri populer dan tentunya juga fungsinya sama yaitu untuk memberikan cuplikan judul-judul postingan.
Recent Post yang akan saya bagikan ini adalah recen post bergambar yang artinya tampilan dari recent post ini ada judul artikel dan cuplikan artikelnya serta gambar dan dengan model berjalan sehingga bisa menambah keunikan dari tampilan website anda.
Contoh recent post bergambar berjalan seperti pada gambar di bawah ini
1.buka blog anda lalu login , kemudian masuk dashboard blgger.
2.lalu pilih tata letak
3.klik tambahkan widget
4.pilih widget HTML/javascript
5.lalu kopi kode yang di bawah ini dan pastekan dalam widget tersebut
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:410px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:80px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function rpthumbnt(json) {
document.write('<ul class="rp_plus_img">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch(error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEPxBk6oBe0MrA_bWe2sfX6v6Z8ga3AefFHpSB8kHoyYx0cHwXEvCE2CH-gpS1MaShevhYMOWF3VuGWMF3cR89Cq-rEWxw0kE0nxeyQEUTqEY5vZkRKco2uQrFIHiI131qoI9Z8r1a6gc/s1600/no+image.200.jpg'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="http://www.seocips.com/" target="_blank"><img src="' + thumburl + '"/></a>');
document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length < numchars) {
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
} else {
document.write('<span class="news-text">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker() {
last = $('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}
</script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
6.selanjutnya simpan widget nya
7.selesai.
Demikian tutorial blogger kali ini tentang cara membuat recent post berjalan disertai gambar , semoga berguna.