ដាក់​ធាតុ​ក្រាហ្វិក ​អត្ថបទ​ចៃដន្យ ដែល​មាន​កូន​រូបភាព​អម​មក​ជាមួយ

ប្រភពៈ អាក្បាលធំ

សួស្ដី ប្លក​អាក្បាលធំ​ធ្លាប់​បាន​បង្ហាញ​អំពី​ការ​ដាក់​ ​ random post widget ដែល​ហៅ​ជា​ភាសា​ខ្មែរ "ធាតុ​ក្រាហ្វិក​អត្ថបទ​ចៃដន្យ"  ដែល​មាន​តួនាទី​បង្ហាញ​​ចំរុះ​នៃ​ចំណង​ជើង​របស់​អត្ថបទ​ក្នុង​ប្លក​​លោកអ្នក មិន​ថា​អត្ថបទ​កប់​ជ្រៅ យូរ​ខែ យូរ​ឆ្នាំ​ យ៉ាង​ណា​នោះ​ទេ ក៏​យក​មក​បង្ហាញ​បាន​ដែរ។

   ​​វា​មាន​សារៈ​សំខាន់​​ត្រង់​ថា​នៅ​ពេល​ដែល​ប្លក​មួយ​មាន​អត្ថបទ​ច្រើន​ ហើយ​អ្នក​អាន​គេ​មិន​ដឹង​ថា​យើង​សរសេរ​អី​ខ្លះ​នោះ​ទេ តែ​គេ​អាច​ចូល​មើល​អត្ថបទ​នោះ​ ដោយ​សារ​ការ​បង្ហាញ​របស់ Widget អត្ថបទ​ចៃដន្យ ដែល​ជា​អ្នក​នាំ​ផ្លូវ​ចូល​ទៅ​កាន់​អត្ថបទ​ចាស់ៗ​ បាន​យ៉ាង​មាន​ប្រសិទ្ធភាព។ ហើយ​លើក​នេះ​ដែរ ខ្ញុំ​សូម​បង្ហាញ widget អត្ថបទ​ចៃដន្យ​ដដែល​ហ្នឹង​ ​តែ​ខុស​ពី​មុន​បន្តិច​​ត្រង់​មាន​​បង្ហាញ​ជា​កូន​រូបភាព​ អម​មក​ជាមួយ​ចំណង​ជើង​ទៀត​ផង។

បើ​ចង់​ដឹង​ សូម​មើល​ពី​​របៀប​ដាក់ Widget អត្ថបទ​ចៃដន្យ ដែល​មាន​កូន​រូបភាព​អម​មក​ជាមួយ ​​ខាង​ក្រោម​នេះ៖

៙ របៀប​ដាក់​​ធាតុ​ក្រាហ្វិក ​អត្ថបទ​ចៃដន្យ ដែល​មាន​កូន​រូបភាព​អម​មក​ជាមួយ ៖

- កត់ត្រា​ចូល (Log In) ក្នុង​គណនី Blogger របស់​លោកអ្នក។
- ចូល​ទៅ Layout >> ចុច Add s Gadget ។

- រមូល​ចុះ (scroll) រក​មើល Gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​ពី​លើ​វា​ដើម្បី​បើក​។ (សូម​មើល​រូប​ខាង​ក្រោម)

- បិទភ្ជាប់​កូដ​អត្ថបទ​ចៃដន្យ ខាងក្រោម ទៅ​ក្នុង​ប្រអប់ HTML/JavaScript Widget ដោយ​ដាក់​ចំណងជើង​ រួច​ចុច Save ជា​ការ​ស្រេច។ (សូម​មើល​រូប​ខាង​ក្រោម)

- ចូល​ដល់​ផ្ទាំង Layout វិញ លោកអ្នក​អាច​ចាប់​ទាញ ធាតុ​ក្រាហ្វិក​អត្ថបទ​ចៃដន្យ យក​ទៅ​ដាក់​នៅ​ទីតាំង​ណា​ដែល​លោក​អ្នក​ពេញ​ចិត្ត។

 <style type='text/css'>
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:89px;height:64px;padding:3px}
#random-posts a {color: #000000; }
#random-posts a {font-size: 15px; }
#random-posts a:hover{color:#cccccc; }
</style>

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=7;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comments';
var rdp_disable='Turn off comments';
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)+"&#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/AVvXsEg_XCwj660NMTf6NMz3NlnlbMYZjdfHIfIac3O4SsiVx-ZZON6nA0SU9oFMRSfVHCcWSbffGsMjsBfQe_Q0CChyphenhyphenEd54PFcABW54aFYjl_ClKfDpa3X2wDWz7J0L7PnuNZhjW03S6gG0UlLw/"}}};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>
</ul>
<div style="text-align: right;"><a href="http://akbalthom.blogspot.com/2013/02/add-thumbnail-rendom-post-widget-to-Blogger.html">Get this widget</a></div>

អំពី​ការ​កំណត់​កូដ អត្ថបទ​ចៃដន្យ ៖

- width:89px : កំណត់​ទំហំ​ ទទឹង ​កូន​​រូបភាព។
- height:64px : កំណត់​ទំហំ កំពស់ កូន​រូបភាព។
- padding:3px : កំណត់​ទំហំ សាច់​ផ្ទៃ គម្លាត​ពី​រូប​ទី​ស៊ុម​រូបភាព។ (កន្លែង​នេះ​មិន​កំណត់​ក៏​បាន)
- {color: #000000; } : កំណត់ ​ពណ៌ ​របស់​អក្សរ​ចំណងជើង​របស់​អត្ថបទ។
- {font-size: 15px; } : កំណត់​ ទំហំ​​អក្សរ ​ចំណងជើង​របស់​អត្ថបទ។
- {color:#cccccc; } : កំណត់ ពណ៌ ចំណងជើង​របស់​អត្ថបទ​នៅ​ពេល​យក​កណ្ដុរ​ដាក់​ពី​លើ។
- numposts=7 : កំណត់​​ចំនួន​បង្ហាញ ចំណងជើង​របស់​អត្ថបទ។

លទ្ធផល​ដែល​ទទួល​បាន

   សង្ឃឹម​ថា​លោកអ្នក​ដែល​មិន​ដែល​ស្គាល់​កូដ​អី​នោះ អាច​អនុវត្តន៍​តាម​បាន។ ប្លក​អាក្បាលធំ​ នៅ​តែ​ស្វែងរក​គន្លឹះ​អំពី Blogger ឲ្យ​បាន​ច្រើន និង​ចម្រាញ់​យក​តែ​មួយ​ណា​មាន​ប្រយោជន៍ ​យក​មក​បកប្រែ​ជា​ភាសា​ខ្មែរ​ដើម្បី​ងាយស្រួល​អនុវត្តន៍​តាម​បាន។ "បន្ត​​ការ​ចែករំលែក បន្ត​ការ​អភិវឌ្ឍន៍"