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. Untuk melihat tehnik pembuatan random post tanpa gambar yang SEO Friendly dan Valid HTML 5 silahkan kunjungi halaman ini : http://rivai-silaban.blogspot.com/2013/07/widget-random-post-seo-friendly-html5.html

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/AVvXsEg1Ary51ivc6IxMYwuTaE6g1VnPa_GQN0EGwvkG0QilghEAnVMKWnceQRlwCZdbrk0_CDqjsTFfVBFJZ3Ez1ELfKzRtwqVt1mAm4eT94OwWuRhILTQHt9jXvzFUFPSnzohOsYZBRJhZn4Y/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.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:50 PM