Blog Archive

Contact Me

Name

Email

Message

Credits

កើត​ចាស់​ឈឺ​ស្លាប់​ជា​ទៀងទាត់
🌱🌳⛈️🏡🛌💤⛈️🌧️🌳

Hover Setting

slideup

កម្មវិធីសំខាន់ៗ ↘︎↘︎↘︎

ពុម្ពអក្សរ​សំណាង

ពុម្ពសំណាង
ធនធាន

ធនធាន
ប្រព័ន្ធ Blogger

Blogger
UX/UI

UX/UI
កម្មវិធី Acrobat

Acrobat
កម្មវិធី Bridge

Bridge
កាមេរ៉ា

កាមេរ៉ា
កម្មវិធី Lightroom

Lightroom
កម្មវិធី Photoshop

Photoshop
កម្មវិធី Illustrator

Illustrator
កម្មវិធី InDesign

InDesign
កម្មវិធី Premiere Pro

Premiere Pro
កម្មវិធី After Effects

After Effects
កម្មវិធី Audition

Audition
កម្មវិធី DaVinci Resolve

DaVinci Resolve
កម្មវិធី Cinema 4D

Cinema 4D
កម្មវិធី Blender

Blender
កម្មវិធី FL Studio

FL Studio
កម្មវិធី Cubase

Cubase
បញ្ញាសិប្បនិម្មិត

បញ្ញាសិប្បនិម្មិត
MacOS

MacOS
Windows

Windows

កូដ​ CSS Pricing Tag (តារាង​តម្លៃ ឬ ព័ត៌មាន) បង្ហាញ​តម្លៃ​ធៀប សេវាកម្ម សម្រាប់ Blogger

Apr16,2025

Widget នេះគឺជា តារាងតម្លៃ (Pricing Plans) ឬ ផ្ទៃបង្ហាញតម្លៃ (Pricing Area) ដែលយើងតែងតែឃើញមាននៅលើ ទំព័រគំរូ Landing Page (Landing Page Templates) មានមុខងារសម្រាប់បង្ហាញឈ្មោះផលិតផល ឬប្រភេទសេវាកម្ម ដោយភ្ជាប់មកជាមួយនូវតម្លៃ ការពិពណ៌នា និងប៊ូតុង បញ្ជាទិញឥឡូវនេះ (order now button) ផងដែរ។ តាមរយៈការប្រើប្រាស់ Widget នេះ អតិថិជនដែលមានបំណងចង់ទិញសេវាកម្ម និងផលិតផល នឹងមានភាពងាយស្រួលជាងមុនក្នុងការមើលតម្លៃ ហើយក៏អាចធ្វើការទំនាក់ទំនងបានផងដែរ។

សម្រាប់ការដំឡើង Widget នេះគឺសមស្របសម្រាប់ដំឡើងនៅលើទំព័រមុខនៃប្លក់ (blog) ហើយក៏នៅលើទំព័រអត្ថបទផងដែរ, រូបរាងដ៏ទំនើប និងសាមញ្ញរបស់វា ធ្វើឱ្យ Widget នេះងាយស្រួលក្នុងការកែប្រែទៅតាមចំណង់ចំណូលចិត្ត។

របៀបដាក់កូដ CSS ៖

កូដនេះ​ជាកូដ HTML + CSS  ​ដូច្នេះ​យើង​អាច​ដាក់​វា​នៅតែ​មួយ​ដុំ​ចូល​គ្នាក៏បាន ឬ​ដាក់​ ​CSS ចូល​ក្នុង template  ហើយ​ចាំ​ដាក់ HTML ចូល​ទី​កន្លែង​ណា​ដែល​អ្នក​ចង់​ដាក់ (អាច​ដាក់​ចូល widgets  ឬ​ដាក់​ចូល​ Post/Page) ។

១- ដាក់​កូដ CSS ចូល template ដោយ​ស្វែងរក​ស្លាក ]]></b:skin> ដាក់កូដ​ពីលើ​ស្លាក ហើយ Save។

