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

សូមរំលឹកបន្តិចកាលពីអត្ថបទមុនៗ ប្លក Idea for khmer ធ្លាប់បានបង្ហាញជូននូវកូដ 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របស់ប្លក Idea For khmer ដូច្នេះអ្នកត្រូវដូរ URL ទៅជាប្លកលោកអ្នកវិញ រួចហើយចុចប៊ូតុង Save ។

បន្ថែម ៖ ចំពោះឈ្មោះ widget ដាក់ ឬមិនដាក់ក៏បាន (តែយល់ល្អគួរដាក់ឈ្មោះ), ហើយគួរចាប់ទាញ Widget នេះទៅដាក់នៅទីតាំងណាមួយដែលឆាប់ឃើញ ដាក់នៅលើរឹតតែល្អ។

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

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/AVvXsEgHU7w-nb4Gu0xyQHXemCtgYg69yxU_sEbGbuds9iCVY4YDiCie3WoOt6H0WQkH03wH9BaduQYoykxlgylVy2-QL6FTOoV5Xzp-PsTMpDmXhTv5QPSpkfmNq-HZgLVhg6aQFuPKVIo9f2o/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>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://ideaforkhmer.blogspot.com/",

MaxPost:8,

idcontaint:"#featuredpostside",

ImageSize:300,

interval:5000,

autoplay:true,

tagName:false

});

//]]>

</script>

ចំណាំ ៖ អ្នកត្រូវដូរ URL ទៅជាប្លកលោកអ្នក និងអាចកំណត់ចំនួនអត្ថបទពេលបង្ហាញជា slide បាននៅត្រង់ MaxPost:8 (8 ជាចំនួនអត្ថបទតែត្រូវចាប់បង្ហាញចុះឡើង)។

សម្រាប់ប្លកដែលនិយមលេងម៉ូដ widget មួយនេះល្អសម្រាប់ប្លកណាស់ ព្រោះវាមានចលនាដែលទាក់ទាញដល់អ្នកមើល។ ជួបគ្នានៅគន្លឹះប្លកលើកក្រោយៗទៀត មុននឹងជម្រាប់លាសូមជួយចុច Like មួយសិនទៅ :D ៕

Visitors

Friday, February 28, 2014

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

Visitors

Friday, February 28, 2014

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

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