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(‘http://1.bp.blogspot.com/-QaYiqOCLsao/Uypu_bcmtgI/AAAAAAAACy4/NuRzsl7cCc0/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 = “http://1.bp.blogspot.com/-6YRU7gKTkdM/VOajSy76S7I/AAAAAAAAAFY/E3XFIvSayiI/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>

Cara Membuat Recent Post Warna-warni

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

Baca Juga:  Membuat Website Hanya 5 Menit

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

Yuk bantu share. Semoga jadi amal jariyah dengan ikut berbagi ilmu bermanfaat ini. Aamiin.
Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Pin on Pinterest
Pinterest
Share on Tumblr
Tumblr
Share on LinkedIn
Linkedin
Rate this article!

6 Responses

  1. author

    balmut2 years ago

    hasilnya spt apa ya?

    Reply
  2. author

    Asep Solikhin2 years ago

    hasilnya seperti contoh gambar

    Reply
  3. author

    Biljabbaradnan's blog2 years ago

    Wow maksih yah sobat …

    Sangat membantu sekali.
    Sebetulnya ini artikel yang saya cari2 nih sobat

    Terima kasih yah sobat sangat membantu sekali

    Reply
  4. author

    Asep Solikhin2 years ago

    iya, sama-sama. senang bisa membantu

    Reply
  5. author

    hekthatman12 months ago

    keren banget mas designnya simple tapi keren thanks mas

    Reply
  6. author

    Asep Solikhin8 months ago

    Terimakasih. Silakan terapkan ya 🙂

    Reply

Leave a Reply