កូដ CSS 
/* Pricing Section by Dunia Blanter (www.idblanter.com) */
.pricing-section{font-family:'Google Sans',Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
.pricing-section .pricing-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}
.pricing-container{display:flex;max-width:1000px;margin:0 auto}
.pricing-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}
a.blanter-order-btn{font-size:14px;text-transform:uppercase;text-decoration:none;background:#333;color:#fff;display:inline-block;padding:7px 20px;border-radius:20px;transition:all .3s ease-in-out}
a.blanter-order-btn:hover{transform:scale(1.1)}
.pricing-blanter-column{background:#fff;padding:30px 15px;box-sizing:border-box;border-radius:10px;text-align:center;width:33%;margin:10px;box-shadow:0 7px 7px rgba(0,0,0,0.06);border:2px solid #fff;transition:all .3s ease-in-out}
.pricing-blanter-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
.pricing-blanter-column img{width:50px}
.pricing-section i{font-size:3rem}
.blanter-price{font-weight:700;font-size:22px}
.service-info{opacity:.7}
.blanter-2-column .pricing-blanter-column{width:50%}
.pricing-blanter-column:nth-child(1) .blanter-price,.pricing-blanter-column:nth-child(1) i{color:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2) .blanter-price,.pricing-blanter-column:nth-child(2) i{color:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3) .blanter-price,.pricing-blanter-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */
.pricing-blanter-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */
.pricing-blanter-column:nth-child(1) .pricing-tag,.pricing-blanter-column:nth-child(1) a.blanter-order-btn{background:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2) .pricing-tag,.pricing-blanter-column:nth-child(2) a.blanter-order-btn{background:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3) .pricing-tag,.pricing-blanter-column:nth-child(3) a.blanter-order-btn{background:#2b73f6} /* Change Color Code */
@media screen and (max-width:580px){
.pricing-blanter-column,.blanter-2-column .pricing-blanter-column{width:auto}
.pricing-container{display:block}
}

២- វិធី​ទី​២​ដាក់​កូដ CSS ជាប់ជាមួយ HTML គឺ​ត្រូវ​ថែម​ស្លាក់ <style> ...... </style>

កូដ 
<style>  your code. </style>

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

នៅ​ក្នុង​គន្លឹះ​នេះ​យើង​មាន ៣​ជ្រើស ៖

២ប្រលោះ

កូដ ២ប្រលោះ 
<h3 class="title">2 Column Widget</h3>

<div class="pricing-section blanter-2-column">
<div class="pricing-container">
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-HWl2PCk1T_g/XqqDylYxjCI/AAAAAAAAONY/h6Yr9fkzWhQ35ob37L9PnxiX7ExTmns1gCLcBGAsYHQ/s50/basic.png' alt='Basic'/>
        <h3>Basic</h3>
        <div class="pricing-tag">20% off</div>
        <div class="blanter-price">Rp 150.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>1 License</li>
        <li>Full Optimization</li>
        <li>1 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-KVVFsnJlM9E/XqqD0Qo0KDI/AAAAAAAAONg/FIn1BXo4PU8xX12gCac755x9vXDHOfVvQCLcBGAsYHQ/s50/personal.png' alt='Personal'/>
        <h3>Personal</h3>
        <div class="pricing-tag">Best Value</div>
        <div class="blanter-price">Rp 220.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>3 License</li>
        <li>Full Optimization</li>
        <li>3 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
</div>
</div>

៣ប្រលោះ

កូដ ៣ ប្រលោះ 
<div class="container">

<h3 class="title">3 Column Widget</h3>

<div class="pricing-section">
<div class="pricing-container">
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-HWl2PCk1T_g/XqqDylYxjCI/AAAAAAAAONY/h6Yr9fkzWhQ35ob37L9PnxiX7ExTmns1gCLcBGAsYHQ/s50/basic.png' alt='Basic'/>
        <h3>Basic</h3>
        <div class="pricing-tag">20% off</div>
        <div class="blanter-price">Rp 150.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>1 License</li>
        <li>Full Optimization</li>
        <li>1 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-KVVFsnJlM9E/XqqD0Qo0KDI/AAAAAAAAONg/FIn1BXo4PU8xX12gCac755x9vXDHOfVvQCLcBGAsYHQ/s50/personal.png' alt='Personal'/>
        <h3>Personal</h3>
        <div class="pricing-tag">Best Value</div>
        <div class="blanter-price">Rp 220.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>3 License</li>
        <li>Full Optimization</li>
        <li>3 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-QoGlZN-t_fQ/XqqDzmE276I/AAAAAAAAONc/AG5ZXRxQo9Q24-LVUtdg_Jf3Za0kZqacACLcBGAsYHQ/s50/developer.png' alt='Developer'/>
        <h3>Developer</h3>
        <div class="pricing-tag">For Business</div>
        <div class="blanter-price">Rp 999.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>Unlimited License</li>
        <li>Full Optimization</li>
        <li>6 Month Full Support</li>
        <li>Easy Customize</li>
        <li>1 Bonus Template</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
</div>
</div>

៤​ប្រលោះ

កូដ 4 ប្រលោះ  
<h3 class="title">4 Column Widget</h3>

<div class="pricing-section blanter-4-column">
<div class="pricing-container">
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-HWl2PCk1T_g/XqqDylYxjCI/AAAAAAAAONY/h6Yr9fkzWhQ35ob37L9PnxiX7ExTmns1gCLcBGAsYHQ/s50/basic.png' alt='Basic'/>
        <h3>Basic</h3>
        <div class="pricing-tag">20% off</div>
        <div class="blanter-price">Rp 150.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>1 License</li>
        <li>Full Optimization</li>
        <li>1 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-KVVFsnJlM9E/XqqD0Qo0KDI/AAAAAAAAONg/FIn1BXo4PU8xX12gCac755x9vXDHOfVvQCLcBGAsYHQ/s50/personal.png' alt='Personal'/>
        <h3>Personal</h3>
        <div class="pricing-tag">Best Value</div>
        <div class="blanter-price">Rp 220.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>3 License</li>
        <li>Full Optimization</li>
        <li>3 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-HWl2PCk1T_g/XqqDylYxjCI/AAAAAAAAONY/h6Yr9fkzWhQ35ob37L9PnxiX7ExTmns1gCLcBGAsYHQ/s50/basic.png' alt='Basic'/>
        <h3>Basic</h3>
        <div class="pricing-tag">20% off</div>
        <div class="blanter-price">Rp 150.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>1 License</li>
        <li>Full Optimization</li>
        <li>1 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://2.bp.blogspot.com/-KVVFsnJlM9E/XqqD0Qo0KDI/AAAAAAAAONg/FIn1BXo4PU8xX12gCac755x9vXDHOfVvQCLcBGAsYHQ/s50/personal.png' alt='Personal'/>
        <h3>Personal</h3>
        <div class="pricing-tag">Default</div>
        <div class="blanter-price">Rp 220.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>3 License</li>
        <li>Full Optimization</li>
        <li>3 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="blanter-order-btn" href="#" title="#">Order Sekarang</a>
    </div>
</div>
</div>

អ្នក​អាច​ផ្លាស់បប្ដូរ​ពី​រូបភាព ទៅ​ជា FontAwesome ចំណុច​ដែល​ត្រូវ​កែប្រែ ៖

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGq90o9m30nkLdWgAWAI77uCKdrSYSJZwLOyQJzbC04NI7jcxdTYN121MGBQ0WcXQoPj4xTVaJmX78sBpE0lT1K21M3YqojMmfeDY-hIiUEvOnXXxI0FD4d-E1kwmwZ4DOfgq5GVrqlt8/s50/basic.png' alt='Basic'/>

ប្ដូរ​មកប្រើ FontAwesome វិញ 

<i class='fas fa-home'></i>

គន្លឹះនេះ​ចប់តែ​ត្រឹម​ប៉ុណ្ណឹង៕

_____________
ប្រភពពី idblanter.com
ចែករំលែក ៖

No comments

Post a Comment

៙ គោលការណ៍ក្នុងការផ្តល់យោបល់ ៖
1. យោបល់ត្រូវតែសរសេរជាភាសាខ្មែរ តែពាក្យបច្ចេកទេសសរសេរជាភាសាអង់គ្លេស។
2. យោបល់មិនត្រូវលើសពី 1000 តួអក្សរឡើយ។ ការបំបែកយោបល់មិនត្រូវបានអនុញ្ញាតទេ។
3. យោបល់ដែលចាត់ទុកថាជា Spam ឬមានគោលបំណងផ្សព្វផ្សាយពាណិជ្ជកម្មតែមួយមុខ នឹងត្រូវលុប។
4. ការពិភាក្សាអំពីនយោបាយមិនត្រូវបានអនុញ្ញាតនៅលើគេហទំព័រនេះទេ។
5. ការចែករំលែកតំណភ្ជាប់ដែលពាក់ព័ន្ធត្រូវបានអនុញ្ញាត។ តំណភ្ជាប់និងតម្រងពាក្យ​ខ្លះ​ត្រូវ​បាន​ហាមឃាត់។
6. យោបល់ដែលរអ៊ូរទាំអំពីប្រធានបទនៃការបង្ហោះ ឬប្រភពរបស់វានឹងត្រូវលុប។
7. ការប្រើភាសាប្រមាថក្នុងយោបល់ ឬឈ្មោះអ្នកប្រើប្រាស់នឹងបណ្តាលឱ្យមានការហាមឃាត់។
8. ការវាយប្រហារ/ការបៀតបៀនដោយផ្ទាល់ នឹងបណ្តាលឱ្យមានការហាមឃាត់ភ្លាមៗ។
9. អ្នកសម្របសម្រួលអាចកែប្រែ/លុបយោបល់ដោយមិនចាំបាច់ជូនដំណឹង។

Subscribe to: Post Comments (Atom)