វិធី​កែប្រែ Style របស់​ Blockquote នៅ​ក្នុង WordPress

ការ​ប្រើប្រាស់ Quotes នៅក្នុង​ការសរសេរអត្ថបទ គឺជាចំណុច​សំខាន់ ដែល​ទាក់​ទាញចិត្ត និង​អារម្មណ៍មក​ក្រលេក​មើល ចំណុច​ដែល​យើង​បាន Quote ។ មិនថា​តែ​នៅ​ក្នុង​ទស្សនាវដ្តី ឬកាសែត​នោះទេ ឥឡូវនេះ​គេហទំព័រ / ប្លក់ គឺជា​កន្លែង​អាន​ព័ត៌មាន ដ៏​ពេញ​និយម​​នាពេល​បច្ចុប្បន្ន​នេះ ។ យ៉ាងណាមិញ គំរូ​រូបរាង (Theme) នីមួយៗ​ដែល​បង្កើត​ឡើង សម្រាប់ WordPress តែង​មាន​ការរចនា​តាមម៉ូត និង​វិធី​ផ្សេងៗ​គ្នា ។ ចំពោះ Quote ក៏​ដូច្នេះដែរ គំរូ​រូបរាង​ខ្លះ គេ​រចនា​មក​សាមញ្ញៗ ដែល​មិន​តម្រូវ​ឲ្យ​លោកអ្នក ប្រើ​ដើម្បី​ទាក់ទាញ ​​ភ្នែក​អ្នក​អាននោះទេ ។ ថ្ងៃនេះ សំបុកអាយធី សូម​នាំ​អារម្មណ៍​លោកអ្នក មក​អាន និង​អនុវត្តន៍ តាម​គំរូ Quote ដែល​មាន​ទាំង​រូប និង​របៀប​ធ្វើ ជាកូដ CSS ដែល​គ្រាន់​តែ​ចម្លង គឺអាច​ឃើញ​លទ្ធផល​ភ្លាមៗ ។

orange-blue-white

ជាទូទៅ នៅក្នុង WordPress Editor (កន្លែង​សរសេរ​អត្ថបទ) តែង​មានប៊ូតុង blockquote ដែល​ផ្តល់​ភាព​ងាយស្រួល ឲ្យ​លោកអ្នក​ដោយ​គ្រាន់​តែ​ចុច នោះវានឹង​សរសេរកូដ HTML ថា៖ <blockquote> សរសេរ​អក្សរអ្នក​ទីនេះ </blockquote> ។

wpblockquote

ដើម្បី​អាច​កំណត់ Style លើ blockquote

  • លោកអ្នក​ចាំបាច់​ត្រូវ​មាន​កូដមួយ​ប្លក់ ដែល​ក្នុងនោះមាន​អក្សរ បួន ឬប្រាំ​ជួរ ដែល​ស្ថិត​នៅ​ក្នុង tag <blockquote> និង </blockquote> ។ សូមមើល​គំរូ​ខាងក្រោមនេះ ៖

<blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.
<cite>Wise Man</cite></blockquote>

  • បន្ទាប់​ពី​សរសេរ​រួចហើយ សូម​លោកអ្នក​បើក​ Theme Editor ដោយ​ចូល​ទៅតាម Dashboard => Appearance => Editor ឬលោកអ្នក​អាច​ប្រើ​តាម FTP (ដូចជា FileZilla) ក៏បានដែរ ហើយ​សូម select យក file css ដែល​មានឈ្មោះ style.css (ឬមើល​តាម style theme របស់​លោកអ្នក) ។
  • ប្រសិនបើ blockquote style មាន​ស្រាប់​នៅក្នុង file style.css ហើយ​ សូម​លោកអ្នក​ចម្លងរក្សាទុក (Backup) ជាមុនសិន មុននឹង​ធ្វើ​ការសាកល្បង​កែតាម​វិធី​នីមួយៗ នៅ​ខាងក្រោម ដើម្បី​ជៀសវាង​ការ​កែខុស ជាហេតុ​នាំ​ឲ្យ​ខូច​រូបរាង Theme ដោយ​អចេតនា ។

១. CSS Blockquote ដោយ​ប្រើ​ពុម្ព​អក្សរ

ជាទូទៅ គេនិយម​ប្រើ background-image style ធ្វើជា Quotation Mark (ប្រើ​រូបភាព​តែ​ម្តង) ។ ប៉ុន្តែ​ខាងក្រោមនេះ យើង​ប្រើ CSS font-family និង font-style ជំនូសវិញ (វា​អាច​ដំណើរការ​លឿន​ជាង​រូបភាព) ។

1.classic-css-blockquote

សរសេរកូដ CSS ៖

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

២. Blockquote ជាមួយរូបភាព

ប្រសិនបើ​លោកអ្នក​ មិនចង់ប្រើ​តាម​ប្រភេទពុម្អ​អក្សរ (Font) សូម​លោកអ្នក​ប្រើ​រូបភាព​ជំនួស​វិញ៖

classic-image-quotes

blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

៣. Blockquote ជាមួយ Style ជ្រុង​គែម

ចំណែក​ឯ​ខាងក្រោម​នេះ យើង​ប្រើ CSS Style ជាមួយជ្រុង​គែម​ (Border) ខាងឆ្វេង និង​ពណ៌​ផ្ទៃ​ខាងក្រោយ ។

