Note Block សម្រាប់ប្រើបញ្ជាក់ទៅកាន់អ្នកដោយមានជាផ្ទៃពណ៌ និងរូបសញ្ញានានា ដើម្បីបង្ហាញចំណុចសំខាន់អ្វីមួយដល់អ្នកអាន ដែលនេះខុសពីមុខងារ blockquote ដែលគេទុកប្រើសម្រាប់រំលេចសារ ឬឃ្លាសំខាន់ក្នុងអត្ថបទ ។ តោះដូច្នេះយើងចាប់ផ្ដើមប្រើ Note Block ដែលមានពណ៌ស្អាត ជាជាងប្រើ blockquote ។
៙ រចនាបទ Note Block ៖
CSS របស់ Note Block 1
article .note1{position:relative;padding:20px 30px 20px 50px;background-color:#e1f5fe;color:#01579b;font-size:1rem;line-height:1.62em;border-radius:2px}
article .note1:before{content:'\2605';position:absolute;left:18px;font-size:20px}
@media screen and (max-width: 640px){
article .note1 {width: calc(100% + 40px);left: -20px;font-size: 1rem;border-radius: 0;}}
CSS របស់ Note Block 2
.note2 {position: relative; padding: 16px 20px 16px 50px;background: #e1f5fe;color: #3c4043;font-size: .95rem;font-family: inherit;line-height: 1.6em;border-radius: 10px;overflow: hidden;}
.note2::before {content: '';width: 60px;height: 60px;background: #81b4dc;display: block;border-radius: 50%;position: absolute;top: -12px;left: -12px;opacity: .1;}
.note2::after {content: '\002A';position: absolute;left: 18px;top: 16px;font-size: 20px;min-width: 15px;text-align: center;}
CSS របស់ Note Block 3
.note3 {position: relative;padding: 16px 20px 16px 50px;background: #262d3d;color: #ffffff;font-size: 1rem;line-height: 1.6em;border-radius: 5px;overflow: hidden;}
.note3::before {content: '';width: 30px;height: 30px;background: #fefefe;display: block;border-radius: 50%;position: absolute;top: 16px;left: 13px;opacity: .2;}
.note3::after {content: '\1F39C';position: absolute;left: 18px;top: 16px;font-size: 20px;min-width: 15px;text-align: center;}
CSS របស់ Note Block 4
.note4 {position: relative;padding: 16px 20px 16px 50px;background: #e5e5e5;color:black;font-size: 1rem; font-weight:600; line-height: 1.6em;border-radius: 5px;overflow: hidden;}
.note4::before {content: '';width: 30px;height: 30px;background: #ffd800;display: block;border-radius: 50%;position: absolute;top: 15px;left: 8px;opacity: .8;}
.note4::after {content: '\003F';position: absolute;left: 15px;top: 16px;font-size: 20px;min-width: 15px;text-align: center;}
៙ ដាក់ CSS Note Block ចូល template ៖
1- ចូលគណនី blogger.com របស់អ្នក។2- ចូលទៅកាន់ Theme >> ចុចសញ្ញាព្រួញក្បែរពាក្យ CUSTOMIZE ហើយយកពាក្យ Edit HTML។
3- ស្វែងរកស្លាក ]]></b:skin> ហើយចម្លងកូដ CSS Note Block ខាងលើ (1 ឬដាក់ទាំង 4) យកទៅដាក់ខាងលើស្លាកនោះ ។ សូមមើលរូបខាងក្រោម ៖
ចំណាំ ៖ បើសិនប្លក់របស់លោកអ្នកមិនទាន់មាន Font Awesome ទេ សូមដំឡើងវា
៙ របៀបដាក់កូដពុម្ព Font Awesome ចូល template Blogger ៖
- ចូលគណនី blogger.com របស់លោកអ្នក ។ - ដាក់កូដពុម្ពអក្សរ Font Awesome ចូល blogger (បើប្លក់របស់អ្នកមានហើយមិនបាច់ដាក់ទៀតទេ។- ចូលទៅកាន់ Theme >> ចុចសញ្ញាព្រួញក្បែរពាក្យ CUSTOMIZE ហើយយកពាក្យ Edit HTML។
- ស្វែងរកស្លាក <head> ចម្លងកូដខាងក្រោមយកទៅដាក់ពីក្រោមស្លាក ។
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css' rel='stylesheet'/>
source https://akbalthom.blogspot.com/2022/09/note-block-blogger-post-css.html
Comments
Post a Comment