Widget Artikel Terkini (Recent Post)

Okay hari ni aku nak berkongsi dengan rakan-rakan blogger sekalian 1 widget yang berkepentingan dan wajib ada didalam blog u all, tak lain tak bukan adalah widget "Artikel Terkini / Recent Post". Pasai apa wajib ?

Wajib tu sebenarnya bergantung pada u all sendirilah. Sebabnya widget ni mampu meningkatkan "Page View" artikel-artikel lama dalam blog u all tu.

Okay, sebenarnya widget ni asalnya adalah widget "Recent Post" untuk memaparkan artikel terkini mengikut label yang disetkan. Tapi aku dah ubah kepada jenis yang memaparkan feed blog. Ini adalah kerana versi asal hanya boleh memaparkan 22-25 artikel sahaja. Jadi aku telah tweak widget ni mengikut citarasa aku sendiri.

Okay dah ar tu jom ikuti langkah-langkah installation widget ni.

Cara Install Widget Artikel Terkini.

Pergi ke Layout.
Add Widget > HTML/JavaScript
Copy and Paste code di bawah ni.
Klik "SAVE". Jangan lupa ikuti arahan untuk customize widget terlebih dahulu sebelum save.

<style>
#recentposts ol {
border : medium none;
margin : 3px 5px 0px 28px;
padding : 0;display:block;
}

#recentposts ol {
font-size: 13px;
font-variant:small-caps;
font-family: Georgia, &#39;Times New Roman&#39;, Times, serif;
text-align:justify;
display:block;
margin-bottom:5px;
}

#recentposts ol img.thumbnail {
border: 1px solid #DDD;
padding: 2px;
background-color: white;
float: left;
margin: 0 8px 0 0;
display:yes;
}

.recentposts ol a:link, .recentposts ol a:visited, .recentposts ol a:active {
display: block; 
color: #727272; 
padding: 8px; 
background-image: none !important;
display:block;
} 

#recentposts ol span.meta {
display: block;
font-size: 10px;
text-transform: uppercase;
color: #777;
line-height: 20px;
}
</style>
<div  id="recentposts"><ol>
<script type="text/javascript" src="http://yourjavascript.com/22683011251/recent.js"></script>
<script style='text/javascript'>
var numposts = 1000;
var showpostthumbnails = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
</script>
<script src='http://www.sembangcyber.com/feeds/posts/default?max-results=1000&alt=json-in-script&callback=recent'></script>
</ol></div>

Customize:

Sila tukar www.sembangcyber.com dengan url blog u all sendiri.
1000 tu adalah jumlah bilangan artikel yang hendak dipaparkan. u all boleh ubah atau biarkan jer angka 1000 tu. Tapi kalau u all nak paparkan kesemua artikel. Sila guna fungsi scroll.

Cara Memasukkan Fungsi Scroll.

Okay cara yang aku gunakan adalah dengan menge-hack widget "Artikel Terkini/Recent Post" di bahagian "Edit HTML". Apa yang u all perlu buat adalah:

Selepas selesai dengan langkah memasukkan widget. Sila pergi ke "Template" > "Edit HTML" > Tick "Expand Widget Template" > Ctrl + F, sila cari title widget artikel terkini u all tu dan cari barisan code <div class='widget-content'>.
Selepas jumpa code berkenaan. Sila tambah style='overflow:auto;height:300px;'. Code berkenaan akan menjadi seperti berikut:

<div class='widget-content' style='overflow:auto;height:300px;'>

Credit to: Smashing Tips.

Pages