MENAMPILKAN POSTINGAN TERBARU DALAM BENTUK SLIDE

Banyak cara untuk menampilkan Post terbaru (Recent Post), anda hanya tinggal memilih tampilan yang paling anda minati. Team Blogger sendiri telah menyiapkan sebuah widget untuk menampilkan Post terbaru tersebut. Coba anda terapkan tips dibawah ini yaitu Post Terbaru dengan gaya slide.
Ada dua tips yang dapat anda pilih :

Tips Pertama

Contoh Tampilan :

• Kode yang digunakan :
  
  
  <script src="https://sites.google.com/site/epgstudiosite/javascript/postbaru.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:95%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:95%px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://lh3.googleusercontent.com/_1j80TgNqd_8/TWM-EhAZ9TI/AAAAAAAABxk/oFVWP0xWtvU/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://jantoel007.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/epgstudiosite/javascript/postbaru2.js' type='text/javascript'></script>
</div>
• Keterangan :
• Kode dengan warna kuning dapat anda ganti dengan dengan tampilan yang anda inginkan.
• Jika belum memahami kode diatas, fokuskan pada kode ini :home_page = "http://jantoel.blogspot.com/"; ganti urlnya dengan url blog anda.
• Kode : limitspy=4 merupakan jumlah post baru yang ditampilkan dalam slide.
• kode : numposts = 10; merupakan jumlah postingan yang tampil pada slide yang tampilnya secara bergantian.
• Kode lainnya silahkan anda coba sendiri untuk mendapatkan tampilan terbaik.

Tips Kedua.

Contoh Tampilan :

• Kode script yang digunakan :
  
  
  <style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery.min.js?revision=3"></script>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/Recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 250;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
• Keterangan :
• Kode var numposts = 5; merupakan jumlah post yang tampil pada slide
• Kode var numchars = 250; merupakan jumlah karakter/kata yang ditampilkan.

Cara memasukan ke Blog.

1. Masuk ke Blogger.
2. Pilih Rancangan bagian Elemen Halaman.
3. Klik tambah Gadget.
4. Pilih HTML/Javascript.
5. Copy salah satu kode script diatas dan paste pada kolom yang tersedia.
6. Klik tombol Simpan.