Widget Random Post Untuk Papar Entri Lama Secara Rawak

Widget untuk papar post rawak. Ada yang bertanya kepada saya bagaimana nak senaraikan entri-entri lama secara rawak di sidebar blog. Jika ada yang tidak tahu, saya menggunakan widget random post menggunakan script tertentu. In Sha Allah, buat anda yang mungkin nak tahu cara-caranya atau kod HTML bagi widget random post ini, saya akan kongsikan di dalam entri ini.

Widget paparkan entri-entri lama secara rawak ini anda boleh tetapkan berapa jumlah entri yang mahu anda senaraikan. Anda boleh letakkan widget ini samada di bahagian sidebar, mahupun di bawah entri blog. Apa yang anda perlu lakukan adalah meletakkan kod HTML di lokasi yang betul.

Widget Random Post Papar Entri Lama Secara Rawak

Saya suka menggunakan widget ini adalah disebabkan mudah untuk saya customize sesuai dengan penampilan blog saya.

Anda hanya perlu salin tampal (copy-paste) kod HTML di bawah ini di mana-mana bahagian anda mahu entri rawak blog anda dipaparkan. Pastikan anda tukar URL dengan URL blog anda, dan pastikan anda masukkan jumlah-entri di dalam kod HTML di bawah ini.

<script> //<![CDATA[ var homePage = "URL-Blog-ANDA", numPosts = JUMLAH-ENTRI; function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-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+='<b> <li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li> </b>'}ct.innerHTML=content}}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}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post); //]]> </script>

Jika anda ingin cantikkan sedikit penampilan widget ini, anda boleh masukkan sedikit sentuhan rekabentuk seperti warna menerusi kod CSS. Boleh ambil contoh CSS untuk widget random post ini seperti di bawah.

/*Custom Random Post*/ .RandomPosts ul,.RandomPosts li,.RandomPosts li img,.RandomPosts li a,.RandomPosts li a img{margin:0 0;padding:0 0;list-style:none;background:none;outline:none; } .RandomPosts ul li{background-color:#ac5828;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;position:relative; } .RandomPosts ul li a{color:#fff!important} .RandomPosts ul li a:hover{color:#2c3e50!important}

Salin tampal (copy-paste) kod CSS di atas ke dalam bahagian CSS blogspot anda, atau cari bahagian b:skin dan letakkan kod di atas di bahagian tersebut.

Setelah itu, cari kod widget random post yang telah anda pasang di dalam blog di HTML blogspot anda di awal tadi. Untuk mudahkan carian anda, tekan ctrl-F, dan cuba lihat contoh kod HTML blog saya di bawah ini.
 

Tambahkan pembolehubah CSS tadi iaitu RandomPosts pada bahagian widget-content untuk widget random post yang telah anda pasang seperti saya tunjukkan di atas.

Selepas itu, buka balik widget random-post tadi, dan ubahsuai sedikit kod HTML widget tersebut menjadi kod di bawah. Salin tampal kod baru widget random-post di bawah ini, jangan lupa untuk ganti dengan URL blog anda, dan masukkan jumlah entri yang mahu dipaparkan.

<ul id="random-posts"></ul> <script> //<![CDATA[ var homePage = "URL-Blog-ANDA", numPosts = JUMLAH-ENTRI; function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-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+='<b> <li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li> </b>'}ct.innerHTML=content}}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}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post); //]]> </script>

Nampak seperti rumit, tapi bila anda dah biasa, in Sha Allah, ia sebenarnya mudah untuk anda customize widget-widget blog anda di blogspot.

Selamat mencuba.