របៀបដាក់ JavaScript Image Slider For Blogger

Live Slider Demo
របៀបចូលទៅដើម្បើដាក់ Javascript Image Slider ៖

1. ដំបូងចូល​ទៅ​ក្នុង​គណនី Blogger របស់អ្នក​តាម www.blogger.com
2. បន្ទាប់មករមូល​​ចុះ (Scroll) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)
   
   
   
   
   -ចម្លង​កូន​ខាង​ក្រោម​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript Gadget ដោយ ​មិន​បាច់​ដាក់​ឈ្មោះ រួច​ចុច​ប៊ូតុង Save ។ (លោក​អ្នក​គួរ​ទុកដាក់ Gadget នោះ​នៅ​ទី​តាំង​សមរម្យ ឧទាហរណ៍​ ដោយ​ចាប់​ទាញ​យក​ទៅ​ដាក់​ខាង​ស្តាំ​ និង​ក្រោម​គេ​បំផុត)

 
<style type="text/css"> <style type="text/css"> /* JavaScript Image Slider By http://www.helperblogger.com/ */ #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJKn40_dZ04YKh6oV67EYE6JbA8bwSR_IH2i0uCVHcZ2nbdMDxIAbQIq7yUOG2u3kT6MKru9rT614-zScd8SM8KHMV35mtc8Gkv77eMSc7C7mJfKMb_CVOv0-MUj6KAFUXQhpjOcUWzvA/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7; } #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVBOEPffjyl7ah7zuaE9Blqx-Ubcyk8dX30a4BGMa7z0vvOtgMqstTi9G-RIMdOUpxw1ghZVy58FJ909C-Ux7Ym2MbLnWcJOdGcskZ-GS4RsoFhyy9Q2ncw6-pnBq8q3b5rk3I9YIApU/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover { color: #DA0; } div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdec1LzpURkosyEieuVh_DIwIg3UUlTmiTxZweZst9mjqA0ScV8ToySwXkHmw0GnZUC8z-n0pEik6qZhCeJXWZTUXX9wsHm_ziVNanao1j-J9gvOrq7HlqGyxGANEAgo3AnaP-YFYZQss/s1600/helperblogger.com-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div><div id="slider"> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a> </div></div>

ចំណុចសំខាន់ ៖  - មុនពេលបន្ថែម images to slider អ្នកត្រូវកែប្រែផ្នែកខ្លះៗ នៅក្នុងកូដខាងលើ

ដោយមើលតាមពណ៍ដែលមាននៅលើអក្សរនៅក្នុងកូដ -

      - កែប្រែទំហំរូបភាព បណ្តោយ ឫ ប្រវែងនៃរូបភាព Width 
កំណត់តម្លៃអោយ រូបភាព ទៅតាមអ្វីដែលអ្នកចង់បាន កែប្រែ ទំហំរូបភាព បណ្តោយ ឫ ប្រវែងនៃរូបភាព Width និង​ កំពស់របស់រូបភាព​ height អោយដូចគ្នា ៕

 width: 500px;
 height: 218px;

      - កែប្រែទំហំស៊ុមនៅជុំវិញរូបភាព
កំណត់តម្លៃអោយស៊ុមនៅជុំវិញ រូបភាព ទៅតាមអ្វីដែលអ្នកចង់បាន កែប្រែ ទំហំរូបភាព បណ្តោយ ឫ ប្រវែងនៃរូបភាព Width និង​ កំពស់របស់រូបភាព​ height អោយដូចគ្នា ៕

 width: 500px;
 height: 218px;

      -អ្នកត្រូវដាក់ Link របស់រូបភាពរបស់អ្នក តើវានៅទីតាំងណា
Ex : តើអ្នកបាន Upload រូបភាពរបស់អ្នកនៅ Website ណាហើយយក　Link or URL រូបភាពរបស់អ្នកពី Website ដែលអ្នកបាន Upload នោះមកដាក់ត្រង់កន្លែងកូដដែលមាន ហាយឡាយ ពណ៍នេះទាំងអស់នោះអ្នកនឹងបាននូវអ្វីដែលអ្នកចង់បានហើយ （with your own images URL）. 

<img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg>

      - ពីពណ៍នាអំពី ស្លាយរបស់អ្នកតើអ្នកចង់និយាយអំពីអ្វី
អ្នកអាចដាក់អ្វីក៍បានតាមតែអ្នកពេញចិត្ត
      - កំណត់ទីតាំង Link នៃរូបភាព
ប្រសិនជាអ្នកចង់កំណត់នៅពេលយើងចុចនៅលើរូបភាព （link） តើអោយវាចូលទៅកាន់ទំព័រណាមួយនៃ ប្លុករបស់យើង ឫ ក៍ចូលទៅកាន់គេហទំព័រដទៃទៀត
អ្នកត្រូវតែ យកអាស័យដ្ឋានណាមួយដែលអ្នកចង់ដាក់ ហើយដាក់ពីលើ សញ្ញា

"#"

 ខាងក្រោមនេះជាអ្វីដែលខ្ញុំធ្វើបានដាក់នៅក្នុង ប្លុករបស់ខ្ញុំ

បើសិនជាមានចម្ងល់អ្នកអាចសួរខ្ញុំបាន សូមអរគុណដែលបានចូលមកទស្សនាប្លុករបស់ខ្ញុំ
សង្ឃឹមថាអ្នកនឹងចូលមកទស្សនាប្លុករបស់ខ្ញុំម្តងទៀត

តាមដាន និង អាន របៀប Design Blogger បន្ថែម ....  If You think it good please like ...... Facebook i1dlsong