Cara Gampang Pasang Random Post

@yuliastutirini on

Friday, February 17, 2017

Salah-satu keuntungan memiliki widget random posts di blog yaitu agar pengunjung mempunyai variasi artikel yang akan dibaca selanjutnya, tentu ini mempengaruhi jumlah pageviews blog Anda. Bila dibangingkan blog kosong tanpa adanya saran untuk menuju ke artikel lain, biasanya pengunjung langsung meninggalkan blog begitu saja.

Berikut Saya kumpulkan widget random posts terbaik tentunya versi Saya sendiri, jadi mungkin tidak sesuai selera Anda, ya wajar, silahkan dipilih sesuai keinginan:). Untuk cara pasangnya cukup menggunakan fasilitas "Add A Gadget" bawaan blogger.

1. Widget Random Posts Simple Plus SEO Support

Feature :

• Tampilan teks yang simple
• Hanya menampilkan judul
• Murni JavaScript tanpa HTML, CSS dan JQuery
• Icon arrow
• SEO Support

Widget Random Posts Simple Plus SEO Support

<script type="text/javascript">

var randarray = new Array();

var l=0;

var flag;

var numofpost=7;

function randomposts(json){var total = parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i < numofpost; ){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";document.write(item);}}}document.write('</ul>');}

</script>

<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

sumber: http://www.exeideas.com/2013/11/simple-random-posts-widget.html

2. Widget Random Posts With Thumbnails

Feature :

• Tampilan teks yang simple
• Menampilkan tanggal posting
• Menampilkan jumlah komentar
• Dilengkapi dengan Thumbnails postingan

Widget Random Posts With Thumbnails

<ul id='random-posts'>

<script type='text/javaScript'>

var tow_numposts=7;

var tow_snippet_length=150;

var tow_info='yes';

var tow_comment='Comments';

var tow_disable='Comments Disabled';

var tow_current=[];var tow_total_posts=0;var tow_current=new Array(tow_numposts);function totalposts(json){tow_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<tow_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<tow_current.length;j++){if(tow_current[j]==rndValue){found=true;break}};if(found){i--}else{tow_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(tow_total_posts-1));return ranNum};

</script>

<script type='text/javaScript'>

function random_posts(json){for(var i=0;i<tow_numposts;i++){var entry=json.feed.entry[i];var tow_posttitle=entry.title.$t;if('content'in entry){var tow_get_snippet=entry.content.$t}else{if('summary'in entry){var tow_get_snippet=entry.summary.$t}else{var tow_get_snippet="";}};tow_get_snippet=tow_get_snippet.replace(/<[^>]*>/g,"");if(tow_get_snippet.length<tow_snippet_length){var tow_snippet=tow_get_snippet}else{tow_get_snippet=tow_get_snippet.substring(0,tow_snippet_length);var space=tow_get_snippet.lastIndexOf(" ");tow_snippet=tow_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var tow_commentsNum=entry.thr$total.$t+' '+tow_comment}else{tow_commentsNum=tow_disable};if(entry.link[j].rel=='alternate'){var tow_posturl=entry.link[j].href;var tow_postdate=entry.published.$t;if('media$thumbnail'in entry){var tow_thumb=entry.media$thumbnail.url}else{tow_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhud5O9t6fpmNhxWwSPGK2Utq6Vel2Vd4WZs-MCScW5-KjRUri3CipdIAxMdU3JB2IB7V8PrTgbSVuzgS6gDa07JvGgaqXljkpKO1WXZQ-lr2MgmC-zYLaj5AajxYMtQ9gaf8crwzm7Xhk/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+tow_posttitle+'" src="'+tow_thumb+'"/>');document.write('<div><a href="'+tow_posturl+'" rel="nofollow" title="'+tow_snippet+'">'+tow_posttitle+'</a></div>');if(tow_info=='yes'){document.write('<span>'+tow_postdate.substring(8,10)+'/'+tow_postdate.substring(5,7)+'/'+tow_postdate.substring(0,4)+' - '+tow_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<tow_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+tow_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};

</script>

<p><a href="http://www.talkofweb.com/show-random-posts-with-thumbnails-in-blogger" rel="nofollow" title="Talk of web Blogger Widgets">Grab this Widget</a></p>

</ul>

<style type='text/css'>

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:100px;height:100px;padding:3px}

#random-posts li{margin: 0px 0px 10px 0px;}

</style>

sumber : http://www.talkofweb.com/show-random-posts-with-thumbnails-in-blogger/

3. Widget Random Posts Simple

Feature :

• Tampilan teks yang simple
• Hanya menampilkan judul
• Icon checklist

Widget Random Posts Simple

<style type="text/css">

.noop-random-posts ul li {

    list-style-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikQQsPkH8YNRRDWuS4hxm_euATkVSr6sNbsprPUaPm9vTPbKtZ86ykDTcDnXqsoN4-POqAO92JGumRAHOgsjfMMYmERSFsHEDzJaq1iSbNrgkjHPibS6jZb8eyOJveznu86KSQyWe5wN8/s1600/tick+list+style.png");

}

</style>

<div class="noop-random-posts"><script type="text/javascript">

    var randarray = new Array();var l=0;var flag;

    var numofpost=7;function nooprandomposts(json){

    var total = parseInt(json.feed.openSearch$totalResults.$t,10);

    for(i=0;i < numofpost; ){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}

    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');

    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];

    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

    document.write(item);}}

    }document.write('</ul>');}

    </script><a href="http://www.netoopsblog.com" style="font-size:0pt">Blogger Widgets</a>

