Cara Membuat Recent Post Warna-warni

Setelah kita mempelajari cara membuat blog gratis dengan blogspot, pasti Anda juga menginginkan blog yang telah dibuat tampil lebih menarik dan elegan. Dengan tampilan yang cantik membuat para pengunjung menjadi betah dan akan kembali lagi mengunjungi blog kita.

Salahsatunya adalah dengancara membuat recent post post dengan warna pelangi. Dengan membuat recent post warna-warni seperti langi, blog yang kita miliki semakin tampil elegan. Cara membuat recent post pelangi juga tergolong mudah. Kita tingga menuju tata letak lalu menambah gadget kemudian pilih </> HTML/Java Script. Baca Panduan Memasang Widget Java Script

Belum selesai...
Langkah selanjutnya adalah memasang scriptnya yaitu:
1. Copy script berikut ini

<style scoped="scoped">
#ptb-repost {
font:normal normal 11px/normal Arial;
color:Black;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGS92dJIkQrRc3q-hY425xeN7hyphenhyphen4dtepMIy5WAu27yvzr6gTBNiiyg4g1gKwBFA3Us5Qys1M2O0j7ao5uAvHC3JGbBcw60FqDUXm53_ngKYJ4b0HMLp8agUeCVlOczNH7NZbE9eU-Fmso/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:2;
padding:8px 5px ;
background-color:white;
border-bottom:0px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 0px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:bold normal 12px/normal Arial;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#B2B2B2;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:0%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:0%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:0%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:0%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:0%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:0%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:0%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:0%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:0%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:00%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://www.pusatsemangat.blogspot.com",
    rp_numPosts = 5,
    rp_thumbWidth = 70,
    rp_numChars = 75,
    rp_sortByLabel = false,
    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYX-lb89vDVl1dcAiUQX3aHpcN0tEk6WLwlHHIM32jaziwJZeLCGKAr9C7m4iIOpXnuR0oCs2FZGv7kWmSLS5z-6AibzTE9R4J1vQDzDRXIWbCSJb1nIugo3DqccVyzoK0mRcWv9YzWzoa/s1600/sun.jpg",
    rp_newTabLink = false,
    rp_loadTimer = "onload";
//]]>
</script>
<script src='https://mas-aldi.googlecode.com/svn/trunk/js/rp-warna-warni.js' type='text/JavaScript'></script>

2. Paste/tempelkan pada Gadget yang sudah disiapkan tadi
3. Ganti dengan alamat blog Anda
4. Menampilkan jumlah post, lebar gambar, dan jumlah tulisan
5. Menampilkan gambar otomatis jika posting tidak disertakan gambar
6. Simpan dan lihat hasilnya

Begitulah cara membuat recent post berwarna-wari seperti pelangi. Silakan praktikkan pada blog Anda. Sesi lainnya baca juga cara membuat popular post warna-warni agar blog Anda seimbang dan cantik. Saksikan tips blogging lainnya

Tweet