Malam , pada tutorial kali ini saya akan berbagi tentang cara memasang Gallery Postingan yang telah kita posting pada halaman statis . Ini dapat berguna untuk Recent Post , bisa juga untuk Popular Post , Bisa juga hanya untuk Menarik Perhatian pengunjung dengan menaruh nya di Sidebar Blogger. Yuk kita simak tutorial berikut.
Step pertama
Pertama kita Buat Halaman Statis berjudul Gallery SayaLalu langsung Publish ! .
Lalu Balik Lagi Ke Halaman Gallery Saya
SWITCH KE HTML TAB dan centang tekan enter untuk baris baru pada settingan post agar rapih
Step kedua
setelah itu kita buat CSS seperti di bawah ini.
<style scoped='' type='text/css'>
/* Gallery Post Agiel*/
.agil-gallery{padding:10px;clear:both;}
.agil-gallery:after{content:"";display:table;clear:both;}
.agil-gallery .bs-item a{position:relative;float:left;margin:0 15px 15px 0!important;text-decoration:none;}
.agil-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;}
.agil-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;}
.agil-gallery a:hover img{background:#ee7e22;}
</style>Step ketiga
Lalu Kita tambahkan kode Script di bawah kode css tadi.
<script type='text/javascript'>
//<![CDATA[
function agilGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="agil-gallery nopin" title="Semua Postingan Ada Disini">'];
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/AVvXsEifWmg-AmYnZwwPJDHm4DqBlDBaAln03TGJ9JcipYbTjGKXWZg5H5BvudK8n0YpsjWUk9VBWF5vGFmBZGjAs8VdAD6wqK3H1IvsZXfTXqfQ_VRpzXevxBX1kRNNs_ErZZH1AeNY5_j4p24n/s1600/Agiel+Triono.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + agilg_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 alt="' + postTitle + '" title="' + postTitle + '" src="' + newImgUrl + '" width="' + agilg_thumbSize + '" height="' + agilg_thumbSize + '"/>';
var pTitle = agilg_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(""));
}
var agilg_thumbSize = 150;
var agilg_showTitle = true;
//]]>
</script>
<script src="https://agieltriono.blogspot.com/feeds/posts/summary?max-results=500&alt=json-in-script&callback=agilGallery"></script>Lalu Klik Publish !
Penyesuaian
Silahkan kalian ganti https://agieltriono.blogspot.com/ dengan url blog sobat .EXAMPLE :
Domain NON HTTPS !
<script src="http://www.namablog.com/feeds/posts/summary?max-results=500&alt=json-in-script&callback=agilGallery"></script>Domain HTTPS !<script src="https://www.namablog.com/feeds/posts/summary?max-results=500&alt=json-in-script&callback=agilGallery"></script>*var agilg_thumbSize = 150; adalah Lebar Pixel Thumbnail Gambar
*var agilg_showTitle = true; ganti menjadi false jika ingin menyembunyikan Judul Postingan
*var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifWmg-AmYnZwwPJDHm4DqBlDBaAln03TGJ9JcipYbTjGKXWZg5H5BvudK8n0YpsjWUk9VBWF5vGFmBZGjAs8VdAD6wqK3H1IvsZXfTXqfQ_VRpzXevxBX1kRNNs_ErZZH1AeNY5_j4p24n/s1600/Agiel+Triono.png'; Gambar Default Jika Postingan sobat tidak terdeteksi adanya Gambar. ganti url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifWmg-AmYnZwwPJDHm4DqBlDBaAln03TGJ9JcipYbTjGKXWZg5H5BvudK8n0YpsjWUk9VBWF5vGFmBZGjAs8VdAD6wqK3H1IvsZXfTXqfQ_VRpzXevxBX1kRNNs_ErZZH1AeNY5_j4p24n/s1600/Agiel+Triono.png dengan gambar yang sobat inginkan.
*max-results=500 adalah jumlah postingan yang akan di tampilkan ganti 20 untuk menampilkan postingan sebanyak 20 , ganti 7 untuk menampilkan hingga batas 7 postingan.
atau ingin menambahkan nya di sidebar ?
Kalian Bisa Lansung Instal Dengan Klik Add Widget .Selesai Silahkan Lihat Hasilnya !
Tags:
TUTORIAL
