Malam All
Untuk DEMO sobat bisa melihat widget recent post di bawah tombol next
Berikut beberapa fitur dari Recent Post gallery
Lalu Save
Widget Recent post atau posting terbaru merupakan widget penting bagi sebuah blog karena berfungsi sebagai penunjang navigasi blog. Terlebih ketika jumlah posting di hompage berjumlah satu /setelan satu , peran recent post sangat lah membantu pengunjung untuk melihat postingan terbaru dan beberapa postingan sebelumnya. Dan kali ini saya akan menawarkan recent post bergaya gallery yang cocok untuk semua template.
Untuk DEMO sobat bisa melihat widget recent post di bawah tombol next
- 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/AVvXsEiMrQkm69I_dcfgVhi4_Cu2m-h3VL1z-SJQWiIC5w__PgPM15Q6QxJMX4Equ0qegfVpnow3fu8PXv6CYijVRnvBER7iGUkg92s9QqEajZXn8tnhF9-Q_slYMa_iLQzGFUAZs_UrTOCBnsim/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>
izin BM gan
BalasHapusizin comot kang.. :)
Hapusmaya : monggo jeng
Hapusmas bud : owh silahkan di comotin mas
model gini makin kelihatan cantik, coz sekaligus ada gambarnya.
BalasHapusmasih cantik kan mbak indah ding..
Hapusbener mas bud .. mba indah sangat cantik dong...
Hapusdan selain keliat profesioanal...juga ndak bikin berat loading ya kan
BalasHapuskeren deh :)
benar mas bud biar agak gimana gitu hehe
Hapusloading masih tetep fast lah ...
keren ^_^ ..
BalasHapustapi banyak amat kodenya.
dikit miz .. standar-standar z ko ..
Hapuskeliatan banyak itu cuma seting kalau mau sesuai label saja ko
saya simpan dulu mas, terima kasih atas tutorialnya yg sangat Oke dan mantap
BalasHapustrims
jangan terlalu lama mas takut basi hehe
Hapusterimakasih kembali
AKU DATANG KANG HEHEHE, MANTEP NIH TUTORIAL RECENT POST GALERRYNYA HEHEHE... NGOPI DLU KANG SAMBIL BEGADANG XIXIII
BalasHapus