Membuat recent post blog terlihat professional - Salah satu kekurangan bagi blogger pemula seperti saya ini adalah pemilihan warna, terkadang karena ingin satu menu atau widget terlihat menonjol kita mewarnainya dengan sangat mencolok sehingga warna widget satu dengan yang lain saling bertabrakan dan tidak selaras. Nah bagi kamu yang menginginkan tampilan blognya terlihat lebih professioanl coba widget recent post ini


Membuat recent post blog terlihat professional

Buka blogger.com lalu silahkan log in dengan akun google kamu, setelah berhasil masuk blogger.om silahkan pilih nama blog yang akan kamu berikan recent post

Langkah selanjutnya pilih Thema, Edit HTML masukan kode CSS dibawah ini sebelum kode ]]></b:skin>  atau sebelum kode </style>

#recentpoststyle{display:block;position:relative;overflow:hidden;font-size:15px}
#recentpoststyle ul{margin:0;padding:0;list-style-type:none;}
#recentpoststyle ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#recentpoststyle ul li:first-child {background:#f0f0f0;width:100%}
#recentpoststyle ul li:first-child:after{content:"01";}
#recentpoststyle ul li:first-child + li{background:#f0f0f0;width:100%}
#recentpoststyle ul li:first-child + li:after{content:"02";}
#recentpoststyle ul li:first-child + li + li{background:#f0f0f0;width:100%}
#recentpoststyle ul li:first-child + li + li:after{content:"03";}
#recentpoststyle ul li:first-child + li + li + li{background:#f0f0f0;width:100%;}
#recentpoststyle ul li:first-child + li + li + li:after{content:"04";}
#recentpoststyle ul li:first-child + li + li + li + li{background:#f0f0f0;width:100%;}
#recentpoststyle ul li:first-child + li + li + li + li:after{content:"05";}
#recentpoststyle ul li:first-child + li + li + li + li +li{background:#f0f0f0;width:100%}
#recentpoststyle ul li:first-child + li + li + li + li +li:after{content:"06";}
#recentpoststyle ul li:first-child + li + li + li + li + li +li{background:#f0f0f0;width:100%}
#recentpoststyle ul li:first-child + li + li + li + li +li +li:after{content:"07";}
#recentpoststyle ul li:first-child + li + li + li + li + li + li +li{background:#f0f0f0;width:100%}
#recentpoststyle ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}
#recentpoststyle ul li:first-child + li + li + li + li + li + li + li +li{background:#f0f0f0;width:100%}
#recentpoststyle ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
#recentpoststyle ul li:first-child + li + li + li + li + li + li + li + li +li{background:#f0f0f0;width:100%}
#recentpoststyle ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
#recentpoststyle ul li:first-child:after,
#recentpoststyle ul li:first-child + li:after,
#recentpoststyle ul li:first-child + li + li:after,
#recentpoststyle ul li:first-child + li + li + li:after,
#recentpoststyle ul li:first-child + li + li + li + li:after,
#recentpoststyle ul li:first-child + li + li + li + li + li:after,
#recentpoststyle ul li:first-child + li + li + li + li + li + li:after,
#recentpoststyle ul li:first-child + li + li + li + li +li + li +li:after,
#recentpoststyle ul li:first-child + li + li + li + li +li + li + li +li:after,
#recentpoststyle ul li:first-child + li + li + li + li +li + li + li +li +li:after
{position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700}
#recentpoststyle ul li a{color:#222;text-decoration:none}

Sedikit custom :

Jika ingin terlihat warna warni silahkan ganti kode #f0f0f0 dengan kode warna yang kamu sukai, lihat tabel kode warna disini
Jika ingin tersusun seperti tangga silahkan rubah kode width:100% nomor dua menjadi 98% nomor 3 menjadi 96% dan seterusnya sampai nomor 10

Simpan thema, lalu pilih tata letak, tambah widget baru , pilih widget Java Script lalu pastekan kode dibawah ini

<div id='recentpoststyle' class='recentpoststyle'>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
</div>

Coba widget popular post warna warni disini
Simpan kembali dan silahkan lihat hasilnya

Demikianlah cara Membuat recent post blog terlihat professional, semoga bermanfaat
No comments