ជាដំបូង លោកអ្នកត្រូវដឹងថាកូដ នេះយើងត្រូវការដាក់វាជាពីរដំណាក់កាល។ ដែលដំណាក់កាលទីមួយ ជាការដាក់កូដ CSS និងដំណាក់កាលទីពីរជាការដាក់កូដ HTML ដែលកូដ HTML នោះ ជាការហៅ ស្ទីល ពី CSS មកប្រើ (គួរចងចាំទុក)។
៙ របៀបដាក់ ព័ត៌មានអ្នកសរសេរប្លុក (About Author) ជាស្ទីល CSS ៖
- កត់ត្រាចូល Log In ក្នុងគណនី Blogger របស់អ្នក។
- ចូលទៅកាន់ម៉ឺនុយ Template >> Edit HTML (មើលរូប)
- ចម្លងកូដខាងក្រោមទៅបិទភ្ជាប់ នៅពីលើស្លាក ]]></b:skin> រួចហើយសូមចុច Save template ជាការស្រេច។ (មើលឲ្យច្បាស់ពី ទីតាំងដាក់កូដ)
កូដដែលត្រូវយកទៅដាក់នៅខាងលើស្លាក ]]></b:skin>
.authbio{
color: #555;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 3px solid #09f;
width: 570px;
padding: 10px 0px 30px 0px;
margin: 10px 0 10px 0;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
.authbio img {
height: 100px;
width: 100px;
float:left;
border:3px solid #cccccc;
-moz-border-radius:60px;
-webkit-border-radius:60px;
-o-border-radius:60px
padding: 0px;
margin-left:5px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;
}
.authbio h3{ font-family:Verdana, Geneva, sans-serif;
background-color:#09F;
color: #FFF;
padding: 5px 0 5px 0;
margin: 10px 0px 5px 133px ;
}
.authbio a{
text-decoration:none;
font-style:oblique;
}
color: #555;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 3px solid #09f;
width: 570px;
padding: 10px 0px 30px 0px;
margin: 10px 0 10px 0;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
.authbio img {
height: 100px;
width: 100px;
float:left;
border:3px solid #cccccc;
-moz-border-radius:60px;
-webkit-border-radius:60px;
-o-border-radius:60px
padding: 0px;
margin-left:5px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;
}
.authbio h3{ font-family:Verdana, Geneva, sans-serif;
background-color:#09F;
color: #FFF;
padding: 5px 0 5px 0;
margin: 10px 0px 5px 133px ;
}
.authbio a{
text-decoration:none;
font-style:oblique;
}
៙ ចូលដល់ការហៅ CSS មកប្រើនៅទីតាំងណាមួយដែលអ្នកចង់ដាក់ហើយ ៖
- ចូលទៅកាន់ផ្នែក Layout >> រួចចុចលើតំណអក្សរ Add a Gadget នៅទីតាំងណាមួយ (ឧទាហរណ៍សូមមើលរូបខាងក្រោម)
-បន្ថែម ៖ ចំពោះឈ្មោះ widget មិនចាំបាច់ដាក់ឈ្មោះទេ។
កូដដែលត្រូវយកទៅដាក់នៅក្នុង HTML/JavaScript
<div class='authbio'>
<div style='float: left;'>
<img alt='The author of Ting Moung' src='http://3.bp.blogspot.com/-_Fb3IhsNbQo/UtNa1wDjVUI/AAAAAAAAAUg/lMtL6mlokk0/s320/Ting-Moung-Author.jpg'/></div>
<h3><strong>ពត៌មានអ្នកសរសេរប្លុក :</strong></h3>
ខ្ញុំជាជនជាតិខ្មែរ។ អ្វីដែលខ្ញុំកំពុងតែធ្វើគឺដើម្បីបច្ចេកវិទ្យារបស់ខ្មែរយើងឲ្យកាន់តែមានឈ្មោះនៅលើផ្នែកបច្ចេកវិទ្យា និងរួមចំណែកលើកស្ទួយការសរសេរប្លុករបស់ខ្មែរយើងផងដែរ។ ខ្ញុំសង្ឃឹមថា ការសរសេររបស់ខ្ញុំនឹងមានប្រយោជន៍ដល់អ្នកទាំងអស់គ្នាក្នុងការរួមចំណែក បង្កើនអក្សរខ្មែរឲ្យមាននៅក្នុងពិភពបច្ចេកវិទ្យា។
<a href='#'> ទាក់ទងមកខ្ញុំ </a>
</div>
<div style='float: left;'>
<img alt='The author of Ting Moung' src='http://3.bp.blogspot.com/-_Fb3IhsNbQo/UtNa1wDjVUI/AAAAAAAAAUg/lMtL6mlokk0/s320/Ting-Moung-Author.jpg'/></div>
<h3><strong>ពត៌មានអ្នកសរសេរប្លុក :</strong></h3>
ខ្ញុំជាជនជាតិខ្មែរ។ អ្វីដែលខ្ញុំកំពុងតែធ្វើគឺដើម្បីបច្ចេកវិទ្យារបស់ខ្មែរយើងឲ្យកាន់តែមានឈ្មោះនៅលើផ្នែកបច្ចេកវិទ្យា និងរួមចំណែកលើកស្ទួយការសរសេរប្លុករបស់ខ្មែរយើងផងដែរ។ ខ្ញុំសង្ឃឹមថា ការសរសេររបស់ខ្ញុំនឹងមានប្រយោជន៍ដល់អ្នកទាំងអស់គ្នាក្នុងការរួមចំណែក បង្កើនអក្សរខ្មែរឲ្យមាននៅក្នុងពិភពបច្ចេកវិទ្យា។
<a href='#'> ទាក់ទងមកខ្ញុំ </a>
</div>
*** ចំណាំ ៖ អ្នកត្រូវប្តូរកូដមួយចំនួន ៖
>> ប្តូរនៅត្រង់ដំណរូបភាព ៖ "http://3.bp.blogspot.com/-_Fb3IhsNbQo/UtNa1wDjVUI/AAAAAAAAAUg/lMtL6mlokk0/s320/Ting-Moung-Author.jpg" ទៅជាដំណរូបភាពរបស់អ្នក។
>> នៅត្រង់សញ្ញាទ្រុងជ្រូកពណ៌ខៀវ ៖ ជាកន្លែងដំណទិសដៅដែលលោកអ្នកចង់ឲ្យវាទៅកាន់ទីតាំងណាមួយ អាចជា Facebook, Twitter, Youtube, .... ជាដើម។
>> នៅត្រង់ពាក្យពេចន៍ ឃ្លោងឃ្លា មួយចំនួន សូមប្តូរទៅជាអ្វីដែលអ្នកចង់សរសេរ។
0 Response to "របៀបដាក់ ព័ត៌មានអ្នកសរសេរប្លុក (About Author) ជាស្ទីល CSS"
Post a Comment