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

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

Tags: Blogger

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

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

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

Post a Comment

អំពីទីនេះ!

ប្រចាំសប្ដាហ៍

រាយការណ៍

Stay Connected

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

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

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

Post a Comment

អំពី​ទីនេះ!

ប្រចាំ​សប្ដាហ៍

រាយការណ៍

Stay Connected

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

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

អំពីទីនេះ!

ប្រចាំសប្ដាហ៍