Random Post merupakan widget yang biasanya berisikan beberapa judul postingan suatu blog yang tersaji secara acak, baik dari segi label maupun waktu posting. Dengan memasang random posts di blog, maka artikel postingan terdahulu dapat kembali terlihat oleh pengunjung. sehingga artikel lama bisa dengan mudah terlihat dan terbaca.
Memasang random post dirasa penting agar postingan kita secara acak ditampilkan mulai dari postingan baru maupun lama, ini tentu bisa menambah page view yang nantinya bermanfaat buat blog, untuk pengunjung dengan adanya Random Post mereka bisa mendapatkan informasi berkualitas.
Ok Sahabat... Mungkin seperti itulah penjelasannya ya, sekarang langsung saja ke TKP untuk buat ramdom post dengan berbagai style
1. Silahkan masuk ke akun blogger sahabat
2. Di dasbor klik Tata letak
3. Klik Tambahkan gadget
4. Pilih dan klik HTML/JavaScript [</>]
5. Copy dan paste kode berikut didalamnya
6. Setelah memasukkan kode diatas jangan simpan dulu, tambahkan kode-kode berikut dibawahnya. Silahkan sahabat pilih kode mana yang akan dimasukkan sesuai style yang sahabat sukai.
Style Pertama
Style atau model pertama dengan gambar persegi disisi kiri sedangkan judul posting disebelah kanan. Berikut kodenya
Style Kedua
Style atau model kedua dengan gambar berbentuk lingkaran disisi kiri sedangkan judul posting disebelah kanan. Berikut kodenya
Style Ketiga
Style atau model ketiga dengan gambar persegi disisi kanan judul posting disebelah kiri. Berikut kodenya
Style Keempat
Style atau model keempat dengan gambar berbentuk lingkaran disisi kanan sedangkan judul posting disebelah kiri. Berikut kodenya
7. Setelah sahabat memasukkan salah satu kode dari keempat style diatas sesuai dengan style yang sahabat sukai, silahkan klik simpan.
Memasang random post dirasa penting agar postingan kita secara acak ditampilkan mulai dari postingan baru maupun lama, ini tentu bisa menambah page view yang nantinya bermanfaat buat blog, untuk pengunjung dengan adanya Random Post mereka bisa mendapatkan informasi berkualitas.
Ok Sahabat... Mungkin seperti itulah penjelasannya ya, sekarang langsung saja ke TKP untuk buat ramdom post dengan berbagai style
1. Silahkan masuk ke akun blogger sahabat
2. Di dasbor klik Tata letak
3. Klik Tambahkan gadget
4. Pilih dan klik HTML/JavaScript [</>]
5. Copy dan paste kode berikut didalamnya
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 7;
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 = "";
}
};
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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-TNAXfGYbMlzTlgCYjPibZv1Y1GPJHQEKbFL54FBY6d_eCm2fh8M4gLxBWlpOinnDOPXWf-pvaNu-jz321ZJTpxuh6taB5EctY7xF3SWtf8pdHRDx2Fg6WxtQ43E1X2RvhKpQjG3_eI/s1600/bungfrangki_no_image_100.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></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>
<div class='clear'/>
</div>;
var rdp_snippet_length=60;
var rdp_info='no';
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)+"…";};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/AVvXsEjqQDrc7emyAto64B1UOoOS9vf8hYJDUefazAxM5xHYVZ-RswGxFvW_3OGqBScxWvQnzlX_d1ff05hwpmlLT7VhjXkzBvAAOjQM4BB8UQyohMeJdI6gnP5xMJzkyqlh1luh-i2yaiBy41Tv/"}}};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>
</div>
<!-- /end -->
</div></div>
6. Setelah memasukkan kode diatas jangan simpan dulu, tambahkan kode-kode berikut dibawahnya. Silahkan sahabat pilih kode mana yang akan dimasukkan sesuai style yang sahabat sukai.
Style Pertama
Style atau model pertama dengan gambar persegi disisi kiri sedangkan judul posting disebelah kanan. Berikut kodenya
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px 0;min-height:72px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
Style Kedua
Style atau model kedua dengan gambar berbentuk lingkaran disisi kiri sedangkan judul posting disebelah kanan. Berikut kodenya
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left; border-radius:35px;}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px 0;min-height:72px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
Style Ketiga
Style atau model ketiga dengan gambar persegi disisi kanan judul posting disebelah kiri. Berikut kodenya
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-left:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float: right}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px 0;min-height:72px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
Style Keempat
Style atau model keempat dengan gambar berbentuk lingkaran disisi kanan sedangkan judul posting disebelah kiri. Berikut kodenya
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-left:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float: right; border-radius:35px;}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px 0;min-height:72px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
7. Setelah sahabat memasukkan salah satu kode dari keempat style diatas sesuai dengan style yang sahabat sukai, silahkan klik simpan.
Belum ada tanggapan untuk "Membuat Random Post Terbaru Dengan Berbagai Style"
Post a Comment