Oleh
Bungfrangki
·
Tutorial Blogger/blogspot kali ini tentang cara memasang widget recent post (artikel terbaru) berwarna-warni, ala-ala pelangi saat hujan gerimis. Sebetulnya hal ini juga dapat diterapkan pada widget lain seperti widget Popular Posts.
Bagi Anda yang ingin mengkreasi tampilan blog biar kelihatan fresh dan sedikit nor#k, silahkan tambahkan widget recent post bermodel warna-warni berikut ini.
Langkah-langkah pembikinannya adalah sebagaimana berikut:
Login ke Blogger > Theme > Edit HTML
Tambahkan CSS berikut ini di atas kode
Simpan Template
Selanjutnya ialah, klik Tata Letak atau Layout di dashboard Blogger. Lalu tambahkan JavaScript recent post berikut ini pada Sidebar blog.
Add a Gadget > HTML/JavaScript, lalu copy-paste kode ini ke dalam bidang tersebut:
Simpan
Itu!
Bagi Anda yang ingin mengkreasi tampilan blog biar kelihatan fresh dan sedikit nor#k, silahkan tambahkan widget recent post bermodel warna-warni berikut ini.
Memasang Widget Recent Posts tampil Warna-warni
Widget recent post yang dibuat ini adalah versi recent post yang sederhana, tidak menggunakan thumbnail dan meta post (seperti tanggal posting, author dll).Langkah-langkah pembikinannya adalah sebagaimana berikut:
Login ke Blogger > Theme > Edit HTML
Tambahkan CSS berikut ini di atas kode
</style>
(yang pertama)/* Recent Wrapper By Bung Frangki */
#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 + li + li + li + li + li + li + li +li{background:#71264b;width:76%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
#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,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after,
#recent-wrapper 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}
#recent-wrapper ul li a{color:white;text-decoration:none}
Simpan Template
Selanjutnya ialah, klik Tata Letak atau Layout di dashboard Blogger. Lalu tambahkan JavaScript recent post berikut ini pada Sidebar blog.
Add a Gadget > HTML/JavaScript, lalu copy-paste kode ini ke dalam bidang tersebut:
<div id='recent-wrapper' class='recent-wrapper'>
<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>
Simpan
Perhatian!
Pada konfigurasi CSS dan JavaScript recent post hanya menempatkan 10 konfigurasi jumlah postingan saja. Jika Anda ingin menampilkan postingan lebih banyak dari itu pada widget ini, maka tampilannya tidak menjadi ganteng lagi. Diyakini akan lepas unsur pelanginya.
Pada konfigurasi CSS dan JavaScript recent post hanya menempatkan 10 konfigurasi jumlah postingan saja. Jika Anda ingin menampilkan postingan lebih banyak dari itu pada widget ini, maka tampilannya tidak menjadi ganteng lagi. Diyakini akan lepas unsur pelanginya.
Itu!
Share this
Posting Komentar
Komentar Blogger telah ditutup. Jika ada yang perlu disampaikan terkait konten ini, silahkan kirim pesan lewat laman kontak.