Cara Membuat Recent Post Di Blogspot

YMobile4 : Recent Post atau Post Terbaru adalah Widget yang berfungsi menampilkan post terbaru dalam sebuah website atau blog, dengan metode java scrip dan fiture RSS hal ini membantu meramaikan sebuah blog yang anda kelola, tentunya pengunjung akan mengetahui postingan terbaru anda walaupun sedang membaca sebuah artikel karna memang ditempatkan pada sebuah widget yang ditayangkan dalam semua halaman kecuali halaman statistik. 



Umumnya para blogger mamakai widget recent post pada blog yang mereka kelola, dengan demikian blog tidak kerkesan sepi akan artikel, namun anda harus tetap memperhatikan jumlah widget yang ada dalam blog anda karna semakin banyak menggunakan widget dapat mempengaruhi loading website terlebih penggunaan gambar yang berlebihan, bagi pengunjung yang memiliki kecepatan internet yang memadai tentu saja hal ini tidak menjadi sebuah kendala, namun bagaimana jika pengunjung memiliki kecepatan internet yang pas-pasan, bisa saja mereka kabur dan mencari website lain, saya sendiri menyarankan anda menggunakan widget yang seperlunya saja seperti Populer Post, Recent Pos, Lebel , dan Arsip. 
Dalam artikel ini terdapat 2 (Dua) Recent Post yaitu Recent Post tanpa gambar thumnail dan Recent Post Bergambar Thumnail, berikut tutorial untuk keduanya.

Cara Membuat Recent Post di Blogspot Tanpa Gambar 

  1. Hal yang pertama harus kamu lakukan adalah login sebagai Admin pada blog kamu
  2. Pada bagian menu masuk ke bagian Tata Letak
  3. Tambahkan Gadget atau Widget baru pada panel tata letak dengan posisi seperti yang kamu inginkan, umunya di buat pada bagian samping kanan 
  4. Pada jendela pop up yang muncul bertuliskan Tambahkan Gadget pilih HTML/JavaScript : Tambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda. 
  5. Isi Judul Widget Post Terbaru atau Recent Post 
  6. Pada bagian Konten letakkan kode java scrip dibawah ini
<script>//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<8;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]></script>
  • Pada angka 8 yang saya merahi kamu dapat menggatinya sesuai jumlah post sesuai keinginan kamu, kemudian simpan dan periksa beranda blog kamu

Cara Membuat Recent Post di Blogspot Bergambar

  • Login sebagai Admin pada blog kamu
  • Pada bagian menu masuk ke bagian Tata Letak
  • Tambahkan Gadget atau Widget baru pada panel tata letak dengan posisi seperti yang kamu inginkan, umunya di buat pada bagian samping kanan
  • Pada jendela pop up yang muncul bertuliskan Tambahkan Gadget pilih HTML/JavaScript : Tambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda. 
  • Isi Judul Widget Post Terbaru atau Recent Post
  • Pada bagian Konten letakkan kode java scrip dibawah ini
<style type='text/css'>
img.recent_thumb {padding:1px;width:75px;height:75px;border:1px solid silver;border-radius:20%;float:left;margin:5px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='https://cdn.rawgit.com/dedi96/keneono/7abd0c02/recentpost.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
<script src='https://ymobile4.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
  • Ganti URL yang saya beri warna merah https://ymobile4.blogspot.com dengan URL Blog kamu 
  • Untuk pengaturan lainnya yang saya beri warna merah kamu dapat menggantinya sesuai keinginan kamu
Hal yang harus diperhatikan tampilan recent post tanpa menggunakan gambar akan menyesuaikan CSS pada template blog yang kamu gunakan sementara itu untuk recent post menggunakan gambar mungkin bekerja kurang baik pada sebuah blog yg di kostum domain atau costum domain yang dibumbui https, jika ada pertanyaan terkait silahkan tinggalkan komentar kamu di kolom komentar , Saya Amin Seven terimakasih atas kunjungannya

You might also like

0 Comments


EmoticonEmoticon