របៀប​កែប្រែ Read More ទៅជា​ឆ្នុច​ផុស​ប៉ោង​មាន​ពណ៌​

   កាល​លើក​មុន​ខ្ញុំ​ធ្លាប់​បាន​បង្ហាញ​អត្ថបទ​មួយ​និយាយ​ពី "របៀប​ដាក់​អត្ថបទ​សង្ខេប​នៅ​ទំព័រ​ដើម​ដោយ​មិន​សរសេរ​កូដ" រួច​មក​ហើយ​។
ក្នុង​គន្លឹះ​នេះ​យើង​​នឹង​បាន​ដឹង​ពី​របៀប​កែប្រែ​អក្សរ Read More ដែល​មាន​ត្រឹម​ជា​តំណ​ធម្មតា ឲ្យ​​ទៅ​ជា​​​រូបរាង​ button (ឆ្នុច) មាន​ពណ៌​។ តែ​មុន​នឹង​ស្វែងយល់​សន្មត​ថា​លោកអ្នក​បាន​ដឹង​​និង​ចេះ​ប្រើ​​មុខងារ Read More នេះ​ហើយ! បើ​មិន​ទាន់​ទេ សូម​​ចុច​ទី​នេះ ​ដើម្បី​មើល​ពី​របៀប​ប្រើ Read More សិន។

   បើ​បាន​ដឹង​ពី​មុខងារ Read More រួច​ហើយ ហើយ​ចង់​ដូរ​វា​ឲ្យ​មាន​លក្ខណៈ​​ជា​ឆ្នុច​នោះ ខាង​ក្រោម​នេះ​​ខ្ញុំ​លើក​យក ឆ្នុច Read More ចំនួន 6 ពណ៌ សម្រាប់​កែប្រែ​ឲ្យ​វា។ សូម​មើល​ជំហាន​ងាយៗ​ខាងក្រោម ៖

៙ របៀប​ដាក់​កូដ​ឆ្នុច Read More ចូល​ក្នុង Template ប្លក ៖

- កត់ត្រា​ចូល Log In ក្នុង​គណនី​ Blogger របស់​អ្នក​។
- ចូល​ទៅ​កាន់​ម៉ឺនុយ Template >> Edit HTML

- រក​មើល​ស្លាក <b:skin>...</b:skin> ដោយ​ចុច​លើ​សញ្ញា​ព្រួញ​ពណ៌ខ្មៅ​ដែល​នៅ​ពី​​មុខ​វា

- រមូល​ចុះ (scroll down) ទៅ​ដល់ ]]></b:skin>
- ចម្លង​កូដ​នៃ​ឆ្នុច Read More រួច​បិទ​​ភ្ជាប់​កូដ​នោះ​នៅ​ពី​លើ​ស្លាក ]]></b:skin> រួច​ចុច​  Preview  ដើម្បី​មើល​សាកល្បង​សិន។ បើ​ពេញ​ចិត្ត​ហើយ​សូម​ចុច  Save template  ​ជាការស្រេច។

ចំណាំ ៖ នៅ​ពេល​ចង់​ឈប់​ប្រើ គ្រាន់តែ​ចូល​ទៅ​ឈប់​កូដ​វិញ​ជា​ការ​ស្រេច។

៙ ប្រភេទ​ឆ្នុច Read More ៖

- ពណ៌​ប្រផេះ

.jump-link { margin: 15px 0; }
.jump-link a {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow:inset 0px 1px 0px 0px #ffffff;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #dcdcdc;
 display:inline-block;
 color:#777777;
 font-family:arial;
 font-size:16px;
 font-weight:bold;
 padding:5px 12px;
 text-decoration:none;
 text-shadow:1px 1px 0px #ffffff;
}
.jump-link a:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
 background-color:#dfdfdf;
}

- ពណ៌​ក្រហម

.jump-link { margin: 15px 0; }
.jump-link a {
 -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
 -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
 box-shadow:inset 0px 1px 0px 0px #f29c93;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
 background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
 background-color:#fe1a00;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #d83526;
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:16px;
 font-weight:bold;
 padding:5px 12px;
 text-decoration:none;
 text-shadow:1px 1px 0px #b23e35;
}.jump-link a:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
 background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
 background-color:#ce0100;
}

- ពណ៌​ខៀវ

.jump-link { margin: 15px 0; }

.jump-link a {

 -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;

 -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;

 box-shadow:inset 0px 1px 0px 0px #bbdaf7;

 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );

 background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');

 background-color:#79bbff;

 -moz-border-radius:6px;

 -webkit-border-radius:6px;

 border-radius:6px;

 border:1px solid #84bbf3;

 display:inline-block;

 color:#ffffff;

 font-family:arial;

 font-size:16px;

 font-weight:bold;

 padding:5px 12px;

 text-decoration:none;

 text-shadow:1px 1px 0px #528ecc;

}.jump-link a:hover {

 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );

 background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');

 background-color:#378de5;

}

- ​ពណ៌ត្រួយចេក

.jump-link { margin: 15px 0; }
.jump-link a {
 -moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
 -webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
 box-shadow:inset 0px 1px 0px 0px #c1ed9c;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
 background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
 background-color:#9dce2c;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #83c41a;
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:16px;
 font-weight:bold;
 padding:5px 12px;
 text-decoration:none;
 text-shadow:1px 1px 0px #689324;
}.jump-link a:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) );
 background:-moz-linear-gradient( center top, #8cb82b 5%, #9dce2c 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
 background-color:#8cb82b;
}

- ពណ៌​ស៊ីជម្ពូ

.jump-link { margin: 15px 0; }
.jump-link a {
 -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
 -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
 box-shadow:inset 0px 1px 0px 0px #fbafe3;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
 background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
 background-color:#ff5bb0;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #ee1eb5;
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:16px;
 font-weight:bold;
 padding:5px 12px;
 text-decoration:none;
 text-shadow:1px 1px 0px #c70067;
}.jump-link a:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );
 background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');
 background-color:#ef027d;
}

- ពណ៌​លឿងទុំ

.jump-link { margin: 15px 0; }
.jump-link a {
 -moz-box-shadow:inset 0px 1px 0px 0px #fed897;
 -webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
 box-shadow:inset 0px 1px 0px 0px #fed897;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
 background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
 background-color:#f6b33d;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #eda933;
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:16px;
 font-weight:bold;
 padding:5px 12px;
 text-decoration:none;
 text-shadow:1px 1px 0px #cd8a15;
}.jump-link a:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
 background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
 background-color:#d29105;
}

- ពណ៌ខៀវ​ធម្មតា (ម៉ូដ​នៅ​ប្លក​អាក្បាលធំ)

.jump-link { margin: 10px 0; }
.jump-link a { background-color:#0066ff; display:inline-block; color:#ffffff; font-weight:bold; padding:5px 12px;}
.jump-link a:hover { background-color:#222222;}