កាតកម្រងព័ត៌មានគឺជា ការរចនាកាត ដែលមានព័ត៌មានលម្អិតសំខាន់ៗរបស់មនុស្សជាក់លាក់ក្នុងវិធីខ្លីៗ។ វាអាចមានព័ត៌មានលម្អិតដូចជាឈ្មោះរបស់មនុស្ស អ៊ីមែល តំណភ្ជាប់ប្រព័ន្ធផ្សព្វផ្សាយសង្គមសម្រាប់បុគ្គលនោះ និងព័ត៌មានលម្អិតសំខាន់ៗផ្សេងទៀត។ យើងអាចស្វែងរកកាតទម្រង់នេះនៅលើគេហទំព័រដូចជាគេហទំព័រផលប័ត្រ និងគេហទំព័រប្រភេទផ្សេងទៀត។
សំខាន់! មុនពេលយើងចាប់ផ្តើមបន្ថែមកូដនៅក្នុង XML ខ្ញុំនឹងណែនាំអ្នកឱ្យធ្វើការបម្រុងទុកនៃរូបរាងបច្ចុប្បន្នរបស់អ្នក។ ដោយចៃដន្យ ប្រសិនបើមានបញ្ហាណាមួយកើតឡើង អ្នកអាចស្ដារវាឡើងវិញនៅពេលក្រោយ។
ជំហានទី 1: ចូលទៅ Blogger Dashboard របស់អ្នក។
ជំហានទី 2: នៅលើផ្ទាំង Blogger Dashboard ចុច Theme ។
ជំហានទី 3: ចុចរូបតំណាងព្រួញចុះក្រោម នៅជាប់នឹង ប៊ូតុង 'customize' ។
ជំហានទី 4: ចុច Edit HTML អ្នកនឹងត្រូវបានប្តូរទិសទៅទំព័រកែសម្រួល។
ប្រសិនបើគំរូរបស់អ្នកមានមុខងារ Dark Mode ហើយប្រសិនបើអ្នកចង់បានពណ៌ផ្សេងនៅពេលស្ថិតក្នុងរបៀបងងឹត អ្នកអាចប្ដូរលេខកូដតាមតម្រូវការរបស់អ្នក។ គំរូនីមួយៗអាចមានថ្នាក់ Dark Mode ផ្សេងគ្នា ដូច្នេះសូមកែតម្រូវវា អ្នកអាចជំនួសថ្នាក់ដែលបានសម្គាល់ជាមួយនឹងថ្នាក់របៀបងងឹតគំរូរបស់អ្នក។ជំហានទី 5: ឥឡូវនេះស្វែងរកកូដ ]]></b:skin> ហើយបិទភ្ជាប់ កូដ CSS ខាងក្រោម ដាក់ទៅលើស្លាក ។
/* Project start */.profile-card{display: flex;flex-direction: column;align-items: center;width: 300px;background: #fffdfc;border-radius: 15px;padding: 20px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);position: relative;}
/* Dark */.drK .profile-card{background:var(--darkBs);}.drK .profile-card::before{background:var(--darkBs);opacity:1;background: #2d2d30;}
.profile-card::before{content: "";position: absolute;top: 0;left: 0;height: 35%;width: 100%;border-radius: 15px 15px 0 20px;background-color: #004aad;}
.image{position: relative;height: 150px;width: 150px;border-radius: 50%;background-color: #004aad;padding: 4px;margin-bottom: 10px;}
/* Dark */.drK .image{background: var(--darkBa);background: #2d2d30;}
.image .profile-img{height: 100%;width: 100%;object-fit: cover;border-radius: 50%;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);}
.profile-card .text-data{display: flex;flex-direction: column;align-items: center;}
.text-data .name{font-size: 22px;font-weight: 500;}
.text-data .job{font-size: 15px;font-weight: 400;opacity: 0.9;}
.profile-card .media-buttons{display: flex;align-items: center;margin-top: 15px;}
.media-buttons .nk{display: flex;align-items: center;justify-content: center;color: #fff;font-size: 18px;height: 34px;width: 34px;border-radius: 50%;margin: 0 8px;background-color: #482dff;text-decoration: none;border-radius: 50%;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);}
.media-buttons .nk:hover{border-radius: 50%;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);font-weight: 200;font-size: 20px;}
.profile-card .buttons{display: flex;align-items: center;margin-top: 25px;}
.buttons .ab{display: flex;color: #fff;text-decoration: none;font-size: 14px;font-weight: 400;border-radius: 38px;margin: 0 10px;padding: 8px 24px;background-color: #004aad;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);}
.ab:hover{box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);transition: 0.3s;}
.profile-card .analytics{display: flex;align-items: center;margin-top: 25px;}
.analytics .data{display: flex;align-items: center;padding: 0 20px;border-right: 1px solid rgb(167, 165, 165);opacity: 0.9;}
.data .ic{font-size: 18px;margin-right: 6px;}
.data:last-child {border-right: none;}/* Project end */
ដើម្បីទទួលបានកូដ HTML ខាងក្រោមសម្រាប់កាតទម្រង់។ អ្នកត្រូវបង្កើតឯកសារពីរមួយជាឯកសារ HTML និងមួយទៀតជាឯកសារ CSS ។ បន្ទាប់ពីបង្កើតឯកសារទាំងពីរនេះរួច អ្នកអាចចម្លង-បិទភ្ជាប់កូដដែលបានផ្ដល់ឱ្យលើឯកសាររបស់អ្នក។ អ្នកក៏អាចទាញយកឯកសារកូដប្រភពទាំងអស់ពីប៊ូតុងទាញយកដែលបានផ្តល់ឱ្យផងដែរ។
ជំហានទី 6: ចូលទៅ Blogger Dashboard ។
ជំហានទី 7: នៅលើ Blogger Dashboard ចុច Layout ។
ជំហានទី 8: ចុច Add a new gadget អ្នកនឹងត្រូវបានបញ្ជូនបន្តទៅកាន់ទំព័រកែសម្រួល។
<div class="profile-card"> <div class="image"><img src="profile.jpg" alt="" class="profile-img" /></div> <div class="text-data"><span class="name">CryptoTUD</span><span class="job">YouTuber & Blogger</span></div> <div class="media-buttons"><a href="#" style="background: #4267b2" class="nk"><i class="bx bxl-facebook"></i></a><a href="#" style="background: #1da1f2" class="nk"><i class="bx bxl-twitter"></i></a><a href="#" style="background: #e1306c" class="nk"><i class="bx bxl-instagram"></i></a><a href="#" style="background: #ff0000" class="nk"><i class="bx bxl-youtube"></i></a></div> <div class="analytics"> <div class="data"><i class="bx bx-heart ic"></i><span class="number">13k</span></div> <div class="data"><i class="bx bx-message-rounded ic"></i><span class="number">18k</span></div> <div class="data"><i class="bx bx-share ic"></i><span class="number">49k</span></div> </div> <div class="buttons"> <a target="_blank" href="#" class="ab">Subscribe</a> <a href="#" class="ab">Contract</a> </div> </div>
ជំហានទី 9: ឥឡូវនេះស្វែងរកកូដបិទភ្ជាប់ HTML Codes នៅខាងលើវា៕
_____________ប្រភពី : https://finestap-design.blogspot.com/2022/12/how-to-make-amazing-profile-card-in.html
No comments
Post a Comment