Tsim Blogger kem lus tawm tswv yim zoo nkauj nrog CSS

Yog xav ua kom zoo nkauj dua Blogger lub thawv lus tawm tswv yim tabsis tsis hloov lub kaw lus teb lossis tshuaj xyuas, pib siv CSS rau cov element uas twb muaj nyob hauv theme. Txoj kev no tsuas hloov qhov kev nthuav qhia xwb; Blogger tseem yog tus tswj kev txais, nthuav tawm thiab tshuaj xyuas cov lus tawm tswv yim (raws li support.google.com).

Lub hom phiaj yog kom thaj tsam lus tawm tswv yim muaj nws tus kheej xim tom qab, muaj ciam teb mos, muaj cov ces kaum puag ncig, muaj qhov nrug meej thiab tsis txhob hla dhau sab ntawm lub vijtsam me. Txawm li cas los, cov code hauv qab no tsuas yog ib pawg selector uas muab los siv ua qauv; txhua lub theme yuav muaj HTML qauv sib txawv. Yog lub thawv hloov tab sis daim form sau lus tsis hloov, tej zaum yog vim daim form raug thauj hauv iframe.

Npaj thiab khaws theme cia

Muaj ib lub blog Blogger/Blogspot uas muaj ib tsab xov xwm tso cai rau cov neeg tawm tswv yim.
Ib tus account uas muaj cai hloov kho qhov pom ntawm blog.
Ib daim theej tseg ntawm theme uas siv tam sim no.
Ib lub browser uas tuaj yeem qhib blog rau hauv lwm lub tab txhawm rau kuaj tom qab khaws cia.

Ua ntej hloov kho, mus rau Theme, qhib cov ntawv qhia zaub mov nyob ib sab ntawm qhov pom uas tab tom siv thiab rub daim theej tseg los khaws cia. Yog koj tsis tau khaws tseg dua, saib cov lus qhia khaws Blogger theme cia. Daim theej tseg yog txoj kev rov qab yog tias koj ntxig CSS yuam kev lossis hloov HTML ntawm theme ncaj qha.

Google qhia kom hloov HTML ntawm qhov pom los ntawm Theme > More > Edit HTML thiab khaws cov kev hloov ntawd rau ntawd (raws li support.google.com). Cov npe khawm yuav txawv me ntsis raws li qhov kev tswj hwm qhov pom, yog li siv qhov Customize lossis Edit HTML uas tab tom tshwm hauv koj lub blog ua ntej.

Kuaj qhov teeb tsa lus tawm tswv yim ua ntej tsim lub thawv

CSS tsis tuaj yeem tsim ib qho element lus tawm tswv yim yog lub blog kaw lus tawm tswv yim lossis tsab xov xwm tsis tso cai txais lus tawm tswv yim. Yog koj xav kom daim form tshwm ncaj qha hauv qab tsab xov xwm, kuaj raws li hauv qab no:

Nkag mus rau Blogger thiab xaiv lub blog kom raug.
Qhib Settings > Comments.
Ntawm Comment location, xaiv Embedded yog tias koj qhov kev tswj hwm muaj qhov kev xaiv no.
Kuaj Who can comment kom paub tias leej twg raug tso cai xa lus tawm tswv yim.
Teeb tsa Comment moderation yog koj xav tshuaj xyuas cov lus tawm tswv yim ua ntej tso tawm rau sawv daws pom.
Khaws cov kev hloov pauv, tom qab ntawd qhib ib tsab xov xwm uas muaj lus tawm tswv yim los ua nplooj ntawv kuaj.

Embedded tsuas txiav txim seb thaj tsam lus tawm tswv yim yuav tshwm li cas hauv tsab xov xwm xwb; nws tsis ua kom qhov pom zoo nkauj dua ntawm nws tus kheej. Yog lub blog siv lwm qhov chaw rau lus tawm tswv yim, koj tseem tuaj yeem hloov kho lub thawv yog koj txheeb tau theme tus selector kom raug.

Ntxig tus qauv CSS rau hauv Blogger

Rau cov neeg pib, xub siv lub CSS box ntawm qhov pom, vim txoj kev no tsis tas yuav hloov XML. Ua hauv Blogger lub dashboard:

Mus rau Theme thiab xaiv Customize.
Qhib Advanced, nrhiav pawg lossis lub npov sau CSS ntxiv. Lub npe ntawm ntu no yuav txawv raws li theme.
Muab tag nrho cov code hauv qab no tso rau hauv lub npov ntawd.
Xaiv Save, Apply to Blog lossis lub pob txuag uas muaj lub npe zoo sib xws.
Qhib ib tsab ntawv uas muaj lus tawm tswv yim hauv lwm lub tab ntawm browser kom saib qhov tshwm sim.

