Cara Membuat Recent Posts Galeri di Blogger

Info Blog News - Saya melihat tren blog yang menggunakan gambar untuk link pada efek postingnya, Seperti Pinterest mungkin? Pokoknya, meletakkan daftar gambar dengan cara manual dalam gadget HTML / Javascript untuk membentuk sebuah galeri, ini memang sangat tampak kurang efisien..

Kali ini saya akan sharing “Cara Membuat Recent Posts Galeri di Blogger” dengan mudah dan * otomatis * menggunakan widget galeri berdasarkan posting terbaru anda.

Berikut adalah beberapa fitur dari galeri:

√ Anda dapat mengatur ukuran gambar yang Anda pilih, ukuran. Gambar akan keluar tajam, tidak ada pixelation.

√ Cahaya-apa yang Anda lihat adalah apa yang sebenarnya dimuat. Kebanyakan galeri foto

√ mengambil selamanya untuk memuat karena mereka memuat gambar ukuran penuh dan kemudian

√ mengecilkan mereka menggunakan CSS. Galeri ini memuat ukuran gambar yang benar yang pertama kali.

√ Tulisan dapat disaring menggunakan label.

√ Dukungan beberapa galeri. Pilihan (ibu jari ukuran dan judul posting overlay) dapat diatur secara independen untuk masing-masing galeri.

Cara Membuatnya :

1. Pertama masuk ke Template >> Edit HTML dan menambahkan script ini sebelum atau diatas </ head> di template Anda.

HTML  - Info Blog News

<script>

// Blogger Recent Posts Gallery by InfoBlogBerita.blogspot.co.id

//<![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/AVvXsEiVfnN3awTukDfK2XRMvosgrE0RbIJpsrknPwNS1CYO-IZ2_f030sdVLC1-WxBb0aC7kjnT85n2HBvJ3TmcR83KhJF0_aRyaH4_JN2eWkGoXhyphenhyphen7Pa0ei1S5MrGmbWe0ouS5DyA9JySOSE6D/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>

2.Kemudian, tambahkan kode CSS berikut ke bagian CSS template Anda (tepat sebelum </ b: skin>

CCS - Info Blog News

/* InfoBlogNews 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;}

/* InfoBlogNews Recent Posts Image Gallery CSS End */

3. Langkah terakhir menambahkan script ini di mana pun Anda ingin widget recent post galeri dimunculkan. Hal ini dapat ditambahkan di mana saja dalam sebuah posting, halaman atau widget HTML / Javascript.

HTML - Info Blog News

<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>

Berikut adalah dua contoh recent post galeri.

Ini menunjukkan terbaru 10 pos dari Info Blog News pakan umum (| / feed / posts / summary |). Ukuran gambar diatur ke 100px, dan overlay judul posting diatur ke false.

Yang satu ini menampilkan terbaru 6 tulisan dari Info Blog News "widget" berdasarkan label (| / feed / posts / summary / - / widget |). Ukuran gambar diatur ke 140px, dan judul posting overlay diatur ke true.

Selamat mencoba semoga berhasil……! Pastikan untuk berlangganan untuk mendapatkan update reguler dikirimkan langsung ke inbox  email Anda gratis.