ជម្រាបសួរប្រិយមិត្ត សម្រាប់គន្លឹះរចនាខ្ញុំមិនទាន់មានលទ្ធភាពចុះផ្សាយនៅឡើយទេ ដោយសារគន្លឹះប្រភេទនោះត្រូវការថតជាវីដេអូ ដែលនៅផ្ទះខ្ញុំមានសំឡេងរំខាន ខ្ញុំមិនទាន់មានបន្ទប់ផ្ទាល់ខ្លួនសម្រាប់ផលិតជាវីដេអូរចនាក្រាហ្វិកបានទេ អរធ្យាស្រ័យ ។
ក្នុងគន្លឹះនេះខ្ញុំលើកបង្ហាញប្រអប់សម្រាប់ដាក់កូដ ដែលប្រើតែ CSS មិនប្រើ Java Jscript ដើម្បីឲ្យប្ដូរពណ៌អក្សរកូដ ដូចដែលខ្ញុំបានលើកបង្ហាញពីមុនមកទេ ។ លើកនេះកាន់តែងាយស្រួលសម្រាប់ម្ចាស់ប្លក់ដែលចង់បង្ហាញដូច ហើយត្រូវការប្រអប់កូដដែលទាក់ទាញ។
៙ របៀបដាក់ធ្វើជាផ្ទៃរបស់ Blogger ៖
1- ចូលគណនី blogger.com របស់អ្នក។2- ចូលទៅកាន់ Theme >> ចុចសញ្ញាព្រួញក្បែរពាក្យ CUSTOMIZE ហើយយកពាក្យ Edit HTML។
.post-body code.code,span.quot{background:#312b4a;box-shadow:inset 0 1px 4px #2a2542;padding:2px 5px;border-radius:3px;color:#fff;font-size:15px;white-space:normal;letter-spacing:-0.3px}.post-body code.code1,.post-body code.code2{background:#242038;border-left:4px solid #fda80c;padding:8px 10px;margin:20px auto;display:block;overflow:auto;border-radius:2px;white-space:nowrap;font-size:12px;line-height:1.5em;color:#dada8c}.post-body code.code2{border-left:0;border-radius:4px}.post-body code ul li{border:none;padding:2px 0}.post-body code ul{padding:0 20px}pre{box-shadow:0 -20px 20px -20px rgba(0,0,0,.054);margin:0 auto;position:relative;font-family:'source code pro',menlo,consolas,monaco,monospace;background:#0a3d62;color:rgba(255,255,255,.6);overflow:hidden;padding:50px 15px 15px 15px;border-radius:4px;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-ms-word-break:normal;word-break:normal;word-break:normal;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre code{font-size:12px;box-shadow:none;padding:0;background:0;white-space:pre;display:block;overflow-x:scroll;max-width:100%;min-height:60px;max-height:280px;line-height:1.5em}pre::before,pre::after,pre code::before,pre code::after{position:absolute}pre::after,pre code::before,pre code::after{content:'';width:20px;height:20px;border-radius:50%;top:10px}pre::before{content:attr(title);font-weight:500;border-radius:4px 4px 0 0;text-align:left;color:#fff;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:20px 20px;background-color:rgba(0,0,0,0.15);top:0;left:0;width:100%;height:40px;line-height:40px;padding:0 38px;box-sizing:border-box}pre::after{background-color:#ea756f;right:10px}code::before{background-color:#b38af5;right:35px}code::after{background-color:#81ce8e;right:60px}
[rel="code"]{white-space:pre;overflow-x:scroll;display:block;line-height:1.8;margin:10px 0;background:#1d1b2b;border-radius:4px;padding:10px}[rel="code"]::-webkit-scrollbar,[rel="code"]:hover::-webkit-scrollbar{height:0}mark{background-color:#ff4757;border-radius:2px;padding:0 4px;color:#fff}.spoiler-amp{margin:10px 0}.spoiler-amp h4.spoiler-button{color:#222;font-size:14px;font-weight:500;outline:none;margin:0;line-height:1.5em;border-radius:50px;padding:8px 30px;-moz-border-radius:50px}.spoiler-amp h4.spoiler-button:before{content:"";position:absolute;left:15px;top:50%;margin-top:-7px;border:7px solid;border-color:transparent transparent transparent #444}.spoiler-amp h4.spoiler-button:after{content:"\0002B";position:absolute;font-size:20px;line-height:20px;top:50%;margin-top:-10px;text-align:right;right:15px}.spoiler-amp section[expanded] h4.spoiler-button:after{content:"\02013"}amp-accordion section{margin:10px 0}.spoiler-amp amp-accordion div.isi{height:auto;margin:20px 10px;padding:0 0 0 20px;border-left:3px dotted #f0f0f0}
៙ របៀបប្រើក្នុងអត្ថបទ ៖
1- ចុចបង្កើត post ថ្មីមួយ2- ឈរលើតាប HTML ដើម្បីដាក់កូដប្រអប់ចូលអត្ថបទ។
3- ទម្រង់កូដមាន២គឺ ៖
ទម្រង់អត់ចំណងជើង<pre><code>Your Code Here</code></pre>
ទម្រង់មានចំណងជើង
<pre title="HTML"><code>Your Code Here</code></pre>សរុបមក។មិនសូវមានអ្នកត្រូវការប្រអប់កូដនោះទេ តែយើងអាចកែច្នៃប្រអប់កូដសម្រាប់ដាក់អត្ថបទសំខាន់ៗក៏បានដែរ ទៅតាមរូបរាងប្រអប់កូដទាំងនោះ ៕
source https://akbalthom.blogspot.com/2022/06/css-codepenio-blogger.html
Comments
Post a Comment