Cara Menciptakan Recent Post Menyerupai Arlina Design Di Blogger
Cara Membuat Recent Post Seperti Arlina Design di Blogger - Kali ini saya akan membagikan tutorial cara memasang Recent Post keren di Blogger. Desain ini sama dengan yang ketika ini dipakai oleh Arlinadzgn. Recenet post ini dapat kau atur berapa jumlah yang ingin ditampilkan, juga pengaturan supaya widget recent post blogger ini hanya tampil di halaman postingan saja.
Agar widget Recent Post hanya tampil di Halaman artikel, tambahkan instruksi berikut ini dengan cara masuk ke Dashboad Blogger > Tema > Cari widget yang gres saja kau buat dan letakkan instruksi berikut ibarat gambar dibawah ini.
Contoh penempatannya :
Setelah itu, pergi ke Dashboard Blogger > Tema > Edit HTML. Cari instruksi </head> dan letakan instruksi berikut ini diatasnya.
Masih ditempat yang sama, letakkan CSS berikut ini diatas </head>.
Selesai.
Cara Membuat Recent Post Seperti Arlina Design di Blogger
Pertama, yang harus kau lakukan yakni menambah widget HTML dengan cara pergi ke Dashboard Blogger > Tata Letak lalu tambahkan widget HTML/Javascript pada Sidebar. Masukkan copy dan paste script berikut ini pada widget tersebut.
<script> var galihd_thumbs_wid = 300; var galihd_thumbs_hei = 190; var galihd_title = true; </script> <script src="/feeds/posts/summary?max-results=2&alt=json-in-script&callback=galihdgrid"></script>Agar widget Recent Post hanya tampil di Halaman artikel, tambahkan instruksi berikut ini dengan cara masuk ke Dashboad Blogger > Tema > Cari widget yang gres saja kau buat dan letakkan instruksi berikut ibarat gambar dibawah ini.
<b:if cond='data:blog.pageType == "item"'> ........... </b:if>Contoh penempatannya :
Setelah itu, pergi ke Dashboard Blogger > Tema > Edit HTML. Cari instruksi </head> dan letakan instruksi berikut ini diatasnya.
<script type='text/javascript'> //<![CDATA[ // Recent Post function galihdgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-galeri">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHZPIBp6WVxHkz31E2VdcUx8kYxkpOVpbAbwqMTR1PHgNiKtVOcmvpZdTScHVEAY0oWKxh6TZLpLJDgbnphTybyj_h5XQsUH-RQXmSsxC_Jy7H5StfyWtGvgkFNcGzNdCiAAIwYobwVrB/s1600/default.png",s=n.replace("/s72-c/","/w"+galihd_thumbs_wid+"-h"+galihd_thumbs_hei+"-c/"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+galihd_thumbs_wid+'" height="'+galihd_thumbs_hei+'"/>',p=galihd_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" title="Cara Membuat Recent Post Seperti Arlina Design di Blogger">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))} //]]> </script>Masih ditempat yang sama, letakkan CSS berikut ini diatas </head>.
<style type='text/css'> /* Recent Post */ .recent-galeri{padding:0;clear:both} .recent-galeri:after{content:"";display:table;clear:both} .recent-galeri .gallerytem{display:block;float:left;position:relative;margin:0 auto 15px auto;overflow:hidden;padding:0;text-align:center;width:100%;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} .recent-galeri .gallerytem:last-child{margin:0 auto} .recent-galeri .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none;width:100%} .recent-galeri .gallerytem .ptitle{background:rgba(255,255,255,.97);display:inline-block;clear:left;font-size:14px;line-height:1.3em;position:absolute;bottom:15px;left:15px;right:15px;color:#888;padding:15px;word-wrap:break-word;text-align:center;backface-visibility:hidden;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);border-top:2px solid #a4b0be;transition:all .2s} .recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,.97);color:#222;border-top-color:#eccc68} .recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s} </style>Selesai.
