ក្នុង Blogger នេះកូដដែលយើងងាចប្រើបានក្នុងអត្ថបទ blog ដោយមិនភ័យរឿងខុសគោលការណ៍ គឺ HTML និង CSS ហើយចំពោះកូដ JavaScript ក៏យើងអាចប្រើប្រាស់បានខ្លះៗដែរ តែបើយើងដាក់ច្រើនពេក អាចនិងជាប់ព្រមាន។ ក្នុងគន្លឹះនេះខ្ញុំសូមលើកបង្ហាញទម្រង់ chat មានរូបរាងស្រដៀង iOS ដែលប្រើប្រាស់ CSS ។ កូដនេះយើងអាចប្រើសម្រាប់ដាក់ជារឿងសន្ទានគ្នាក៏បាន ឬធ្វើជាសំនួរចម្លើយសម្រាប់អ្នកចូលអានក៏បានដែរ ។
៙ របៀបដាក់កូដ ៖
ជំហានទី១ : ចូលក្នុងគណនី Blogger.com របស់លោកអ្នកជំហានទី២ : ចូលទៅបង្កើត Post ថ្មីមួយ
ជំហានទី៣ : ត្រូវឈរលើតាប HTML ដើម្បីដាក់កូដ
ជំហានទី៤ : ចម្លងកូដខាងក្រោមនេះដាក់ចូល និងកែប្រែកូដតាមចំណូលចិត្តរបស់លោកអ្នក ដែលការកែប្រែនេះតម្រូវឲ្យមានចំណេះដឹង CSS ខ្លះៗទើបអាចមើលយល់ សម្រាប់អ្នកមិនចេះកូដប្រហែលជាកែមិនបាន តែខ្ញុំក៏មិនចេះកូដអ្វីដែល តែខ្ញុំព្យាយាមមើលតាមលក្ខណៈដែលអាចយល់បាន ។
<div class="container">ជាលទ្ធផលយើងបាន
<h1>Text Soap</h1>
<h2>An iMessage chat becomes fodder for daytime drama</h2>
<p class="comment">This begins one morning with my friend in San Diego telling me about an earthquake they just had.</p>
<div class="imessage">
<p class="from-them">It was loud. We just laid there and said “is this an earthquake? I think this is an earthquake.”</p>
<p class="from-me">Like is this an earthquake just go back to sleep</p>
<p class="from-them margin-b_one">It’s more like “this is an earthquake. Check the Internet. Yup. Earthquake. This is the size. This is the epicenter. Check social media. Make sure the East Coast knows I’m alive. Okay, try and go back to sleep.”</p>
<p class="from-me no-tail emoji">👍🏻</p>
<p class="from-me">Glad you’re safe</p>
</div>
<p class="comment">So now it's time for me to get back to work:</p>
<div class="imessage">
<p class="from-me">Time to write some code where I left off</p>
</div>
<p class="comment">She says:</p>
<div class="imessage">
<p class="from-them">Previously on As the Code Turns</p>
</div>
<p class="comment">So I decide to have a little fun with that hand-off:
</p>
<div class="imessage">
<p class="from-me no-tail margin-b_none">Previously...</p>
<p class="from-me no-tail">Brock went to the hospital to check on Cyntheeah...</p>
<p class="from-me no-tail">Notice the pretentious spelling of “Cyntheeah”...</p>
<p class="from-me no-tail">While in her hospital room, Diego is standing outside looking through the door window and can hear the entire conversation because he has super hearing.</p>
<p class="from-me margin-b_none">Elsewhere, Biff has plans to take down the entire Caspian family with his secret about how Roger Caspian used to be...REGINA Caspian!</p>
<p class="from-them margin-b_one margin-t_one">Haha</p>
<p class="from-me no-tail">And the budding romance between teens Erika and Johnny bloom</p>
<p class="from-me">Back at the hospital, cuz who doesn’t hang out at hospitals in their free time, amirite...</p>
<p class="from-them margin-b_one margin-t_one">Riiiiight</p>
<p class="from-me no-tail margin-b_none">Brock leaves Cyntheeah’s room, and Diego sneaks in while she sleeps...</p>
<p class="from-me no-tail">It’s the worst hospital in the world cuz they leave her chart out for anyone to see...</p>
<p class="from-me no-tail">While the nurse isn’t watching Diego looks at her chart...</p>
<p class="from-me no-tail">And discovers...</p>
<p class="from-me no-tail">[bad music]...[Commercial]</p>
<p class="from-me no-tail">...TO BE CONTINUED...</p>
<p class="from-me">Gotta run, have a safe day in the sun ☀️</p>
<p class="from-them margin-t_one">Haha, talk to you later.</p>
</div>
</div>
<style>
.imessage {background-color: #fff; border: 1px solid #e5e5ea; border-radius: 0.25rem; display: flex; flex-direction: column; margin: 0 auto 1rem; max-width: 600px; padding: 0.5rem 1.5rem;}
.imessage p {border-radius: 1.15rem; max-width: 75%; padding: 0.5rem .875rem; position: relative; word-wrap: break-word;}
.imessage p::before,
.imessage p::after {bottom: -0.1rem; content: ""; height: 1rem; position: absolute;}
p.from-me {align-self: flex-end; background-color: #248bf5; color: #fff;}
p.from-me::before {border-bottom-left-radius: 0.8rem 0.7rem; border-right: 1rem solid #248bf5; right: -0.35rem; transform: translate(0, -0.1rem);}
p.from-me::after {background-color: #fff; border-bottom-left-radius: 0.5rem; right: -40px; transform:translate(-30px, -2px); width: 10px;}
p[class^="from-"] {margin: 0.5rem 0; width: fit-content;}
p.from-me ~ p.from-me {margin: 0.25rem 0 0;}
p.from-me ~ p.from-me:not(:last-child) {margin: 0.25rem 0 0;}
p.from-me ~ p.from-me:last-child {margin-bottom: 0.5rem;}
p.from-them {align-items: flex-start; background-color: #e5e5ea; color: #000;}
p.from-them:before { border-bottom-right-radius: 0.8rem 0.7rem; border-left: 1rem solid #e5e5ea; left: -0.35rem; transform: translate(0, -0.1rem);}
p.from-them::after {background-color: #fff; border-bottom-right-radius: 0.5rem; left: 20px; transform: translate(-30px, -2px); width: 10px;}
p[class^="from-"].emoji {background: none; font-size: 2.5rem;}
p[class^="from-"].emoji::before {content: none;}
.no-tail::before {display: none;}
.margin-b_none {margin-bottom: 0 !important;}
.margin-b_one {margin-bottom: 1rem !important;}
.margin-t_one {margin-top: 1rem !important;}
/* general styling */
.container {margin: 0 auto; padding: 1rem;}
h1 {font-weight: normal; margin-bottom: 0.5rem;}
h2 {border-bottom: 1px solid #e5e5ea; color: #666; font-weight: normal;
margin-top: 0; padding-bottom: 1.5rem;}
.comment {color: #222; line-height: 1.5; margin-bottom: 1.25rem; max-width: 100%; padding: 0; }
@media screen and (max-width: 800px) {body {margin: 0 0.5rem;}
.container {padding: 0.5rem;}
.imessage {margin: 0 auto 1rem;max-width: 600px;padding: 0.25rem 0.875rem;}
.imessage p {margin: 0.5rem 0;}
}
</style>
An iMessage chat becomes fodder for daytime drama
This begins one morning with my friend in San Diego telling me about an earthquake they just had.
It was loud. We just laid there and said “is this an earthquake? I think this is an earthquake.”
Like is this an earthquake just go back to sleep
It’s more like “this is an earthquake. Check the Internet. Yup. Earthquake. This is the size. This is the epicenter. Check social media. Make sure the East Coast knows I’m alive. Okay, try and go back to sleep.”
👍🏻
Glad you’re safe
So now it's time for me to get back to work:
Time to write some code where I left off
She says:
Previously on As the Code Turns
So I decide to have a little fun with that hand-off:
Previously...
Brock went to the hospital to check on Cyntheeah...
Notice the pretentious spelling of “Cyntheeah”...
While in her hospital room, Diego is standing outside looking through the door window and can hear the entire conversation because he has super hearing.
Elsewhere, Biff has plans to take down the entire Caspian family with his secret about how Roger Caspian used to be...REGINA Caspian!
Haha
And the budding romance between teens Erika and Johnny bloom
Back at the hospital, cuz who doesn’t hang out at hospitals in their free time, amirite...
Riiiiight
Brock leaves Cyntheeah’s room, and Diego sneaks in while she sleeps...
It’s the worst hospital in the world cuz they leave her chart out for anyone to see...
While the nurse isn’t watching Diego looks at her chart...
And discovers...
[bad music]...[Commercial]
...TO BE CONTINUED...
Gotta run, have a safe day in the sun ☀️
Haha, talk to you later.