Cara Mudah Membuat Widget Recent Post/Artikel Terbaru Warna-Warni (Pelangi) Di Blog

1. Login ke akun blogger sobat.
2. Pada bagian Dasbor, sobat pilih Tata Letak/Layout => Tambahkan Gadget/Add Gadget => HTML/Javascript.
3. Masukkan kode berikut.

<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/AVvXsEhLLwOTFluU3TsgmwhFu-rTjyydkK2OnFISYn2kpsjnik9VEHBI3v2Vjr1FSjpKFbjXvVtn9wOGQfTaGYyShrIsLzdrQl-qcCgLC3MbBETbnUPSpzBvPoY2FDQzgD6gQqnv3kAriYtP8LU/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://yazid-gamesoftware.blogspot.com/",
    rp_numPosts = 5,
    rp_thumbWidth = 50,
    rp_numChars = 80,
    rp_sortByLabel = false,
    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSeiAJwpmWyAxkGZqSfHigP0yz4ywva-iBDSWSwHYSa8_mmXHMdOWeNGJkYcjkVvb2hgYCNvoaJ1h1l5ez0vBOzn1rbd3Dr0w9qWDHokRPfyvQ5SPy0maRch72SqDja2PWL9eRjuBvkg/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>

4. Ganti kode berikut dengan URL Blog sobat.

http://yazid-gamesoftware.blogspot.com/

5. Lalu save dan muat ulang laman blog sobat.

Udah dulu ya sob, semoga tutorial saya kali ini bermanfaat bagi sobat, terimakasih sudah mampir ke blog ini sob. Kalau sobat punya unek-unek sampaikan dengan berkomentar ya!

Posted by yazid

Tweet