Cara Membuat Widget Random Post Keren SEO Friendly Fast Loading

Oleh Ahmad Sofyan

Saturday 10 December 2016

Cara Membuat Widget Random Post Keren SEO Friendly Fast Loading. Pada kesempatan kali ini Sofyan Web akan membuat tutorial cara membuat widget random post yang keren seo freindly yang fast loading sehingga tidak memperlambat kemampuan loading pada blog anda.

Random Post adalah daftar post atau artikel yang telah anda buat akan ditampilkan secara acak atau rondom. Dengan membuat random post maka pengunjung akan tahu artikel apa saja yang telah anda buat dan belum sempat untuk mereka baca. Pastikan artikel anda memiliki judul yang unik dan gambar yang bagus sehingga bisa memikat para pengunjung.

Random post dapat membantu anda untuk meningkatkan visitor. Jadi artikel yang sudah lama anda buat bisa mendapatkan banyak pengunjung sehingga artikel yang telah anda buat tidak lenyap tertelan waktu. Tutorial ini hanya pada layout saja. sehingga tidak merubah-rubah script template jadi mudah untuk di pasang dan di lepas. Jika anda sudah tidak sabar untuk melihat hasilnya silahkan coba Cara Membuat Widget Random Post Keren SEO Friendly Fast Loading.

Cara Membuat Widget Random Post Keren SEO Friendly Fast Loading

Membuat Random Post Dengan Link :

• Buka blog yang ingin anda pasang widget random post.
• Buka Layot dan pilih kolom mana yang ingin anda pasang widget layout.
• Klik Add Gadget dan pilih HTML/Javascript. Dan masukan script berikut ini

<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="http://sofyan-setya.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2010/10/cara-memasang-widget-random-post.html" target="_blank" title="Random Posts">Get This Widget</a></div>

• Ganti tulisan http://sofyan-setya.blogspot.com sesuai dengan nama blog anda. Simpan dan lihat hasilnya di blog anda

Membuat Random Post Dengan Link Dan Gambar :

• Buka blog yang ingin anda pasang widget random post.
• Buka Layot dan pilih kolom mana yang ingin anda pasang widget layout.
• Klik Add Gadget dan pilih HTML/Javascript. Dan masukan script berikut ini

<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; //Jumlah karakter postingan yang ditampilkan
var numofpost=10; //Jumlah postingan yang ditampilkan
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="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>

• Ganti :

var lengthsummary = 120; //Jumlah karakter postingan yang ditampilkan
var numofpost=10; //Jumlah postingan yang ditampilkan

• Simpan dan lihat hasilnya di blog anda.

Membuat Random Post Dengan Link Dan Gambar Bergerak :

• Buka blog yang ingin anda pasang widget random post.
• Buka Layot dan pilih kolom mana yang ingin anda pasang widget layout.
• Klik Add Gadget dan pilih HTML/Javascript. Dan masukan script berikut ini

<style type="text/css">
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 0;
</script>
<script src="http://sofyan-setya.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
  <!-- /end -->

• Script yang satu ini sebenarnya script ini adalah script recent post dari seluru post blog anda, tapi tidak ada salahnya di coba.
• Ganti tulisan http://sofyan-setya.blogspot.com sesuai dengan nama blog anda.
• Dan ganti angka pada var numposts = 10; sesuai dengan jumlah post yang ingin anda pasangkan.
• Simpan dan lihat hasilnya di blog anda

Demikianlah cara membuat widget random post yang keren seo frindely dan fast loading. semoga artikel ini dapat membantu dan bermanfaat buat anda. Dan semoga anda bisa menjadi blogger yang sukses. Kunci menjadi blog yang sukses adalah "Jangan Malas". Jika anda suka dengan artikel ini silahkan subscribe Sofyan Web, dan jangan lupa untuk tinggalkan pesan di dalam kolom komentar.

Tag : Blog