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. Silahkan anda kunjungi Pasang Post Terbaru dan Komentar terbaru dari Team Blogger. Satu lagi tips untuk menampilkan Post terbaru yaitu Recent Post dengan Thumbnal Widget dari Kiranthi. Masing-masing tips diatas memiliki kelebihan dan kekurangan, silahkan anda coba untuk melihat kelebihan dan kekurangannya tersebut.
Jika tips diatas kurang menarik minat anda, 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://epg-studio.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://epg-studio.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.

Penting :

• File Javascript dari kedua tips diatas merupakan file simpanan EPG Studio, Silahkan anda simpan menjadi milik anda sendiri. Caranya kunjungi : Upload File di Google Sites

Read more: http://epg-studio.blogspot.com/2011/02/menampilkan-postingan-terbaru-dalam.html#ixzz1GJz4P8Br

Posted in: Tutorial