<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

sumber : http://www.netoopsblog.com/2013/07/awesome-random-posts-widget-for-blogger.html

4. Widget Random Posts Simple #2

Feature :

• Tampilan teks yang simple
• Hanya menampilkan judul
• Icon bullet

Widget Random Posts Simple

<ul id="random-posts"></ul>

<script>

//<![CDATA[

var homePage = "http://kang-mousir.blogspot.com/",

numPosts = 7;

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+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}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>

sumber : http://kang-mousir.blogspot.com/2014/06/membuat-widget-random-posts-untuk-blog.html

5. Widget Random Posts Simple #3
Feature :

• Tampilan teks yang simple
• Hanya menampilkan judul
• Icon arrow
• Fast Loading

Widget Random Posts Simple #2

<div id='random-post-container'>Memuat...</div>

<script>

//<![CDATA[

// Feed configuration

var homePage = 'http://nama_blog.blogspot.com',

    maxResults = 7,

    containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`

// Used to create a valid and safe random feed `start-index`

function getRandomInt(min, max) {

    return Math.floor(Math.random() * (max - min + 1)) + min;

}

// Function to shuffle arrays

// Used to randomize order of the generated JSON feed

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;

}

// Get a random start index

function createRandomPostsStartIndex(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>');

}

// Widget's main function

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++) {

            if (entry[i].link[j].rel == "alternate") {

                link = 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=createRandomPostsStartIndex"></scr' + 'ipt>');

//]]>

</script>

sumber : http://www.dte.web.id/2013/06/performa-widget-random-post.html

6. Widget Random Posts Simple #4
Feature :

• Tampilan teks yang simple
• Hanya menampilkan judul

Widget Random Posts Simple

<script type="text/javascript">

var randarray = new Array();var l=0;var flag; var numofpost=7;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost; ){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script><script src="/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=300&amp;callback=randomposts" type="text/javascript">

</script>

7. Widget Random Posts Simple #5
Feature :

• Tampilan teks yang simple
• Hanya menampilkan judul
• Icon checklist

Widget Random Posts Simple #5

<style type="text/css">

.noop-random-posts ul li {

    list-style-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikQQsPkH8YNRRDWuS4hxm_euATkVSr6sNbsprPUaPm9vTPbKtZ86ykDTcDnXqsoN4-POqAO92JGumRAHOgsjfMMYmERSFsHEDzJaq1iSbNrgkjHPibS6jZb8eyOJveznu86KSQyWe5wN8/s1600/tick+list+style.png");

}

</style>

<div class="noop-random-posts"><script type="text/javascript">

    var randarray = new Array();var l=0;var flag;

    var numofpost=7;function nooprandomposts(json){

    var total = parseInt(json.feed.openSearch$totalResults.$t,10);

    for(i=0;i < numofpost; ){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}

    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');

    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];

    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

    document.write(item);}}

    }document.write('</ul>');}

    </script><a href="http://www.netoopsblog.com" style="font-size:0pt">Blogger Widgets</a>

<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

sumber : http://www.netoopsblog.com/2013/07/awesome-random-posts-widget-for-blogger.html


8. Widget Random Posts Berwarna-Warni
Feature :

• Tampilan teks yang simple
• Hanya menampilkan judul
• Tampilan berwarna-warni

Widget Random Posts Berwarna-Warni

<style type="text/css">

.noop-random-posts ul li {

    list-style-image:none;

}.noop-random-posts ul {

list-style-type: none;

margin: 0;

padding: 5px 0;

}

.noop-random-posts ul li {

border: 0 none;

margin: 5px 0;

padding: 10px;

position: relative;

}

.noop-random-posts ul li:first-child {

background: none repeat scroll 0 0 #FF4C54;

width: 92%;

}

.noop-random-posts ul li:first-child:after {

content: "1";

}

.noop-random-posts ul li:first-child + li {

background: none repeat scroll 0 0 #FF764C;

width: 92%;

}

.noop-random-posts ul li:first-child + li:after {

content: "2";

}

.noop-random-posts ul li:first-child + li + li {

background: none repeat scroll 0 0 #FFDE4C;

width: 92%;

}

.noop-random-posts ul li:first-child + li + li:after {

content: "3";

}

.noop-random-posts ul li:first-child + li + li + li {

background: none repeat scroll 0 0 #C7F25F;

width: 92%;

}

.noop-random-posts ul li:first-child + li + li + li:after {

content: "4";

}

.noop-random-posts ul li:first-child + li + li + li + li {

background: none repeat scroll 0 0 #33C9F7;

width: 92%;

}

.noop-random-posts ul li:first-child + li + li + li + li:after {

content: "5";

}

.noop-random-posts ul li:first-child + li + li + li + li + li {

background: none repeat scroll 0 0 #7EE3C7;

width: 92%;

}

.noop-random-posts ul li:first-child + li + li + li + li + li:after {

content: "6";

}

.noop-random-posts ul li:first-child + li + li + li + li + li + li {

background: none repeat scroll 0 0 #F6993D;

width: 92%;

}

.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {

content: "7";

}

.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {

background: none repeat scroll 0 0 #F59095;

width: 92%;

}

.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {

content: "8";

}

.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {

background: none repeat scroll 0 0 #C7F25F;

width: 92%;

}

.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {

content: "9";

}

.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {

background: none repeat scroll 0 0 #353535;

border-radius: 50% 50% 50% 50%;

color: #FFFFFF;

font-size: 25px;

height: 30px;

position: absolute;

right: -17px;

text-align: center;

top: 1px;

width: 30px;

}

.noop-random-posts ul li a {

color: #444444;

font-size: 13px;

text-decoration: none;

}

</style>

<div class="noop-random-posts"><script type="text/javascript">

    var randarray = new Array();var l=0;var flag;

    var numofpost=5;function nooprandomposts(json){

    var total = parseInt(json.feed.openSearch$totalResults.$t,10);

    for(i=0;i < numofpost; ){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}

    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');

    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];

    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

    document.write(item);}}

    }document.write('</ul>');}

    </script><a href="http://contohblognih.blogspot.com" style="font-size:0pt">Random Posts Widgets</a><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

sumber : http://contohblognih.blogspot.com/2014/10/membuat-random-posts-blog-berwarna.html

---

.......... Baca Juga ...........

Bagikan Artikel ini

Labels: Blogger, Tulisan Jeffrie

Thanks for reading Cara Gampang Pasang Random Post. Please share...!