របៀបដាក់ផ្ទាំងរូបភាព ផុសឡើងនៅលើប្លក់

   ជួបគ្នាដូចសព្វមួយដង ថ្ងៃនេះមានគន្លឹះបន្តិចបន្តួចដើម្បីបង្ហាញ ដល់អ្នកទាំងអស់គ្នាដែលតែង តែចូលមក ទស្សនានៅកូនប្លក់មួយនេះ។ ក្នុងគន្លឹះនេះខ្ញុំនឹងបង្ហាញអំពីរបៀបដាក់ផ្ទាំងរូបភាព ផុសឡើងនៅលើប្លក់ដើម្បី ផ្សាយជាលក្ខណៈ Promotion ឬក៏ការផ្សាយពាណិជ្ជកម្មផ្សេងៗ។

១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </head>

<style type='text/css'>
#floatingWidget{position:fixed;top:0;left:0;bottom:0;right:0;z-index:-10;opacity:0;transition:.5s;background:rgba(0,0,0,0.5)}
#floatingWidget.active{z-index:9999;opacity:1;overflow-y:auto}
.floating-inner{position:absolute;width:600px;max-width:100%;height:360px;max-height:100%;top:50%;left:50%;background:#fff;padding:10px;border-radius:3px;transform:translate(-50%,-50%);box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.floating-inner img{width:100%;height:100%;padding:10px;box-sizing:border-box;}
span.x{position:absolute;top:0;right:0;height:20px;width:20px;background:red;z-index:2;cursor:pointer;}
span.x::before{content:"";position:absolute;top:50%;left:50%;height:2px;width:50%;background:#fff;transform:translate(-50%,-50%)}
</style>

៤-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body>
ចំណាំ៖ ប្តូរ # ទៅជាតំណរភ្ជាប់រូបភាពរបស់អ្នក

<div id='floatingWidget'>
<div class='floating-inner'>
<span class='x' onclick='closeModal()'></span>
<img src='#'/>
</div></div>

៥-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body>

<script type='text/javascript'>
//<![CDATA[
function openModal() {
    document.getElementById('floatingWidget')
        .classList.add('active')
}

function closeModal() {
    document.getElementById('floatingWidget')
        .classList.remove('active')
}
setTimeout(function() {
    openModal()
}, 250)
//]]>
</script>

៦-ចុចពាក្យ Save Theme។