Cara Mudah Membuat Recent Post Warna Warni Pelangi

Salah satu cara untuk mempercantik blog yaitu dengan memasang recent post yang terlihat cantik juga. Recent post yang seperti apa sih? Ya, jawabannya adalah recent post warna warni pelangi. Terus, gimana cara membuatnya? Sobat gak usah khawatir! Yuk kita intip bidadari-bidadari dari cara mudah membuat recent post warna warni pelangi, simak ya.

Baca juga cara mudah membuat popular post warna warni

1. Login ke Blogger

2. Pilih Tata Letak ► Tambah Gadget

3. Pilih HTML/JavaScript

4. Masukkan kode dibawah ini ke dalam kolom HTML/Java Script

<style scoped="scoped">

#ptb-repost {

font:normal normal 11px/normal Arial;

color:#333;

margin:0 auto;

padding:0;

min-height:100px;

background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju3xakvEXO6IRuGrvgB-Dltz9_PMNM96Lh2SD8Ko6qAZ47YBypOHl1PU3zWRibUjemFPC97aJqizir8fm9R5FJ5c-gHVLla2t5IJQOydEDA9eGdbPpwzKsn4f02cgH7upjY6MWFiULPjg/s1600/loading.gif') no-repeat 50% 50%;

}

#ptb-repost li {

list-style:none;

margin:0;

padding:8px;

background-color:blue;

border-bottom:1px 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 10px 0 0;

padding:0;

border:none;

background:none;

outline:none;

}

#ptb-repost li a.title {

font:normal normal 12px/normal Oswald;

display:block;

text-decoration:none;

color:#fdfdfd;

}

#ptb-repost li a.title:hover {

text-decoration:none;

color:#ffffff;

}

#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:#052dfa;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://copasange.blogspot.com",

    rp_numPosts = 5,

    rp_thumbWidth = 50,

    rp_numChars = 80,

    rp_sortByLabel = false,

    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEila2-J-H0Rkf84z6U_LeYzFpxu-0RWQkC2u2z6Z9BkjwmlzuDqZSalkizUbATyRhQnLk0VWRTioj49Kw4ZhPD8Kieulin3V9cRqmBbU3am0jd0yxq_Wv8-RnvFeeKoy-CO73xL3ohMskw/s1600/minismallest-img.png",

    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>

Ganti URL warna biru dengan URL sobat sedangkan angka berwarna hijau adalah jumlah postingan

5. Simpan dan lihat hasilnya

Demikian cara mudah membuat recent post warna warni pelangi, semoga dapat membantu dan bermanfaat. Terimakasih atas kunjungannya.

► Copas Sange ◄

Sobat sedang membaca artikel tentang Cara Mudah Membuat Recent Post Warna Warni Pelangi. Jika sobat ada pertanyaan atau pesan mengenai artikel diatas, salurkan pada kolom berkomentar !! Dan untuk mendapatkan tambahan pahala, silahkan LIKE and SHARE ♂

<a href="http://copasange.blogspot.com/2016/05/cara-mudah-membuat-recent-post-warna.html" target="_blank">Cara Mudah Membuat Recent Post Warna Warni Pelangi</a>

:: Salam Blogger ! ::