Tutorial berikut cara membuat postingan dalam bentuk grid berdasarkan label di blog. Sebagai contoh, perhatikan gambar berikut dimana jumlah grid dapat disesuaikan.
Contoh ini diterapkan pada blog ini, ditempatkan pada bagian bawah postingan.
- Login dahulu dashboard blogger anda.
- Kemudia masuk ke menu Tata Letak
- Lanjutkan dengan memilih tempat dimana wigetnya akan ditaruh, sesuaikan dengan kebutuhan blog anda masing-masing, contohnya seperti gambar dibawah ini
- Klik Tambahkan Gadget/Add Gadget. Mungkin berbeda dengan template yang Anda gunakan. Dalam kasus ini akan ditempatkan dibawah postingan.
- Pada kotak dialog Tambahkan Gadget, pilih HTML/JavaScript.
- Pada kotak dialog Mengonfigurasi HTML/JavaScript, pada kotak masukan Judul ketik judul yang diinginkan.
- Pada kotak masukan Konten, kopas/tempelkan kode berikut:
<style>
/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a rel="nofollow" rel="noreferrer"href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var arlina_thumbs = 72;
var arlina_title = true;
</script>
<script src="/feeds/posts/default/-/NAMA LABEL?max-results=8&alt=json-in-script&callback=arlinagrid">
- Ganti tulisan yang berwarna merah NAMA LABEL dengan label yang diinginkan.
- Ganti tulisan yang berwarna merah 8 untuk menentukan jumlah postingan/grid yang akan ditampilkan.
- Klik tombol Simpan untuk menutup kotak dialog.
- Seret/drag gadget yang baru saja Anda buat keposisi yang diinginkan. Dalam kasus ini dibawah postingan.
- Jangan lupa menyimpan.
Demikian latihan ini dibuat untuk pemula, semoga bermanfaat.
Terima kasih.
0 Komentar