Membuat Sidebar Widget Recent Post Pelangi (Warna-warni)

Membuat recent post warna-warni

Seperti gambar diatas, recent post pelangi ini tampil dengan berbeda warna di tiap judul artikel. Recent post pelangi ini sangatlah sederhana, tidak mencantumkan gambar artikel namun hanya menampilkan judul artikel tidak seperti artikel Recent Post with Thumbnail yang sudah saya posting sebelumnya.

Jika anda tertarik membuatnya anda bisa menerapkannya dengan mengikuti langkah-langkah di bawah ini:

Membuat Recent Post Pelangi


Buka template editor dan tambahkan CSS berikut tepat diatas </style>, Umumnya ada beberapa kode </style>. Pilih kode yang pertama (paling atas)

/* Recent Post Pelangi By TrikRicky */
#recent-wrapper {display:block;position:relative;overflow:hidden;font-size:15px}
#recent-wrapper ul {margin:0;padding:0;list-style-type:none;}
#recent-wrapper ul li {position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#recent-wrapper ul li:first-child {background:#E11E28;width:100%}
#recent-wrapper ul li:first-child:after {content:"01";}
#recent-wrapper ul li:first-child + li {background:#FD3C03;width:97%}
#recent-wrapper ul li:first-child + li:after {content:"02";}
#recent-wrapper ul li:first-child + li + li {background:#FECB09;width:94%}
#recent-wrapper ul li:first-child + li + li:after {content:"03";}
#recent-wrapper ul li:first-child + li + li + li {background:#6EBE27;width:91%;}
#recent-wrapper ul li:first-child + li + li + li:after {content:"04";}
#recent-wrapper ul li:first-child + li + li + li + li {background:#149A48;width:88%;}
#recent-wrapper ul li:first-child + li + li + li + li:after {content:"05";}
#recent-wrapper ul li:first-child + li + li + li + li +li {background:#15d3c3;width:85%}
#recent-wrapper ul li:first-child + li + li + li + li +li:after {content:"06";}
#recent-wrapper ul li:first-child + li + li + li + li + li +li {background:#288abb;width:82%}
#recent-wrapper ul li:first-child + li + li + li + li +li +li:after {content:"07";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li +li {background:#863e86;width:79%}
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after {content:"08";}
#recent-wrapper ul li:first-child:after,
#recent-wrapper ul li:first-child + li:after,
#recent-wrapper ul li:first-child + li + li:after,
#recent-wrapper ul li:first-child + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + 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}
#recent-wrapper ul li a {color:white;text-decoration:none}

Simpan template diatas dan tambahkan Kode Berikut didalam Gadget baru untuk memunculkan widget recent post di sidebar.

<div id='recent-wrapper' class='recent-wrapper'>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
numPosts = 8;
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>

Didalam CSS diatas hanya terdapat 8 kode warna untuk menghiasi tiap warna tiap judul postingan pada widget ini, untuk menjaga keindahan warna tersebut, sebaiknya widget ini jangan menempatkan artikel lebih dari 8.

Namun jika anda ingin menempatkan Artikel Recentpost ini lebih dari 8, misalnya 10 artikel, anda bisa menambahkan kembali css tersebut dengan warna baru dengan menambahkan baris baru dengan menambahkan + li seperti kode yang ditandai merah diatas dan mengganti kode yang ditandai biru sesuai jumlah Artikel yang anda buat dalam CSS.

Sekian tentang Cara Membuat Recent Post pelangi kali ini, semoga bermanfaat.
Advertisement
Advertisement

Diam lebih baik dari pada berdebat dengan orang‐orang bodoh.