Blogger 2019 Son Yayınlar Eklentisi - With myAbdurrahim

Blogger 2019 Son Yayınlar / Yazılar Eklentisi - With myAbdurrahim

"myAbdurrahim'in" özel olarak tasarladığı "Blogger 2019 Son Yayınlar Eklentisini" son derece mobil uyumlu ve problemsiz olarak tasarlanmıştır.Oval ve dinamik bir görünüme sahip olan eklenti şeffaf tasarımlığın yanı sıra hiç yorucu kod gerektirmediğinden sitenizin açılış ve var olan hızını, tasarımını etkilemiyecektir."Blogger" sayfanıza aşağıdaki adımları uygulayarak "Son Yazılar Eklentisini" Kurabilirsiniz.

1.Blogger Hesabınıza Giriş Yapın.
2."Tema > HTML'yi" düzenle butonuna tıklayın.
3.Aşağıdaki "CSS" kodunu "</head>" etiketinin bir satır üstüne ekleyin.

<style type='text/css'>
/* Son Yayınlar Eklentisi ZanaLab.com */
.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 8px rgba(0,0,0,0.05);border-radius:10px}
.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,0.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;border-radius:10px;}
.recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,0.56);color:#222;border-top-color:#cc0000}
.recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s;border-radius:10px;height:auto;}
</style>

4. Aşağıdaki "Javascript" kodlarını "</head>" etiketinin bir satır üstüne ekleyin.

<script type='text/javascript'>
//<![CDATA[
// Son Yayınlar Eklentisi ZanaLab.com
function myargrid(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/AVvXsEgM3BF6xSUjfJdfHDPCIyQ5H8HdhUIGyGs6m_nzUdvVcJMOte55-1bhpmtUYig_A6VNOi7WTKrvixGcVMyPVSLitt4P2jXjjRPYZ_t4qr5u7fns2CmzAVlwZVEKRhuVtIGfNgZhWSzx926e/s1600/default.png",s=n.replace("/s72-c/","/w"+myar_thumbs_wid+"-h"+myar_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="'+myar_thumbs_wid+'" height="'+myar_thumbs_hei+'"/>',p=myar_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))};var myar_thumbs_wid = 300; 
var myar_thumbs_hei = 190; 
var myar_title = true; 
//]]>
</script>

5.Yukarıdaki işlemleri yaptıktan hemen sonra "Temayı Kaydet" butonuna tıklayın.
6.Sol menüdeki "Yerleşim" yazısına tıklayarak "Widget Ekleme" alanına geçin.
7.Sağ tarafta "Gadget Ekle" yazısına tıklayarak açılan sayfadan "HTML /Javascript"in hemen yanındaki "+" butonuna tıklayın.
8.Çıkan sayfaya aşağıdaki kodlardan istediğiniz birini yerleştirip, kaydedin işlem bitiyor.

Son Yayınlar "Widget Kodu":

<script src="/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=myargrid"></script>

Son Yayınlar "Etiket" Duyarlı "Widget Kodu":

<script src="/feeds/posts/default/-/Kategori?max-results=3&amp;alt=json-in-script&amp;callback=myargrid"></script>

Demo Kontrol Et