Membuat Recent Post Dengan Thumbnail Blogger

Pada sebelumya saya pernah membahas tentang artikel cara membuat recent post responsive di blogspot .jika meng inginkan Cara Membuat Recent Post Responsive Juga Keren pada blog anda ,saya akan kasih anda Recent Post Responsive dengan tampilan terbaru ,dengan banyak menu Recent Post bagus dan juga keren tapi terkadang tidak Responsive ,maka kali ini saya akan shree Cara Membuat Recent Post Responsive Juga Keren halaman di bawah ini.

Sebelumnya saya akan mebahas apa pungsi dari menu Recent Post pada blog Recent Post ini adalah sebuah menu yang bisa menampilkan dengan suwai menu lebel pada blog kalin Contoh ketika anda pengjung yang datang pada blog ,kalain membaca tentang Cara Membuat Recent Post Responsive Juga Keren maka dengan kategori Widget Blog maka di setiap kategori Widget Blog akan tampil pada menu Recent Post . Siliahkan anda ikuti pada langah-langkah halaman di bawah ini.

Langakah Permata

1. Kamu Login saja ke blogger
2. Kemudian kamu pilih saja Menu Tambahkan Wigdet pada blog anda
3. Dan kamu pilih Saja Menu Tata Letak >> Tambahkan Gendet Dan kamu pilih menu HTML/JavaScript

Baca Juga

4.Langkah Selanjutnya kamu masukan kode di bawah pada kotak Wigdet.

<script>
// Blogger Recent Posts Gallery by http://tutorialcid.blogspot.co.id
// Tutorial at http://tutorialcid.blogspot.com/2017/04/cara-membuat-recent-post-responsive.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function tb911rpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="tb911rp-gallery nopin" title="Get this from theblogger911.blogspot.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/AVvXsEiyTLLzb4n087j5Sh8UXgSMjMrmL8Eic_PojkxtQHXmsLI_2dFZvvSk-mGW3Z2QSKgsKf6p1b_WSV1agcV6wvmDqREu-TG8GkLdWASRIq2BfRzVdrZ5g90uVGoN111CEvExhGN2Q1skRBFs/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + tb911rpg_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="' + tb911rpg_thumbSize + '" height="' + tb911rpg_thumbSize + '"/>';
var pTitle = tb911rpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="tb911-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>
<script>var tb911rpg_thumbSize = 62; 
var tb911rpg_showTitle = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=tb911rpGallery"></script>

<style>
/* www.theblogger911.blogspot.com Recent Posts Image Gallery CSS Start */
.tb911rp-gallery {padding:10px; clear:both;}
.tb911rp-gallery:after {content: "";display: table;clear: both;}
.tb911rp-gallery .tb911-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.tb911rp-gallery .tb911-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;}
.tb911rp-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;}
.tb911rp-gallery a:hover img {background: #ee7e22;}
/* www.theblogger911.blogspot.com Recent Posts Image Gallery CSS End */
</style>

Keteranagan

var tb911rpg_thumbSize = 62; Kode ini adalah kode Ukuran Gamabar
/feeds/posts/summary?max-results=9 Adalah mengatur jumblah postingan yang akan di tampilkan

5. Jika anda sudah menerapkan anda jangan lupa atur ukuran kode yang saya udah di tandai garis merah ,hanaya ini saja yang saya bisa sampaikan ke pada kalain semoga artkel ini bisa bermanpaat jangan lupa like dan shree pada teman-teman kalain wasalam.

Lokasi:

tes

Membuat Recent Post Dengan Thumbnail Blogger

Menu Halaman Statis