Cara Terbaik Menambahkan Widget Random Post Dengan Atau Tanpa Gambar

Cara-viz.blogspot.com :: Biasanya dalam sebuah blog itu terdapat widget popular post atau last post, dimana popular post berfungsi untuk memperlihatkan kepada pengunjung artikel apa yang paling sering dibaca di blog Anda, sedangkan last post berfungsi untuk memperlihatkan artikel yang baru Anda posting. Apabila Anda hanya menggunakan kedua widget tersebut, maka peluang dibacanya artikel-artikel lama yang jarang dibaca oleh pengunjung sangat sedikit. Oleh karena itu Anda membutuhkan widget Random Post.

Dengan menambahkan widget random post, maka semua artikel yang ada di blog Anda menjadi punya peluang lebih untuk dibaca oleh pengunjung. Karena nantinya widget tersebut akan memperlihatkan kepada pengunjung artikel-artikel secara acak atau random. Dan untuk menggunakannya, berikut kode script yang dapat Anda gunakan.

Menambahkan Widget Random Post Tanpa Gambar

Copy dan pastekan script dibawah ini pada HTML/Javascript yang berada pada menu Layout di blog Anda.

<script type="text/javascript">

var randarray = new Array();var l=0;var flag; var numofpost=5;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>

Anda dapat merubah jumlah artikel yang ingin Anda tampilkan pada widget tersebut dengan merubah numofpost=5 dengan jumlah yang Anda inginkan.

Menambahkan Widget Random Post dengan Gambar (Thumbnail) dan Text

Copy dan pastekan script dibawah ini pada HTML/Javascript yang berada pada menu Layout di blog Anda.

<style>

.rp-post-link {

font-weight: bold !important;

font-size: 12px !important;

}

.rp-summary {

margin-bottom: 5px !important;

border-bottom: 1px dotted #686868;

font-size: 12px !important;

line-height: 20px !important;

word-wrap: break-word !important;

}

.rp-thumbnail {

margin: 5px 5px 2px 0px !important;

float: left !important;

width:60px;height:60px;

}

.rp-pubdate {

font-style: italic !important;

margin-bottom: 3px !important;

}

</style>

<script type="text/javascript">

var randarray = new Array();

var l=0;

var flag;

var lengthsummary = 120;

var numofpost=10;

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

for(n in randarray){

var p=randarray[n];

var entry=json.feed.entry[p-1];

var item ="";

var posttitle = entry.title.$t || "[Untitled]";

"[Untitled]"

for(k=entry.link.length -1; k >= 0 ; k--){

if(entry.link[k].rel=='alternate'){

item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";

break;

}

}

item += "<br"

item += "/>"

if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"

var summary = "";

if ("content" in entry) {

summary = entry.content.$t;

}

else if ("summary" in entry) {

summary = entry.summary.$t;

}

var re = /<\S[^>]*>/g;

summary = summary.replace(re, "");

item += "<p class='rp-summary'>

" + summary.substring(0,lengthsummary) + " ...</p>

";

document.write(item);

}

document.write('</div>

');

}

</script>

<script src="http://cara-viz.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">

</script>

var numofpost=10; dapat Anda gunakan untuk mengganti jumlah artikel yang ingin Anda tampilkan pada widget tersebut.

var lengthsummary = 120; dapat Anda gunakan untuk mengganti panjang kutipan artikel yang ingin Anda tampilkan pada widget tersebut.

http://cara-viz.blogspot.com/ ganti dengan alamat blog Anda.

Menambahkan Widget Random Post dengan Gambar (Thumbnail) dan Judul Saja

Copy dan pastekan script dibawah ini pada HTML/Javascript yang berada pada menu Layout di blog Anda.

<style>

<!--

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

-->

</style>

<ul id='random-posts'>

<script type='text/javaScript'>

var rdp_numposts=5;

var rdp_snippet_length=60;

var rdp_info='yes';

var rdp_comment='Comment';

var rdp_disable='';

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){a=location.href;y=a.indexOf('?m=0');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;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKULHRHbydYPbW3PmWwSUBWmNd_BQF_Q_9pOjO1o5r28WKxDGeyCRuRwvkOfkOUmSYvsv2EdUcQvWJDR5VakzHt7Nc41txzjr-nYAepNktoAfOGwkwZE4aY7KKofaLzZihyULRLhfheJLr/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<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>

width:36px;height:36px dapat Anda gunakan untuk merubah ukuran gambar.

var rdp_numposts=5 dapat Anda gunakan untuk merubah jumlah artikel yang ingin Anda tampilkan pada widget tersebut.

var rdp_info='yes' dapat Anda gunakan untuk menampilkan tanggal posting dan jumlah komentar. Untuk menyembunyikannya, ganti Yes dengan No.

Menambahkan Widget Random Post Slideshow

Copy dan pastekan script dibawah ini pada HTML/Javascript yang berada pada menu Layout di blog Anda.

<style type="text/css">

    .gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #363636;}

    .gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}

    .gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}

    .gfg-subtitle a {color : #a43434;display:none !important;}

    .gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;}

    /* To allow correct behavior for overlay */

    .gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}

    .gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;}

    .gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#a43434;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;}

    .gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;}

    .clearFloat {clear : both;}

    #feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;}

    </style>

    <script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script>

    <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

    <script type="text/javascript">

    function showGadget() {

    var feeds = [

    {title:'title',

    url:'http://cara-viz.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},

    ];

    new GFdynamicFeedControl(feeds, 'feedGadget',

    {numResults : 1000, stacked : true,

    title: " "});

    }

    google.load("feeds", "1");

    google.setOnLoadCallback(showGadget);

    </script>

    <div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div>