Cara Membuat Widget Recent Post Warna-Warni/Pelangi di Blog

Cara Membuat Widget Recent Post Pelangi/Warna-Warni di Blog - Hay sobat, kali ini saya akan share widget blogger lagi! Setelah kemarin saya share widget recent post dengan gambar thumbnail dan tooltip, di kesempatan kali ini saya juga akan share widget recent post lagi! Widget Recent Post adalah widget yang berisi artikel/postingan terbaru dari blog anda.

Mungkin kalian sudah biasa melihat widget popular post warna-warni, namun pernahkah anda melihat widget recent post / artikel terbaru yang dibuat seperti widget popular post warna-warni sehingga memiliki warna tersendiri disetiap postingannya atau biasa disebut widget recent post warna-warni? Pasti jarang kan? Nah, pada postingan kali ini saya akan share widget tersebut, jadi simak dengan baik ya :) 

Oh ya, baca juga widget blogger lain disini dan baca juga artikel lain tentang :

• Widget recent post dengan thumbnail dan tooltip
• Widget recent post bergerak
• Cara mendesain widget popular post menjadi warna-warni
• Cara mendesain label blog menjadi warna-warni

Saya menemukan widget ini di blognya Ana Sriwahyuni dan juga widget ini sebenarnya dibuat oleh Taufik Nurrohman lalu dimodifikasi oleh mbak ana sehingga lebih SEO Friendly dan Warna-Warni lalu sedikit saya modifikasi lagi untuk menghilangkan margin yang menurut saya tidak terlalu penting.

Berikut penampakan widgetnya :

Berminat untuk memasang widget ini? Mari ikuti tutorial saya kali ini :)

Cara Membuat Widget Recent Post Warna-Warni di Blog :

1.) Pergi ke dasbor blogger, lalu ke menu Tata Letak -> setelah itu klik Tambahkan Gadget -> lalu pilih HTML/Javascript.

2.) Masukkan kode dibawah ini :

<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/AVvXsEiSzPxBPUYlyU_3mNGipUjwy8ImcHH9aInqsBHbA8RVwyMvomylCvxBPLcvrJYQYtk0YB4TLLSlNpeg6K4e1Xyz7xrJ43vyJrl2PTyExcHzVFi-f7YK06AjhqRT2VGRwIIIQHDXSTS_H9s/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:0;
padding:8px;
background-color:white;
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:#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.mas-aldi.com",
    rp_numPosts = 5,
    rp_thumbWidth = 50,
    rp_numChars = 80,
    rp_sortByLabel = false,
    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdA2mS0V-cbw1dYYt5dK5-8Vha_Xl3ZRLHRVKamT3TzcqdA3ycWTc_UonybJmTfC4172BKKZCzlpDhoutZpiF1Scofr3M27OirBp7EJM_YCrEGqpd_lYBzv_H5uBLJDCfTLWE2ehhZY3E/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>

Keterangan :

• Ganti www.mas-aldi.com dengan link blog kamu.

3.) Klik simpan & Selesai.

Cara Membuat Widget Recent Post Warna-Warni/Pelangi di Blog 2014-12-20T13:37:00+07:00 Rating: 4.5 Diposkan Oleh: Anonymous