Random post dengan gambar valid html5 Random post dengan gambar valid html5

Widget random post dengan gambar ini mempunyai script yang memang ringan walaupun script widget random post ini mampun untuk menampilkan Judul postingan, dan gambar bahkan menampilkan beberapa kata dari artikel yang telah diposting. Pada postingan saya dihari hari yang lewat, saya telah membuat suatu artikel yang berisi Script widget random post yang tidak menampilkan gambar. Tulisan saya kali ini terinspirasi dari dorongan beberapa teman yang mengatakan untuk sekalian gambar untuk widget ini ditampilkan. Widget ini SEO Friendly dan Valid HTML 5 dan CSS 3 kenapa saya katakan demikian, sebab script widget ini menganut penulisan tag tag yang dianjurkan oleh prinsip SEO dan Valid HTML 5. Disamping hal tersebut widget ini mempunyai script yang memang benar benar mempunyai loading yang ringan dan tidak akan mempengaruhi loading blog anda. Tampilan yang benar benar mempunyai design yang menarik akan menambahkan kesan menarik juga pada halaman blog kesayangan anda. Widget random post dengan gambar ini saya namakan dengan " Widget Beautiful Avatar Random Post ". Oke tanpa penjelasan yang lebihpanjang lagi dan saya harap anda sudah memahami temtang kegunaan dari script random post dengan gambar ini kini saatnya kita menuju TKP dan silahkan anda simak penjelasan tutorial berikut. 

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#BD_random-post img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:42px;
height:36px;
padding:3px;
border-radius:0 10px 10px 0;
list-style-type: none;
}
#BD_random_avatar td {
list-style-type: none;
width: 100%;
padding: 3px;
}

#BD_random_avatar a {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #0000CC;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 10px;margin-left:10px;
background: url() 0px 50% no-repeat;
background-color: #FFFFFF;
}

#BD_random_avatar a:hover {
background: #ffffff url() 0px 50% no-repeat;
color:#990000;
text-transform: none;
background-color: #FFE1E1;
}
.BD_random_list {
color: #000;
text-decoration: none;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;list-style-type: none;
}

Install Program Tag HTML

Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;

• Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
• Silahkan klik "Add Gadget "( Tambahkan gadget )
• Pilih " HTML / JavaScript "
• Copy Code HTML dibawah ini, paste pada gadget anda.
  

<div id="BD_random_avatar">
<div class="BD_random_list">
<div id='BD_random-post'>
<script type='text/javaScript'>
var rdp_numposts=5;// Jumlah post yang ditampilkan
var rdp_snippet_length=100;// Jumlah tulisan yang ditampilkan
var rdp_info='yes';
var rdp_comment='Komentar';
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 src=\"/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalposts\" type="text/javascript"><\/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>
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/AVvXsEjtxxem0FUDoMobyjlQFZCdf3nHnG9K2KePjIpUQFKry5qzQNBr_rWEtC7qd70AGKL1JgV347hteVAPUnzDWjQeF24wIBblPyEsVQcBRXIQfrMaJYt_SfQG8jrKs0tbAe14kUM_IF-GVsc/s1600/no-image.gif"}}};document.write('<li style="border-bottom: dotted #000 1px;background-color: #eee;">');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<br/><span style="margin-top:8px">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<br/><span style="margin-right:5px;text-align: left;">'+rdp_snippet+'</span></li><br/>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script src=\"/feeds/posts/default?alt=json-in-script&amp;start-index='+rdp_current[i]+'&amp;max-results=1&amp;callback=random_posts\" type="text/javascript"><\/script>')};
</script>
</div></div></div>

Keterangan Gambar

• Code warna merah adalah jumlah postingan arikel yang akan dimunculkan pada halaman
• Code warna Biru jumlah kosa kata yang akan ditampilkan
• Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.
  

Kesimpulan

Widget Random Post ini dilengkapi dengan gambar yang secara otomaits ditampilkan bila artikel tersebut memiliki suatu gambar dan akan menampilkan gambar pengganti bila artikel tersebut tidak memiliki gambar. Widget Random Post image ini SEO Friendly dan Valid HTML 5 Serta Fast loading script, Cocok untuk widget random post halaman blog kesayangan anda.