simple-css-blockquote-example

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

៤. Blockquote ជាមួយ​ការដាក់​ពណ៌​បញ្ចូលគ្នា

Blockquotes ​អាច​មានលក្ខណៈ​ជា​ពណ៌​ច្រើន​លាយ​គ្នា ដើម្បី​ឲ្យ​មើល​ទៅ​កាន់​តែ​ទាក់​ភ្នែក ។

orange-blue-white

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

៦. Blockquote ជាមួយ Google Web Font

មិនថា​តែ​ពុម្ព​អក្សរ​ដែល​មាន​ក្នុង​ម៉ាស៊ីននោះទេ លោកអ្នក​ក៏អាច​ប្រើ Google Web Font ដោយ​មិន​បារម្ភថា ពុម្ព​អក្សរ​ដែល​អ្នក​ប្រើ​មាន​ក្នុងម៉ាស៊ីន​ អ្នក​មើល​ឬអត់ទេ ចំពោះ Google Web Font វានឹង​បង្ហាញ​យ៉ាង​ត្រឹម​ត្រូវ​តាម​ទម្រង់​ដែល​អ្នក​បាន​រចនា ។

សំបុកអាយធី​ក៏បាន​ប្រើ Google Web Font ដែរ ដែល​មានឈ្មោះថា៖ Nokora Regular បង្កើត​ដោយ​លោក​ ដាញ់ ហុង ។

google-font-blockquote

blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
} 
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

៦. Blockquote ជាមួយ​គែម​មូល​ជុំវិញ

បើ​គេហទំព័រ ឬប្លក់​លោកអ្នក រចនា​ក្នុង​ទម្រង់​រាង​មូលៗ លោកអ្នក​អាច​សាកល្បង​ប្រើ Blockquote ប្រភេទ​នេះ​សម្រាប់​ដាក់​ជា Quote របស់​អ្នក នោះ​វានឹង​មាន​ភាព​សាកសមជាង ប្រើគែមជ្រុង ។

round-corner-blockquote

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

 

៧. Blockquote ជាមួយផ្ទៃ​ក្រោយពណ៌ដេញ

ពេល​ខ្លះ​ពណ៌​ដោយ​ឡែកៗ ពីគ្នា​ពេក យ៉ាងសាំភ្នែក លោកអ្នក​អាច​សាកល្បង​ប្រើ​ពណ៌ដេញ (Gradient) វិញម្តង ។ ដើម្បី​ទទួល​បាន CSS ពណ៌ដេញ​បាន​ល្អ សូម​លោកអ្នក​ប្រើ​ប្រាស់ CSS gradient generator ។

css-gradient-blockquote

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

 

៨. Blockquote ជាមួយនឹង​ផ្ទៃ​រូបគំរូ

ប្រសិនបើ​ពណ៌ ឬរូប Quote នៅ​មិនសូវ​ទាក់​ទាញ​សម្រាប់អ្នក សូម​សាកល្បង​ប្រើ​ផ្ទៃ​រូប​គំរូ (Background Pattern) វិញម្តង ។

background-blockquote

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

៩. Blockquote ជាមួយ​រូបភាព​បញ្ចូល​គ្នាច្រើន

ជួនកាល​រូបភាព​ផ្ទៃក្រោយ​តែមួយ អាច​នៅស្ទើរ​សម្រាប់​អ្នក​មាន​គំនិត​ច្នៃ​ប្រឌិត​ខ្ពស់ ។ សូម​បន្ថែម​លើ​រូប​ភាព​ខាងលើ​ ដោយ​ថែម​ម្ជុល​មួយទៀត ឲ្យ​​មើល​ទៅ​កាន់​តែឡូយ ។

multiple-background-blockquote

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "\2014 \2009";
}

គន្លឹះ​ទាំង ៩ ខាងលើ​ប្រហែល​ជា​អាច​ជួយ​លោកអ្នក ក្នុងការ​កែលំហ ឬបន្ថែម​នូវ​ការ​ទាក់ទាញ​ភ្នែក​អ្នក​អាន ឲ្យ​ចូល​ចិត្ត​អាន​អត្ថបទ​លោកអ្នក​បន្ថែម​ទៀត ។ សម្រាប់​សំណួរ ចម្ងល់ ឬ​មតិ​នានា​សូម​ដាក់​មតិ របស់​លោកអ្នក​នៅ​ប្រអប់​ខាងក្រោម ។

ប្រភព

អានថែមទៀត

គន្លឹះ​ទទួល​បាន Mastercard ដោយ​ឥតគិត​ថ្លៃ

ចង់​ទិញ​ទំនិញ​តាម Amazon មែន​ទេ? ឬ​ក៏ ebay? ឬ​ក៏​ចង់ទិញ​កម្មវិធី​ពី AppStore? មិន​មាន​ Mastercard សម្រាប់​ទិញ​មែន​ទេ? ជាមួយ​ សំបុកអាយធី ថ្ងៃ​នេះ​លោក​អ្នក​នឹង​អាច​ទិញ​បាន​ដោយ​វិធី​យ៉ាង​ងាយស្រួល ចំណាយ​ពេល​តិច និង​ចំណេញ​ប្រាក់​វិញ​ទៀត​ផង (Cashback)។ …

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.