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=4merupakan 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.
- Masuk ke Blogger.
- Pilih Rancangan bagian Elemen Halaman.
- Klik tambah Gadget.
- Pilih HTML/Javascript.
- Copy salah satu kode script diatas dan paste pada kolom yang tersedia.
- Klik tombol Simpan.
Postingan
