Mee Shitt || Recent Post artikel Artikel Terbaru ber-Gambar di Blogger, Untuk DEMO sobat bisa melihat widget recent post di sidebar
- Sobat bisa mengatur ukuran gambar yang disesuaikan dengan selera.
- Recent post yang ditampilkan dapat disesuaikan dengan label
#Kustomisasi
- Cari kode </head> dan tempatkan kode dibawah ini tepat atasnya
<script>
// Blogger Recent Posts [ OBC ]
// Tutorial at http://duniaradioku.blogspot.com
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGIXkiLvWczNibmEQsYT1bJJYV9axNeIYNKaRUEB9PsfhGygqXD3hvULNB0QF-b5f139tD_FHm9mcw093c4scIHalVYuHZ1ez9uP7TJeDsJk_SsP4uNyl4m6shIc7AyUT0YVEy324XWyoV/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>
- Selanjutnya cari kode ]]><b:skin> dan tempatkan kode dibawah ini tepat diatasnya
/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* BloggerSentral Recent Posts Image Gallery CSS End */
Lalu Save
- Dan masuk pada tataletak Add Gadget/HTML Javascript masukan kode dibawah ini
<script>
var bsrpg_thumbSize = 150;
var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>
#NOTE
- Tulisan 150 merupakan ukuran gambar / thumbnails sobat bisa merubahnya sesuai selera
- Tulisan true ( thumb dengan keterangan ) bisa sobat ganti dengan farse ( thumb tanpa keterangan ) untuk memberikan penampilan yang berbeda
- Angka 8 adalah jumlah thumb gallery yang ditampilkan
Untuk menampilkan Recent Post sesuai label
<script>Ganti tulisan label dengan label sobat
var bsrpg_thumbSize = 150;
var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary/-/Label =8&alt=json-in-script&callback=bsrpGallery"></script>
22 komentar
sangat bermanfaat infonya gan
udah tek follback tuh..
http://wuhand.blogspot.com/
makasih tutorialnya sob !!
blog baru tapi Keren (y)
mantaps Sob !!
makasih sob
:) :)
Sama-sama COKK
Makasih sob !
jelek Blog nya :(
Nice banget gannn..
http://wadi-blog.blogspot.com/2013/11/cara-install-debian-server.html
Makasih sob !
udah ane follow + coment Back !
Kebetulan saya belum pasang gan terimakasih tutornya
Ini yg ane cari makasih gan artikelnya
mantep gan bisa di coba nih..thanks bwat infonnya
Cepat dipasang sob, nanti kalo nggak pasang rugi sob !
makasih sudah datang di gubuk saya sob !!
boleh di COBA, tapi JANGAN COBA-COBA !
nice info gan
makasih mas BROO
Mantap sob, thank infonya, jangan lupa kunbal sama komentnya ya sob.
http://gubuginformasii.blogspot.com/2013/11/langkah-langkah-membuat-blog-yang-seo.html
mantap bro infonya
Makasih sob :*
Oke CapCuss
Makasih MasBroo !
Thanks gan infonya, sangat bermanfaat:)
sama-sama Broo !