របៀប​ដាក់​ពណ៌​ផ្ទៃ​ Background ឲ្យ​ចំណងជើង Widget

ចំពោះ​អ្នកប្រើ template ដែល​​ទាញ​យក​ពី​គេហទំព័រ​​ផ្សេង​ស្រាប់ៗ ​មិន​សូវ​ខ្វល់​ពី​ការ​កែច្នៃ​រូបរាង​អ្វី​ទេ ព្រោះ​ភាគ​ច្រើន​គេ​បាន​រចនា​ស្អាតៗ​ហើយ តែ​ចំពោះ​អ្នក​ប្រើ template ដែល​​ Blogger ផ្ដល់​ឲ្យ​ប៉ុន្មាន​ម៉ូដ​នោះ​ ប្រាកដ​ជា​ចង់​រចនា​បន្ថែម​ទៀត​ ព្រោះ​រាល់ template ទាំង​​នោះ​មើល​ទៅ​សាមញ្ញ​ពេក។ ក្នុង​គន្លឹះ​ខ្ញុំ​សូម​បង្ហាញ​ពី​ការ​ដាក់​ពណ៌​ផ្ទៃ (Background) ឲ្យ​រាល់​ចំណងជើង​របស់ Widget (ធាតុ​ក្រាហ្វិក) ដែល​ជា​ធម្មតា​មាន​ត្រឹម​អក្សរ​ទទេ ​មិន​មាន​អ្វី​សោះ។ ចង់​ដឹង? សូម​មើល​របៀប​ដាក់​ខាង​ក្រោម​នេះ ៖

៙ របៀប​ដាក់​ពណ៌​ផ្ទៃ​ Background ឲ្យ​ចំណងជើង Widget ៖

- កត់ត្រា​ចូល (Log In) ក្នុង​គណនី Blogger របស់​លោក​អ្នក​ជា​មុន​សិន។
- ចូល​ដល់​​ក្ដារ​បញ្ជា​សូម​ចូល​ទៅ Template >> Edit HTML .

- រក​មើល​ស្លាក <b:skin>...</b:skin> ដោយ​ចុច​លើ​សញ្ញា​ព្រួញ​ពណ៌ខ្មៅ​ដែល​នៅ​ពី​​មុខ​វា

- រមូល​ចុះ (scroll down) ទៅ​ដល់ ]]></b:skin>
- ចម្លង​កូដ​ខាង​ក្រោម​ យក​ទៅ​​បិទ​​ភ្ជាប់​​​ពី​លើ​ស្លាក ]]></b:skin> រួច​​ហើយ​អ្នក​អាច​ចុច Preview template ដើម្បី​មើល​សាក​សិន , បើ​ត្រឹមត្រូវ​ហើយ​សឹម​ចុច  Save template  ​ជាការស្រេច។ មើល​រូប​ខាង​ក្រោម​នេះ

 

៙ កូដ​ពណ៌​ផ្ទៃ​ Background ឲ្យ​ចំណងជើង Widget (មាន​គែម​ជ្រុង​) ៖

.sidebar h2 {
text-align: center;
background-color: #0066FF;
padding: 5px ;
color: #ffffff;
}

- background-color: #0066ff : អ្នក​អាច​ដូរ​តម្លៃ​ពណ៌​ទៅ​ជា​ពណ៌​ដែល​អ្នក​ចូល​ចិត្ត។
- text-align:center : សម្រាប់​តម្រង់​អក្សរ​ចំណងជើង Widget មាន​ជា center=កណ្ដាល, left=ឆ្វេង, right=ស្ដាំ ។
- color : ជា​ពណ៌​របស់​អក្សរ​ចំណងជើង Widget ។

text-align: left

៙ កូដ​ពណ៌​ផ្ទៃ​ Background ឲ្យ​ចំណងជើង Widget (មាន​គែម​មូល​) ៖

.sidebar h2 {
text-align: center;
background-color: #0066FF;
border-radius: 15px;
padding: 5px ;
color: #ffffff;
}

- border-radius: 15px : សម្រាប់​ធ្វើ​ឲ្យ​គែម​មូល តម្លៃ​លេខ​កាន់តែ​ធំ គែម​កាន់តែ​មូល។

text-align: left និង border-radius: 15px

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