Loading...

September 4, 2019

របៀប​ដាក់​​កូដ​របារ​រមូរ (Scroll bar) ដែល​មាន​ពណ៌​ស្អាតៗ​សម្រាប់ Blogger (៦ស្ទីល)


សួស្ដី​ប្រិយមិត្ត និង​អ្នក​ដែល​កំពុង​ប្រើប្រាស់ Blogger ទាំងអស់​គ្នា ថ្ងៃ​នេះ​ខ្ញុំ​ដកស្រង់​គន្លឹះ CSS ក្នុង​ការ​កែប្រែ​រូបរាង Scroll bar ដែល​ជា​ភាសាខ្មែរ​គឺ របារ​រមូរ ដែល​មាន​ពណ៌​ស្អាត​ៗចំនួន ៦ស្ទីល ។ កូដ​នេះ​ដំណើរការ​ជាមួយ​កម្មវិធី​រុករក​អ៊ីនធឺណិត​ដែល​ស្គាល់ Webkit ដូចជា Opera, Chrome, Safari, UC Browser ដែល​សម្រាប់ firefox គឺ​អត់​ដើរ​ទេ 🙏😂 ។


៙ របៀប​ដាក់​កូដ ៖

១- ចូលទៅ Blogger.com
២- ចូល​ទៅផ្នែក Theme >>> Edit HTML
៣- ចុច​លើ​កូដ (កន្លែង​ណា​ក៏​បាន) រួច​ចុច Ctrl+F ដើម្បី​បើក​មុខងារ​ស្វែងរកកូដ
៤- វាយ​ពាក្យ ]]></b:skin> រួច​ចម្លង​កូដ Scroll bar យក​ទៅ​ដាក់​ពី​លើ រួច​​ចុច Save Theme ជាការស្រេច ។ សូម​មើលរូប


ស្ទីល​ទី​១
body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}

ស្ទីល​ទី​២
body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}

ស្ទីល​ទី​៣
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

ស្ទីល​ទី​៤
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #e78632;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

ស្ទីល​ទី​៥
body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #00aeff, #a68eff);
  border-radius: 10px;
  -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}

ស្ទីល​ទី​៦
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #aab74d;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

_____________
ប្រភព https://www.getwebinfo.com/2019/08/how-to-customize-blogger-scrollbar-with.html

Post a Comment

Whatsapp Button works on Mobile Device only

វាយតែមួយពាក្យដែលអ្នកចង់ស្វែងរក