Menambahkan Random Post / Artikel Acak pada Widget Blog. Fungsi dari pada widget ini tidak lain untuk menampilkan Artikel artikel yang sudah kirta postingkan sebelumnya tampil dalam satu rangkaian judul posting, tujuannya adalah agar pengunjung atau pembaca tertarik dengan artikel artikel kita sebelumnya.
Mengenai widget random post atau artikel acak ini ada banyak sekali tampilan tampilan yang menarik, salah satunya yang akan kita coba saat ini, yaitu Random Post Hanya Menampilkan Judul Posting Saja. Cara ini terbilang sangat sederhana karena tidak harus memakai kode CSS. Kita hanya akan memakai kode skrip Html yang bisa kita letakkan di Sidebar ataupun di dalam posting kita.
Berikut kode yang akan kita pakai. Silahkan di Copy kode berikut:
0. [ Blok satu kali Klik ]
<style scoped='' type="text/css">Keterangan :
#malesdesign-random ul {list-style:none; margin:0; padding:0} #malesdesign-random li {display:block; clear:both; overflow:hidden; list-style:none;border-bottom:1px solid #eee; word-break:break-word; padding:3px 0; margin:0;}
#malesdesign-random li:last-child {border-bottom:0;}
#malesdesign-random li a{color:#222;}
#malesdesign-random li a:hover{color:#cc0000;
text-decoration:underline} </style>
<div id='malesdesign-random'>Loading...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'http://malesdesign.blogspot.com/',
maxResults = 3,
containerId = 'malesdesign-random';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;}
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;}
return arr;}
function malesdesignRandomPosts(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
// console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');}
function randomPosts(json) {
var link, ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';}
skeleton += '<li><a href="' + link + '">► ' + entry[i].title.$t + '</a></li>';}
ct.innerHTML = skeleton + '</ul>';}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=malesdesignRandomPosts"></scr' + 'ipt>');
//]]>
</script>
color:#222 adalah warna tampilan judul
hover{color:#cc0000 adalah warna judul ketika disentuh kursor
var homePage = 'http://malesdesign.blogspot.com/' ganti dengan Url blog Anda.
maxResults = 3 adalah jumlah artikel yang akan ditampilkan.
► adalah bullet list, jika widget Anda sudah ada maka hapus saja gambar tsb.
1. Pada dasboard pilih Tata Letak
2. Klik Tambahkan Gadget / Widget pada sidebar
3. Pilih HTML/JavaScript
4. Paste kode Html diatas didalam kotak widget
5. Simpan dan lihat hasilnya
Langkah diatas jika kita meletakkannya pada sidebar atau pada widget blog. Lalu bagaimana kalau kita letakkan didalam posting blog kita.?? Berikut caranya :
1. Masih memakai kode skrip Html diatas, silahkan di copy
2. Kemudian masuk ke Entri Post / Tambahkan Entri
3. Ganti Mode Compose ke Mode Html
4. Pastekan Kode tersebut
5. Widget akan keluar didalam posting ketika kita mempublikasikannya.
Catatan : Widget ini hanya berfungsi satu pemakaian kode, artinya kalau kita memasang 2 widget atau memasang satu di posting dan satunya lagi di sidebar,maka random post akan muncul salah satu saja.
Itulah artikel mengenai Cara Membuat Random Post Hanya Judul. Semoga bermanfaat. Simak juga Artikel berikutnya mengenai : Membuat Random Post dengan Thumbnail Gambar
No SPAM...!!!