របៀប​ដាក់​អត្ថបទ​ថ្មីៗ​​ជា​ប្រភេទ Slide នៅ​របា​ចំហៀង

ម​រំលឹក​បន្តិច​កាល​ពី​អត្ថបទ​មុនៗ​ ​ប្លក​អាក្បាលធំ ធ្លាប់​បាន​បង្ហាញ​ជូន​នូវ​កូដ widget មួយ​មាន​លទ្ធភាព​​ដូរ​រូបរាង​ឲ្យ​ Popular Posts ទៅ​ជា​រាង​ដុំ​បួន​ជ្រុង (​គូប) ដែល​មាន​ចលនា បង្វិល​ទៅ​បង្វិល​​ដើម្បី​បង្ហាញ​រូប​ និង​ចំណងជើង​អត្ថបទ ធ្វើ​ឲ្យ​ប្លក​របស់​លោកអ្នក​​រឹត​តែ​ទាក់ទាញ​បាន​មួយកម្រិត។

   ឥឡូវ​ក្នុង​អត្ថបទ​នេះ​ខ្ញុំ​​ យើង​នឹង​និយាយ​ពី​​ការ​ប្ដូរ​រូបរាង​ឲ្យ អត្ថបទ​ថ្មីៗ​ម្ដង​មើល៍, ​អ្នក​ប្រើ Blogger ទាំងអស់​គ្នា​ជា​ទូទៅ​ប្លក​នីមួយៗ​តែងតែ​មាន​ Widget សម្រាប់​បង្ហាញ​អត្ថបទ​ថ្មីៗ (recent post), អត្ថបទ​ពេញ​និយម (popular post), អត្ថបទ​ចៃដន្យ (rendom post) ដើម្បី​សម្រួល​ដល់​​ចូល​ទស្សនា​ប្លក មាន​ភាព​ងាយស្រួល ​ក្នុង​ការ​ចុច​ចូល​ទៅ អាន​ទៅ​តាម​ផ្នែក​នីមួយៗ។ នៅ​ក្នុង​គន្លឹះ​នេះ ខ្ញុំ​នឹង​បង្ហាញ​ជូន​កូដ widget ដែល​​យក​​អត្ថបទ​ចុង​ក្រោយ​នៅ​ប្លក​របស់​យើង​ ឲ្យ​បង្ហាញ​ជា slide (ស្លាយ) ខ្លះ​តួច​ខ្លះ​ធំ ​ឆ្លាស​ទី​គ្នា ដែល​មើល​មួយ​ភ្លែត​ដូចជា​យក​ម៉ូដ​តាម Metro ​នៅ​ក្នុង Windows 8 ដូច្នោះ​ដែរ។ 

៙ របៀប​ដាក់​អត្ថបទ​ថ្មីៗ​​ជា​ប្រភេទ Slide នៅ​របា​ចំហៀង ៖

- កត់ត្រា​ចូល​ (Log In) ​ក្នុង​គណនី​ Blogger របស់​លោក​អ្នក​​ជា​មុន​សិន។
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

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

-ចម្លង​កូដ "​អត្ថបទ​ថ្មីៗ​​ជា​ប្រភេទ Slide" ​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript Gadget ។ មើល​នៅ​ក្នុង​កូដ អ្នក​នឹង​ឃើញ​ URL ប្លក​អាក្បាលធំ ដូច្នេះ​អ្នក​ត្រូវ​​ដូរ URL ទៅ​ជា​​ប្លក​លោកអ្នក​វិញ​​ ​រួច​ហើយ​​ចុច​ប៊ូតុង Save ។
បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget ដាក់​ ឬ​មិន​​​ដាក់​ក៏​បាន (តែ​យល់​ល្អ​គួរ​ដាក់​ឈ្មោះ), ហើយ​គួរ​ចាប់​ទាញ Widget នេះ​ទៅ​ដាក់​នៅ​ទីតាំង​ណាមួយ​ដែល​ឆាប់​ឃើញ ដាក់​នៅ​លើ​រឹតតែ​ល្អ។

​កូដ​​អត្ថបទ​ថ្មីៗ​​ជា​ប្រភេទ Slide សម្រាប់​នៅ​របា​ចំហៀង

<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgawwxcIe_xRO7Jh2D3ku0lEC4plRGiVYJVZqZSZYsS_0MoprzH4ZAc5BLCwweWuF0XTBMLBpLgJLYVOT5rAFRtaKiHGL8jqk2zf2TDbIs3I2402ZvPckIRsLpdG_9_es7PjJjTzt09wqA/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
FeaturedPostSide({
blogURL:"http://itkonkhmer07.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>