Yog theme tsis muaj lub npov CSS, koj siv tau Theme > Edit HTML. Thaum ntawd, muab ntu CSS tso rau hauv qhov stylesheet ntawm theme, feem ntau yog rau hauv <b:skin> raws li tus qauv uas twb muaj lawm. Tsis txhob muab tag nrho lub tag <style> tso rau hauv qhov chaw XML uas tsis txais lub tag no. Yog koj tseem tsis paub XML zoo, xaiv lub npov CSS kho kom haum ua ntej thiab khaws daim qauv theej tseg cia kom rov qab siv tau.

/* ===== Khung bình luận Blogger ===== */

:root {
  --comment-bg: #ffffff;
  --comment-soft-bg: #f6f8fb;
  --comment-border: #e2e8f0;
  --comment-text: #263241;
  --comment-muted: #718096;
  --comment-accent: #2563eb;
  --comment-accent-hover: #1d4ed8;
  --comment-radius: 16px;
  --comment-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* Vùng bao chính */
#comments,
.comments,
.comments-area {
  width: 100%;
  max-width: 860px;
  margin: 36px auto 0;
  padding: 24px;
  box-sizing: border-box;
  color: var(--comment-text);
  background: var(--comment-bg);
  border: 1px solid var(--comment-border);
  border-radius: var(--comment-radius);
  box-shadow: var(--comment-shadow);
}

/* Tiêu đề khu vực bình luận */
#comments h4,
#comments .title,
.comments h4,
.comments .title {
  margin: 0 0 20px;
  color: var(--comment-text);
  font-size: 1.35rem;
  line-height: 1.4;
  font-weight: 700;
}

/* Bỏ kiểu danh sách mặc định */
#comments ol,
#comments ul,
.comments ol,
.comments ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Từng bình luận */
#comments .comment-block,
#comments .comment-thread li,
.comments .comment-block,
.comments .comment-thread li {
  margin: 0 0 16px;
  padding: 18px;
  background: var(--comment-soft-bg);
  border: 1px solid var(--comment-border);
  border-radius: 12px;
}

/* Khu vực tên và thời gian */
#comments .comment-header,
.comments .comment-header {
  margin-bottom: 10px;
  line-height: 1.5;
}

#comments .comment-header a,
#comments .comment-header cite,
.comments .comment-header a,
.comments .comment-header cite {
  color: var(--comment-text);
  font-weight: 700;
  text-decoration: none;
}

#comments .comment-header .datetime,
#comments .comment-header .timestamp,
.comments .comment-header .datetime,
.comments .comment-header .timestamp {
  display: block;
  margin-top: 3px;
  color: var(--comment-muted);
  font-size: 0.84rem;
  font-weight: 400;
}

/* Nội dung bình luận */
#comments .comment-content,
.comments .comment-content {
  color: var(--comment-text);
  font-size: 0.98rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

#comments .comment-content p,
.comments .comment-content p {
  margin: 0 0 10px;
}

#comments .comment-content p:last-child,
.comments .comment-content p:last-child {
  margin-bottom: 0;
}

/* Liên kết trả lời, xóa hoặc báo cáo */
#comments .comment-actions a,
#comments .comment-reply a,
.comments .comment-actions a,
.comments .comment-reply a {
  color: var(--comment-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

#comments .comment-actions a:hover,
#comments .comment-reply a:hover,
.comments .comment-actions a:hover,
.comments .comment-reply a:hover {
  color: var(--comment-accent-hover);
  text-decoration: underline;
}

/* Khoảng cách cho bình luận trả lời */
#comments .comment-replies,
.comments .comment-replies {
  margin: 14px 0 0 28px;
}

/* Khu vực thông báo và form */
#comments .comment-form,
#comments .comment-form-thread,
.comments .comment-form,
.comments .comment-form-thread {
  margin-top: 22px;
  padding: 18px;
  background: var(--comment-soft-bg);
  border: 1px dashed var(--comment-border);
  border-radius: 12px;
}

/* Một số theme cho phép định dạng trực tiếp ô nhập */
#comments input[type="text"],
#comments input[type="email"],
#comments textarea,
.comments input[type="text"],
.comments input[type="email"],
.comments textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  color: var(--comment-text);
  background: #ffffff;
  border: 1px solid var(--comment-border);
  border-radius: 10px;
  outline: none;
  font: inherit;
}

#comments input:focus,
#comments textarea:focus,
.comments input:focus,
.comments textarea:focus {
  border-color: var(--comment-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Hiển thị tốt hơn trên điện thoại */
@media (max-width: 600px) {
  #comments,
  .comments,
  .comments-area {
    margin-top: 24px;
    padding: 16px;
    border-radius: 12px;
  }

  #comments .comment-block,
  #comments .comment-thread li,
  .comments .comment-block,
  .comments .comment-thread li {
    padding: 14px;
    border-radius: 10px;
  }

  #comments .comment-replies,
  .comments .comment-replies {
    margin-left: 12px;
  }
}

Code saum toj no tsis muaj tus nqi twg uas yuav tsum tau hloov ua ntej txuag. Yog xav hloov tus qauv, hloov tsuas yog cov nqi hauv pawg variable :root nyob rau thaum pib ntawm code, thiab khaws cov npe variable thiab cov cim semicolon cia li qub.

Kho xim thiab kaum ntug sib npaug

Variable	Kev siv	Tus nqi ua piv txwv
`--comment-bg`	Xim tom qab ntawm tag nrho lub thawv	`#ffffff`
`--comment-soft-bg`	Xim tom qab ntawm txhua nqe lus tawm tswv yim thiab daim form	`#f6f8fb`
`--comment-border`	Xim ntawm kab ciam	`#e2e8f0`
`--comment-text`	Xim ntawm cov ntawv tseem ceeb	`#263241`
`--comment-accent`	Xim ntawm qhov txuas teb lus	`#2563eb`
`--comment-radius`	Qib kaum ntug sib npaug ntawm lub thawv tseem ceeb	`16px`
`--comment-shadow`	Qib ua kom lub thawv zoo li ntab	`0 8px 24px rgba(15, 23, 42, 0.07)`

Piv txwv hauv qab no qhia ib pawg xim tsaus. Hloov tag nrho cov variable uas phim rau hauv ntu :root, ces xyuas cov ntawv, cov kev txuas thiab qhov chaw sau hauv ob qho keeb kwm xim kaj thiab xim tsaus:

:root {
  --comment-bg: #111827;
  --comment-soft-bg: #1f2937;
  --comment-border: #374151;
  --comment-text: #f3f4f6;
  --comment-muted: #9ca3af;
  --comment-accent: #93c5fd;
  --comment-accent-hover: #bfdbfe;
}

Nov yog ib qho piv txwv qhia xwb, tsis yog pawg xim uas yuav tsum siv. Yog cov ntawv lossis cov kev txuas nyeem nyuaj, rov qab siv cov xim qub. Tsis txhob zais cov kev txuas tswj hwm, teb lus, rho tawm lossis ceeb toom tsuas yog kom lub thawv zoo li me dua.

Kuaj qhov tshwm sim ntawm ib tsab ntawv tiag

Qhib ib tsab ntawv uas tso cai rau xa lus tawm tswv yim.
Tom qab txuag CSS, rov thauj nplooj ntawv dua. Yog tseem pom tus qauv qub, sim rov thauj kom huv dua siv Ctrl + F5 ntawm Windows lossis tshem browser lub cache.
Kuaj lub thawv tseem ceeb: xim tom qab, kab ciam, kaum ntug sib npaug thiab qhov nrug yuav tsum hloov.
Kuaj ib nqe lus tawm tswv yim: lub npe, lub sijhawm, cov ntsiab lus thiab qhov txuas teb lus yuav tsum tseem nyeem tau.
Ua kom qhov rai me dua lossis qhib nplooj ntawv hauv xov tooj; cov ntsiab lus yuav tsum tsis txhob ntws hla sab.
Sim qhib daim form teb lus. Yog koj qhib tau daim form thiab cov kev txuas ua haujlwm tseem tshwm, ces lub hom phiaj ntawm kev kho qauv theem pib twb ua tiav lawm.

Qhov yuav tsum pom tseeb yog tus qauv hloov tab sis cov haujlwm qub tseem nyob. Yog blog thov kom nkag mus lossis yuav tsum tshuaj xyuas ua ntej thiaj tso tawm, qhov ntawd yog Blogger qhov kev teeb tsa, tsis yog CSS qhov yuam kev.

Thaum CSS tsis siv tau lossis daim form tsis hloov

Theme siv selector txawv

Cov selector xws li #comments, .comments thiab .comments-area yog cov chaw pib uas nquag siv hauv tus qauv no, tab sis koj lub theme yuav siv lwm lub npe. Qhib blog, nyem txoj cai nas rau ntawm thaj chaw lus tawm tswv yim, xaiv Inspect lossis Kiểm tra, ces nrhiav lub element uas qhwv tag nrho thaj chaw ntawd.

Piv txwv, yog lub element uas qhwv tiag tiag muaj class my-comments, ntxiv ib txoj cai cais rau hauv theme lub npov CSS:

.my-comments {
  width: 100%;
  max-width: 860px;
  margin: 36px auto 0;
  padding: 24px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

Hauv piv txwv no, .my-comments tsuas yog lub npe ua piv txwv xwb. Koj yuav tsum hloov nws ua tus class lossis id uas tab tom tshwm hauv lub cuab yeej tshuaj xyuas ntawm koj lub theme; tsis txhob muab lub npe no tso ncaj qha yog tias koj lub theme tsis muaj lub element uas phim.

Form nyob hauv iframe

Txhawm rau tshuaj xyuas, siv lub cuab yeej Inspect thiab saib seb lub form puas nyob hauv lub element <iframe> lossis tsis. Feem ntau, CSS ntawm lub theme sab nraud xaiv tsis tau cov element nyob hauv ib lub iframe uas yog lwm daim ntawv. Yog li, lub khauj khaum thiab daim ntawv teev lus tawm tswv yim yuav hloov qauv, tabsis lub thawv sau lus lossis lub pob xa lus tseem yuav nyob hauv tus qauv qub.

Qhov no yog qhov txwv ntawm CSS qhov kev siv tau, tsis tas yuav yog qhov yuam kev ntawm code. Tsis tsim nyog hloov iframe nrog ib lub form uas koj tsim kiag rau qhov sib phim xim xwb, yog tias koj tseem tsis tau muaj kev tsim tshwj xeeb rau kev khaws lus tawm tswv yim, kev txheeb xyuas tus kheej, kev tiv thaiv spam thiab kev ruaj ntseg ntawm cov ntaub ntawv.

Code ua rau layout txav tsis ncaj

Yog tias nplooj ntawv hla dav dhau lossis kem sab raug thawb nqis, ua raws txoj kev thim rov qab uas luv tshaj plaws:

Rho tawm ib ntus lub CSS block uas nyuam qhuav ntxiv rau hauv lub npov CSS, lossis rov qab siv daim qauv theej cia yog tias koj tau kho HTML.
Txuag dua thiab rov thauj tsab xov xwm kom paub seb layout puas rov zoo li qub.
Yog tias rov zoo li qub lawm, muab txhua pawg tso rov qab ib pawg zuj zus: lub khauj khaum tseem ceeb, lus tawm tswv yim, form, ces media query.
Nres ntawm pawg uas ua rau muaj teeb meem thiab tshuaj xyuas tus selector, width, padding lossis txoj cai uas cuam tshuam dav dhau.

Yog tias blog qhia rawv cov code lossis ceeb toom tias muaj kev yuam kev tom qab kho theme, rov tshuaj xyuas theme code ua ntej yuav txuag lwm yam kev hloov (raws li support.google.com).

Rov kho qhov interface thaum tsis xav siv CSS ntxiv

Yog tias koj muab code tso rau hauv lub npov CSS uas hloov kho tau, rho tawm tag nrho lub block uas pib nrog /* ===== Khung bình luận Blogger ===== */ thiab xaus ntawm tus cim nkhaus kaw ntawm media query, ces txuag dua. Tom qab ntawd qhib ib tsab xov xwm uas muaj lus tawm tswv yim kom paub tseeb tias qhov interface rov qab mus rau lub xeev ua ntej kho.

Yog tias koj tau kho HTML ntawm theme ncaj qha thiab tsis nco qab qhov chaw tso code, rov thauj theme uas koj tau theej cia es tsis txhob rho XML tej ntu yam tsis xaiv. Thaum ntxiv cov peev txheej sab nraud, xaiv qhov URL https://; cov peev txheej http:// tej zaum yuav ua rau muaj lus ceeb toom txog mixed content ntawm blog HTTPS (raws li support.google.com).

Cov cim qhia tias ua tiav

Thaj chaw lus tawm tswv yim muaj lub khauj khaum, xim tom qab, ntug thiab kev ncua uas haum.
Cov ntsiab lus tseem nyeem tau meej ntawm computer thiab ntawm lub vijtsam me.
Cov txuas teb lus, txuas tswj hwm lossis txuas tshuaj xyuas tsis raug zais.
Lub form lus tawm tswv yim tseem qhib tau, lossis koj twb txheeb xyuas tau tias lub form raug txwv los ntawm iframe.
Koj paub yuav rho tawm CSS block lossis rov qab siv daim qauv theej cia li cas yog tias koj tsis txaus siab.

Pib nrog hloov xim, qhov nkhaus ntawm cov ces kaum thiab duab ntxoov ntxoo. Tsuas yog tom qab koj txheeb xyuas tau HTML qauv ntawm theme raug lawm thiaj li kho kom tob ntxiv, xws li avatar, theem teb lus thiab pob xa lus.

Yuav tsim Blogger kem lus tawm tswv yim zoo nkauj nrog CSS li cas