របៀបដាក់ ព័ត៌មានអ្នកសរសេរប្លុក (About Author) ជាស្ទីល CSS

Home » Unlabelled » របៀបដាក់ ព័ត៌មានអ្នកសរសេរប្លុក (About Author) ជាស្ទីល CSS

របៀបដាក់ ព័ត៌មានអ្នកសរសេរប្លុក (About Author) ជាស្ទីល CSS

Posted by អេសស៊ី on 21 July 2014 Label:

ក្រោយពេលដែលលោកអ្នកបានបង្កើតប្លុកករហើយ ទោះបីប្លុកនោះ ល្បី ឬមិនសូវល្បីក៏ដោយ លោកអ្នកតែងតែចង់ឲ្យគេ ស្កាល់ និងដឹងពត៌មាន ពិសេស មានអាស័យដ្ឋានទាក់ទង។ ការដាក់ពត៌មានអំពីអ្នកសរសេរប្លុក (About Author) មិនមែនជាការពិបាកនោះទេ គឺងាយៗ លោកអ្នកអាចទាំងធ្វើបានដោយប្រើ HTML កូដសាមញ្ញក៏អាចដាក់បានដែរ តែត្រង់ថាមើលទៅទាក់ភ្នែកឬអត់ខ្ញុំមិនហ៊ានថាទេ។ តែពេលនេះ ទីងមោង សូមណែនាំ លោកអ្នកនូវរបៀបដាក់ ពត៌មានអ្នកសរសេរប្លុកដែលជាស្ទីល CSS ដែលមើលទៅមានលក្ខណៈស្រស់ស្អាត ទាក់ភ្នែក។

ជាដំបូង លោកអ្នកត្រូវដឹងថាកូដ នេះយើងត្រូវការដាក់វាជាពីរដំណាក់កាល។ ដែលដំណាក់កាលទីមួយ ជាការដាក់កូដ CSS និងដំណាក់កាលទីពីរជាការដាក់កូដ HTML ដែលកូដ HTML នោះ ជាការហៅ ស្ទីល ពី CSS មកប្រើ (គួរចងចាំទុក)។

៙ របៀបដាក់ ព័ត៌មានអ្នកសរសេរប្លុក (About Author) ជាស្ទីល CSS ៖
- កត់ត្រាចូល Log In ក្នុងគណនី Blogger របស់អ្នក។
- ចូលទៅកាន់ម៉ឺនុយ Template >> Edit HTML (មើលរូប)

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

- រមូលចុះ (scroll down) ទៅដល់ ]]></b:skin>
- ចម្លងកូដខាងក្រោមទៅបិទភ្ជាប់ នៅពីលើស្លាក ]]></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;

}

៙ ចូលដល់ការហៅ CSS មកប្រើនៅទីតាំងណាមួយដែលអ្នកចង់ដាក់ហើយ ៖
- ចូលទៅកាន់ផ្នែក Layout >> រួចចុចលើតំណអក្សរ Add a Gadget នៅទីតាំងណាមួយ (ឧទាហរណ៍សូមមើលរូបខាងក្រោម)

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

-ចម្លងកូដខាងក្រោមនេះ យកទៅបិទភ្ជាប់ក្នុង HTML/JavaScript ហើយចុចប៊ូតុង Save។
-បន្ថែម ៖ ចំពោះឈ្មោះ 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>

*** ចំណាំ ៖ អ្នកត្រូវប្តូរកូដមួយចំនួន ៖
>> ប្តូរនៅត្រង់ដំណរូបភាព ៖ "http://3.bp.blogspot.com/-_Fb3IhsNbQo/UtNa1wDjVUI/AAAAAAAAAUg/lMtL6mlokk0/s320/Ting-Moung-Author.jpg" ទៅជាដំណរូបភាពរបស់អ្នក។
>> នៅត្រង់សញ្ញាទ្រុងជ្រូកពណ៌ខៀវ ៖ ជាកន្លែងដំណទិសដៅដែលលោកអ្នកចង់ឲ្យវាទៅកាន់ទីតាំងណាមួយ អាចជា Facebook, Twitter, Youtube, .... ជាដើម។
>> នៅត្រង់ពាក្យពេចន៍ ឃ្លោងឃ្លា មួយចំនួន សូមប្តូរទៅជាអ្វីដែលអ្នកចង់សរសេរ។

អេសស៊ី