Cara Membuat Widget Random Post Responsive di Blog

oleh
widget random post
Cara Membuat Widget Random Post di Blog – Widget Random Post dalam suatu Website atau blog sangat penting sebagai Internal Link untuk memudahkan pengunjung mengakses berbagai artikel yang diperlukan.

Random Posts arti dalam bahasa indonesia adalah Postingan Acak yang muncul secara Random dalam bentuk daftar list.

Pada Website atau blog yang saya telusuri banyak sekali script random post yang sudah dibisa digunakan lagi melainkan sudah tidak aktif lagi. Jadi disini saya ardnat.com akan membagikan script terbaru dari Random Post.

Sebelum memasangkan kode widget Random postnya bisa anda lihat demonya melalui gambar thumbnail diatas.

Daftar Isi tampilkan

Cara Membuat Widget Random Post Tanpa Thumbnail di Blog

Untuk teman-teman yang ingin membuat widget random post tanpa thumbnail bisa menggunakan script kode dibawah ini.

<style scoped=” type=”text/css”>

#arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}

#arlina-random li:last-child{border-bottom:0;}

#arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline}

</style>

<div id=’arlina-random’>Memuat…</div>

<script>

//<![CDATA[

// Random Post Widget

var homePage = ‘https://www.ardnat.com‘,

maxResults = 10,

containerId = ‘arlina-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 ArlinaRandomPosts(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=ArlinaRandomPosts”></scr’ + ‘ipt>’);

//]]>

</script>

Catatan Penting!
Ganti kode url “ardnat.com” menjadi website kamu. dan untuk kode “maxResults = 10,”, ganti angka 10 dengan jumlah post yang ingin kamu tampilkan.

Cara Membuat Widget Random Post Dengan Thumbnail di Blog

Untuk teman-teman yang sedang mencari script kode widget random post dengan gambar thumbnail. Bisa mencoba script kode dibawah ini.

<style>
#random-posts img {
border-radius: 10px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #F5F5F5;
padding: 3px;
transition: all 0.2s linear 0s;
}
#random-posts img:hover {
opacity: 0.6;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 12px;
text-transform: capitalize;
padding: 0px auto 5px;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 11px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id=’random-posts’>
<script type=’text/javaScript’>
var randomposts_number = 5;
var randomposts_chars = 0;
var randomposts_details = ‘no’;
var randomposts_comments = ‘Comments’;
var randomposts_commentsd = ‘Comments Disabled’;
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write(‘<script type=\”text/javascript\” src=\”/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\”><\/script>’);
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i–
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts – 1));
return ranNum
};
</script>
<script type=’text/javaScript’>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if (‘content’ in entry) {
var randompostsnippet = entry.content.$t
} else {
if (‘summary’ in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = “”;
}
};
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, “”);
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(” “);
randomposts_snippet = randompostsnippet.substring(0, whitespace) + “&#133;”;
};
for (var j = 0; j < entry.link.length; j++) {
if (‘thr$total’ in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ‘ ‘ + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == ‘alternate’) {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if (‘media$thumbnail’ in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = “http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png”
}
}
};
document.write(‘<li>’);
document.write(‘<a href=”‘ + randompostsurl + ‘” rel=”nofollow”><img alt=”‘ + randompoststitle + ‘” src=”‘ + randompoststhumb + ‘”/></a>’);
document.write(‘<div><a href=”‘ + randompostsurl + ‘” rel=”nofollow”>’ + randompoststitle + ‘</a></div>’);
if (randomposts_details == ‘yes’) {
document.write(‘<span><div class=”random-info”>’ + randomposts_date.substring(8, 10) + ‘.’ + randomposts_date.substring(5, 7) + ‘.’ + randomposts_date.substring(0, 4) + ‘ – ‘ + randomposts_commentsnum) + ‘</div></span>’
};
document.write(‘<br/><div class=”random-summary”>’ + randomposts_snippet + ‘</div><div style=”clear:both”></div></li>’)
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write(‘<script type=\”text/javascript\” src=\”/feeds/posts/default?alt=json-in-script&start-index=’ + randomposts_current[i] + ‘&max-results=1&callback=random_posts\”><\/script>’)
};
</script>
</ul>

