Skip to content Skip to sidebar Skip to footer

Cara Membuat Post Terbaru di Gedget Blogger Responsive Bergambar

Anangzd.com - Cara Membuat Post Terbaru di Gedget Blogger Responsive. Di postingan kali ini saya akan membuat dan membagikan kode HTML Post Terbaru di blogger.

Post Terbaru di Widget kali ini sudah Responsive dan di sertai Gambar yang sangat bagus enak nyaman dipandang mata.

Jika kalian tertarik sialhkan kalian baca arikel ini dari awal hingga akhir agar tidak ada kesalahaan saat penerapan pada Blogger.
Membuat Widget Recent Post di lengkapi Thumbnail


Kode Post Terbaru di Gedget

Di pasang pada Tata Letak Widget Box HTML/JavaScript

<script type="text/javascript">
var posts_no = 10;
var showpoststhumbs = true;
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}
var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'">'+i+"</a></div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script src="https://www.anangzd.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

NB. Ubah warna merah alamat situs Anda dan angka 10 jumlah tayang post terbaru.

Di pasang pada Tema di atas kode ]]></b:skin> atau</style>

<style type="text/css">
ul.recent-posts-container{list-style:none;padding:0px}ul.recent-posts-container li{display:inline-block;width:100%;padding:10px 0;border-bottom:1px solid #e3e3e3}.recent-posts-container li:last-child{border-bottom:0}.recent-posts-container a:hover{text-decoration: underline}img.recent-post-thumb{width:72px;height:72px;float:left;margin-right:5px;border-radius:10%}.recent-posts-container a{text-decoration:none}.recent-posts-container a:hover{color:#222}.recent-post-title a{font-size:14px;color:#000}
</style>


Cara Memasang Kode Post Terbaru di Gedget

1. Login www.blogger.com
2. Pilih menu Tata Letak
3. Pilih HTML/JavaScript
4. Paste kode di atas pad Box Gedget
memasang kode recent post terbaru di blog

5. Simpan

Cara Memasang Kode CSS Post Terbaru

1. Login www.blogger.com
2. Pilih menu Tema
3. Pasang kode CSS di antara ]]></b:skin> atau</style>
membuat post terbaru di blogger

4. Simpan

Untuk melihat hasilnya silahkan Refrash halaman utama blog Anda. Dengan adanya tips tutorial cara Memasang Post Terbaru di Gedget Blogger Responsive ini bermanfaat. Cara Membuat Widget Post Terbaru di sertai Gambar. Terima kasih sudah berkujung di www.anangzd.com.
Anang_at
Anang_at Belajar dari hal kecil, ingin menjadi orang Berhasil. Optimis, pasti bisa mencapai apa yang di inginkan.

Post a Comment for "Cara Membuat Post Terbaru di Gedget Blogger Responsive Bergambar"