 |
| Tutorial Go Blog |
Cara Memasang Random Post Dengan Gambar - Untuk kesekian kalinya admin Tutorial Go Blog tidak bosan memberikan tips-tips cara menampilkan desain tampilan pada website maupun blog yang anda miliki. Dan membuat random post di blog sangat berguna dalam mendongkrak volume traffice pada website/blog anda.
Selain untuk mendongkrak volume traffice pada blog, membuat random post di blog juga di peruntukan untuk melengkapi desain-desain lainnya yang sudah ada pada blog anda seperti diantaranya ialah cara membuat recent post thumbnail, membuat recent post berwarna, dan cara membuat widget recent post per label di blog anda.
Semakin menarik tampilan yang dimiliki situs website/blog, maka akan semakin menambah poin pula bagi volume traffice dan juga SEO friendly. Dan disini Tutorial Go Blog siap melakukan pelajaran tentang cara membuat widget random post di blog. Tahukan anda kalau random post bisa dibuat dengan tanpa gambar dan ada juga yang dibuat dengan gambar.
Namun, yang akan anda pelajari cara membuat random post di blog ini menggunakan gambar. Apabila anda ingin membuatnya, silahkan copy paste dulu yaa kode script dibawah ini.
<style>
.rp-seocips{border:1px solid #ddd;padding: 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}
.rp-seocips2{border:1px solid #ddd;padding:5px 10px;overflow:hidden;box-shadow: -2px 2px 3px #ddd;background:#fff;border:1px solid #ddd;}
#random-posts img{float:left;margin-right:10px;border:1px solid #ddd;background:#fff;width:65px;height:65px;padding:3px;border-radius:2px;}</style>
</style>
<div class="rp-seocips">
<div class="rp-seocips2">
<!-- start -->
<div 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=\"http://www.tutorialgo-blog.blogspot.com/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/AVvXsEjgEv7ZG-mTklY_dDTecT3vJUiGTnG2kzLLetVYDBIFSLh0S1p1wffDrafT6lbV-HO2JuPIxI6tPNWb-mGuUpKPsYOzptkw0ED-iE-z7FwU1z8JyCLFhyphenhyphenOCo_1bDGMUjcQ7yvmmKBGeOuu0/"}}};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=\"http://www.tutorialgo-blog.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</div>
<!-- /end -->
</div></div>
.rp-seocips{border:1px solid #ddd;padding: 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}
.rp-seocips2{border:1px solid #ddd;padding:5px 10px;overflow:hidden;box-shadow: -2px 2px 3px #ddd;background:#fff;border:1px solid #ddd;}
#random-posts img{float:left;margin-right:10px;border:1px solid #ddd;background:#fff;width:65px;height:65px;padding:3px;border-radius:2px;}</style>
</style>
<div class="rp-seocips">
<div class="rp-seocips2">
<!-- start -->
<div 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=\"http://www.tutorialgo-blog.blogspot.com/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/AVvXsEjgEv7ZG-mTklY_dDTecT3vJUiGTnG2kzLLetVYDBIFSLh0S1p1wffDrafT6lbV-HO2JuPIxI6tPNWb-mGuUpKPsYOzptkw0ED-iE-z7FwU1z8JyCLFhyphenhyphenOCo_1bDGMUjcQ7yvmmKBGeOuu0/"}}};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=\"http://www.tutorialgo-blog.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</div>
<!-- /end -->
</div></div>
Catatan :
- Warna biru adalah URL Links, ganti dengan URL Links blog anda.
Warna merah adalah jumlah postingan yang ditampilkan.
Baiklah..silahkan saatnya anda untuk mempraktekan cara membuat widget random post dengan gambar di blog anda. Chooow....ke TKP!!
Keterangan :
- Login ke Blogger.com
- Masukkan email & kata sandi (Password)
- Buka dashboard
Langkah Pertama
- Anda sebaiknya langsung saja cari menu di dashboard blog atau website yang tulisannya "Tata Letak", jika anda tidak tahu, lihat pada sisi kiri di depan layar kaca laptop maupun komputer anda.
 |
| Gambar 1 |
Langkah Kedua
- Selanjutnya, anda bisa untuk memilih masuk dari mana saja di menu yang bertuliskan "Tambahkan Gadget" ini. Di dalam menu tersebut ini, anda nantinya akan ditampilkan beberapa menu gadget.
 |
| Gambar 2 |
Langkah Ketiga
- Nah, sekarang kini anda saatnya untuk memilih atau mencari menu yang tulisannya "HTML/JavaScript". Dan setelah itu..
 |
| Gambar 3 |
Langkah Keempat
- Setelah itu...anda akan disediakan tempat kosong atau kolom kosong yang fungsinya untuk menaruh sesuatu di dalamnya. Jika masih belum mengerti, kode script html yang di atas tadi anda sudah copy, sekarang tinggal anda paste-kan kode tersebut didalam kolom gadget. Kemudian tekan "Simpan".
 |
| Gambar 4 |
Langkah Kelima
- Anda sudah meletakkan kode script html cara membuat related post random di blog yang anda miliki sekarang. Nah, supaya kode yang anda masukkan tidak hilang, maka tekan "Simpan Setelan", dan setelah itu tekan "Pratinjau".
 |
| Gambar 5 |
Langkah Terakhir
- Sekarang saatnya anda lihat dan pandang terus hasil gambar recent post yang sudah anda buat dengan begitu mudahnya.
 |
| Hasil Gambar |
Kira-kira seperti itulah Cara Memasang Random Post Dengan Gambar di blog anda. Semoga anda berhasil dan jangan bosan untuk selalu ber-eksperimen di website/blog yang sedang anda miliki saat ini guna meningkatkan SEO pada blog anda. Dan jika anda ingin memilih yang sederhana saja, anda bisa pergunakan tips Cara Gampil Membuat Widget Random Post Ala Tutorial Go Blog ini. Terima kasih banyak yaa atas kunjungannya...
