Cara Membuat Recent Post Warna-warni Cara Membuat Recent Post Warna-warni - Pusat Semangat

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

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


Jangan lewatkan sajian menarik lainnya ya^^


6 Responses to "Cara Membuat Recent Post Warna-warni"

  1. hasilnya spt apa ya?

    ReplyDelete
  2. hasilnya seperti contoh gambar

    ReplyDelete
  3. Wow maksih yah sobat ...

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

    Terima kasih yah sobat sangat membantu sekali

    ReplyDelete
  4. iya, sama-sama. senang bisa membantu

    ReplyDelete
  5. keren banget mas designnya simple tapi keren thanks mas

    ReplyDelete

Ada Pertanyaan atau Komentar?

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel