Selamat pagi, siang dan malam pembaca sekalian. Pada postingan kali ini, kembali saya ingin membahas tutorial Blogging yaitu cara membuat widget Recent Post yang simpel, tanpa gambar, hanya berupa judul namun disertai nomor dengan tampilan yang cukup keren. Tampilan widget sederhana seperti ini tentunya sangat disukai oleh para blogger yang menghendaki blog dengan loading cepat dan ringan namun tetap tampil keren dengan kelengkapan navigasi di dalamnya.
Widget Recent Post merupakan salah satu fitur kelengkapan blog yang populer di kalangan blogger. Widget penting ini sering dipasang untuk menampilkan daftar artikel/postingan terbaru yang ada di suatu blog. Biasanya, para blogger meletakkan widget ini pada bagian sidebar blog agar pembaca dapat langsung melihatnya ketika sedang mengunjungi salah satu postingan di blog tersebut. Harapannya, tentu saja agar pembaca tertarik untuk mengunjungi daftar postingan tersebut.
Sebetulnya memang sudah ada beberapa artikel di blog ini yang membahas tentang cara membuat widget Recent Post/ Artikel Terbaru. Meski begitu, tidak bosan-bosannya saya ingin berbagi kembali tutorial serupa namun tentunya dengan tampilan berbeda. Sekali lagi, widget Recent Post kali ini memiliki tampilan sederhana (tanpa gambar) sehingga tidak akan memberatkan loading blog. Meskipun sederhana, widget ini dilengkapi dengan nomor sehingga tampilannya cukup keren dan elegan. Tampilan screenshotnya seperti dibawah ini:
Bagaimana cara membuatnya?. Silahkan simak dan ikuti langkah-langkah pemasangannya di bawah ini.
1. Buka akun blogger anda.
2. Pilih menu tema dan klik edit html.
3. Silahkan cari kode ]]></b:skin> atau </style> kemudian letakkan kode CSS berikut ini di atasnya.
/* Recent post */#sidebar h2 {padding:10px;margin-bottom:0px 0 0 0;background:#068488;color:#eee;}ul#recent-post{list-style:none;background:#fff;margin:0 auto;padding:0;}li.recent-post{counter-increment:num;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 34px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em}li.recent-post:before{content:counter(num);display:block;position:absolute;font-size:18px!important;top:7px;left:9px;font-weight:700;font-style:italic;color:#f66!important}li.recent-post a{color:#1c1207;font-size:13px;font-weight:600}li.recent-post a:hover{color:#c00}
4. Selanjutnya gulir lagi ke bawah dan cari kode </body>. Jika sudah ketemu, letakkan kode berikut ini di atasnya.
<script>//<![CDATA[numPosts = 10;function recentPosts(a){if(document.getElementById("recent-post")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-post");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-post"><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>
Keterangan:
- Angka 10 untuk jumlah postingan yang hendak ditampilkan, silahkan atur sesuai selera.
5. Setelah template disimpan, silahkan kembali ke dashboard blogger dan pilih menu layout (tata letak).
6. Klik tambahkan gadget (add gadget) dan pilih html/ Javascript.
7. Setelah terbuka, silahkan beri judul "Recent Post", atau "Artikel Terbaru", kemudian letakkan kode berikut ini ke dalam kotak yang tersedia.
<div class='recent-post'><ul id="recent-post"></ul></div>
8. Silahkan simpan dan lihat hasilnya.
Kalau anda merasa ribet dengan cara di atas, ingin yang tinggal pasang pada menu tata letak (tambahkan gadget) tanpa harus masuk edit html template, silahkan gunakan kode berikut ini dan letakkan pada pilihan html/javascript.
<style>#sidebar h2 {padding:10px;margin-bottom:0px 0 0 0;background:#068488;color:#eee;}ul#recent-post{list-style:none;background:#fff;margin:0 auto;padding:0;}li.recent-post{counter-increment:num;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 34px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em}li.recent-post:before{content:counter(num);display:block;position:absolute;font-size:18px!important;top:7px;left:9px;font-weight:700;font-style:italic;color:#f66!important}li.recent-post a{color:#1c1207;font-size:13px;font-weight:600}li.recent-post a:hover{color:#c00}</style><div id='recent-post'><ul id="recent-post"></ul><script>//<![CDATA[numPosts = 10;function recentPosts(a){if(document.getElementById("recent-post")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-post");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-post"><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>
Hasilnya akan sama saja, karena memang berasal dari kode script yang sama. Demikian. Semoga bermanfaat.
