កូដ​ប៊ូតុង​​ពណ៌​ប្រដេញ ​មាន​ចលនារហូត ​នៅ​ពេល​ដាក់​ម៉ៅ​ពីលើ​សម្រាប់ Blogger

នៅ​អត្ថបទ​មុន​ខ្ញុំ​បាន​បង្ហាញ​ពី​របៀប​ដាក់​កូដ​ប៊ូតុងពណ៌​ប្រដេញ ដែល​មាន​ចលនា​បន្តិច​នៅ​ពេញ​ដាក់​ម៉ៅ​លើ​ ។ តែ​លើក​នេះ​ខ្ញុំ​បាន​កែ​កូដ​នេះ​ឲ្យ​មាន​ចលនា​ពណ៌​ប្រដេញ ទៅ​រហូត​​នៅ​ពេល​យក​ម៉ៅ​ដាក់​​ពី​លើ។ ឃើញ​ថា​ខុស​មុន​បន្តិច ដូច្នេះ​សូម​មើល​របៀប​ដាក់​ខាង​ក្រោម​នេះ ៖

៙ របៀប​ដាក់​កូដ​ចូល​ក្នុង template ៖

១- ចូល​ក្នុង​គណនី​ Blogger របស់​អ្នក

២- ចូល​ទៅ​កាន់ Theme ហើយចុច​សញ្ញា​ព្រួញ​ចុះ​ក្រោម​ រើស​យក Edit HTML ដើម្បី​ចូល​ទៅ​កែ​កូដ HTML ។

៣- ស្វែង​រក​ស្លាក​កូដ ]]></b:skin> ហើយ​ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ​ដាក់​ពី​លើ ហើយ​ចុច Save និង​ចាកចេញ ។ ចំណាំ​ បើ​លោកអ្នក​បាន​ដំឡើង​កូដ button ស្រដៀង​នេះ​ពី​មុន​មក សូម​ធ្វើការ លុប​ចោល​មុន​ធ្វើការ​ដំឡើង​កូដ​មួយ​នេះ ។

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.buttons {
    margin: 0%;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
}

.btn-hover {
    width: 170px;
    font: $(body.font);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 45px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    padding-top: 0px;
    padding-bottom: 0px;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    animation: animate 10s linear infinite;
}
@keyframes animate {
  0% {background-position: 0%;}
  100% {background-position: 400%;}
}

.btn-hover:focus {outline: none;}

.btn-hover.color-0 {
    background-image: linear-gradient(90deg, #EC37D0, #D92B2B, #FFAA0D, #EC37D0);
    box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}
.btn-hover.color-1 {
    background-image: linear-gradient(90deg, #25aae1, #40e495, #30dd8a, #25aae1);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
    background-image: linear-gradient(90deg, #f5ce62, #e43603, #fa7199, #f5ce62);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
    background-image: linear-gradient(90deg, #667eea, #764ba2, #6B8DD6, #667eea);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
    background-image: linear-gradient(90deg, #fc6076, #ff9a44, #ef9d43, #fc6076);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
    background-image: linear-gradient(90deg, #0ba360, #3cba92, #30dd8a, #0ba360);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
    background-image: linear-gradient(90deg, #009245, #FCEE21, #00A8C5, #009245);
    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
    background-image: linear-gradient(90deg, #6253e1, #852D91, #A3A1FF, #6253e1);
    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
    background-image: linear-gradient(90deg, #29323c, #485563, #2b5876, #29323c);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
    background-image: linear-gradient(90deg, #25aae1, #4481eb, #04befe, #25aae1);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
        background-image: linear-gradient(90deg, #EC37D0, #ec8c69, #f7186a , #EC37D0);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
       background-image: linear-gradient(90deg, #eb3941, #e43603, #e14e53, #eb3941);
    box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}


៙ របៀប​ប្រើ​កូដ​ក្នុង​អត្ថបទ ឬ ទំព័រ ៖

១- ចុច​បើក​យក​អត្ថបទ ឬ ទំព័រ​ថ្មី​មួយ​ដើម្បី​សាកល្បង

២- ឈរ​លើ​ផ្នែក HTML ហើយ​ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ​ដាក់ 

<div class="buttons">
    <button class="btn-hover color-0"><a href="#" target="_blank">BUTTON</a></button>  
    <button class="btn-hover color-1"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-2"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-3"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-4"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-5"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-6"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-7"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-8"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-9"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-10"><a href="#" target="_blank">BUTTON</a></button>
    <button class="btn-hover color-11"><a href="#" target="_blank">BUTTON</a></button>
</div>


៣- ចំណុច​កែប្រែកូដ

btn-hover color-0 ដល់ 11 ជា​ពណ៌​របស់​ប៊ូតុង​ មើល​តាម​គំរូ ។
# ជា​កន្លែង​ដែល​យើង​ដាក់​តំណភ្ជាប់
BUTTON ជា​ពាក្យ​របស់​ប៊ូតុង


source https://akbalthom.blogspot.com/2021/05/blogger.html

Comments