Catatan Penting!
Untuk mengganti jumlah judul artikel yang ingin ditampilkan, ubah “var randomposts_number = 5;” dengan angka yang kamu inginkan.

Untuk mengubah tampilan thumbnail agar berada di posisi kanan, ubah “float: left;” menjadi “float: right;“.

Cara Membuat Widget Post Acak dengan Snippet dan Thumbnail

Untuk teman-teman yang mungkin sedang mencari widget random post dengan snippet teks yang berada dibawah judul. Kamu bisa menggunakan script dibawah ini.

<style>
#random-posts img {
border-radius: 0px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #FFFFF;
padding: 3px;
transition: all 0.2s linear 0s;
}
#random-posts img:hover {
opacity: 0.6;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 13px;
text-transform: capitalize;
padding: 0px auto 5px;
}
#random-posts a:hover {
text-decoration: none;
}
.rp-snippet {
font-size: 11px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts span {
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #eeeeee;
padding: 4px;
}
</style>
<ul id=”random-posts”>
<script type=”text/javaScript”>
var rdp_numposts=4;var rdp_snippet_length=80;var rdp_info=’no’;var rdp_comment=’comment’;var rdp_disable=’Comments Disabled’;var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write(‘<script type=\”text/javascript\” src=\”/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\”><\/script>’);function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i–}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type=”text/javaScript”>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if(‘content’in entry){var rdp_get_snippet=entry.content.$t}else{if(‘summary’in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet=””;}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,””);if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(” “);rdp_snippet=rdp_get_snippet.substring(0,space)+”&#133;”;};for(var j=0;j<entry.link.length;j++){if(‘thr$total’in entry){var rdp_commentsNum=entry.thr$total.$t+’ ‘+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel==’alternate’){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if(‘media$thumbnail’in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb=”http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png”}}};document.write(‘<li>’);document.write(‘<a href=”‘+rdp_posturl+'” rel=”nofollow”><img alt=”‘+rdp_posttitle+'” src=”‘+rdp_thumb+'”/></a>’);document.write(‘<div><a href=”‘+rdp_posturl+'” rel=”nofollow” title=”‘+rdp_snippet+'”>’+rdp_posttitle+'</a></div>’);if(rdp_info==’yes’){document.write(‘<span><div class=”rp-info”>’+rdp_postdate.substring(8,10)+’/’+rdp_postdate.substring(5,7)+’/’+rdp_postdate.substring(0,4)+’ – ‘+rdp_commentsNum)+'</div></span>’};document.write(‘<div class=”rp-snippet”>’+rdp_snippet+'</div><div style=”clear:both”></div></li>’)}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write(‘<script type=\”text/javascript\” src=\”/feeds/posts/default?alt=json-in-script&start-index=’+rdp_current[i]+’&max-results=1&callback=random_posts\”><\/script>’)};
</script>
</ul>

Catatan Penting!
Untuk mengganti jumlah judul artikel yang ingin ditampilkan, ubah “rdp_numposts=4” dengan angka yang kamu inginkan.

Untuk mengubah tampilan thumbnail agar berada di posisi kanan, ubah “float: left;” menjadi “float: right;“.

Banyak dilihat:

Cara Memasang Widget Random Post di Blogger:

  1. Pergi ke “Tata Letak” > “Add Widget / Tambahkan Widget” > Pilih “HTML/Javascript“.
  2. Isi terlebih dahulu Judul Widgetnya dengan “Random Posts” (Terserah anda).
  3. Copy dan Paste kode script Random post di atas dan Salin Kodenya ke Widget yang tadi.
  4. Jika sudah mengikuti tahap di atas, tinggal di save dan simpan template.
  5. Selesai.

Akhir Kata

Itu dia beberapa cara membuat widget random post di blogger tanpa thumbnail dan dengan thumbnail yang bisa coba kamu gunakan untuk website atau blog kamu.

Semoga bisa bermanfaat dan jangan lupa juga bagikan artikel ini ke teman-teman kamu yang juga sedang menekuni dunia blogging. Terima kasih dan sehat selalu ya.

Bantu bagikan ini:

Rekomendasi Lainnya

Hanya seorang Content Creator, Content Writer dan Copy Writing biasa yang ingin membagikan apa yang dia ketahui tentang dunia digital. (Since 2018). Currently live in Japan. Instagram: @ard._nat

...

Tinggalkan komentar