ഉള്ളടക്കം മാര്ക്കവറ്റിംഗ്

ബ്ലോഗർ: നിങ്ങളുടെ ബ്ലോഗിലെ കോഡിനുള്ള CSS ശൈലി

ബ്ലോഗർ എൻട്രിയിൽ ഞാൻ എങ്ങനെയാണ് കോഡ് റീജിയണുകൾ ഉണ്ടാക്കിയതെന്ന് ഒരു സുഹൃത്ത് എന്നോട് ചോദിച്ചു. എന്റെ Blogger ടെംപ്ലേറ്റിലെ CSS-നുള്ള ഒരു സ്റ്റൈൽ ടാഗ് ഉപയോഗിച്ചാണ് ഞാൻ ഇത് ചെയ്തത്. ഞാൻ ചേർത്തത് ഇതാ:

p.code {
    font-family: Courier New;
    font-size: 8pt;
    border-style: inset;
    border-width: 3px;
    padding: 5px;
    background-color: #FFFFFF;
    line-height: 100%;
    margin: 10px;
}
  1. p.code: ഇത് HTML ലക്ഷ്യമിടുന്ന ഒരു CSS നിയമമാണ് <p> "കോഡ്" എന്ന ക്ലാസ് നാമമുള്ള ഘടകങ്ങൾ ഈ ക്ലാസിലുള്ള ഏത് ഖണ്ഡികയും ഇനിപ്പറയുന്ന പ്രോപ്പർട്ടികൾ അനുസരിച്ച് ശൈലിയാക്കും എന്നാണ് ഇതിനർത്ഥം.
  2. font-family: Courier New;: ഈ പ്രോപ്പർട്ടി ഫോണ്ട് ഫാമിലിയെ "കൊറിയർ ന്യൂ" ആയി സജ്ജമാക്കുന്നു. ടാർഗെറ്റുചെയ്‌ത ഘടകങ്ങളിൽ ടെക്‌സ്‌റ്റിനായി ഉപയോഗിക്കുന്ന ഫോണ്ട് ഇത് വ്യക്തമാക്കുന്നു.
  3. font-size: 8pt;: ഈ പ്രോപ്പർട്ടി ഫോണ്ട് സൈസ് 8 പോയിന്റായി സജ്ജമാക്കുന്നു. ടാർഗെറ്റുചെയ്‌ത ഘടകങ്ങളിലെ വാചകം ഈ ഫോണ്ട് വലുപ്പത്തിൽ പ്രദർശിപ്പിക്കും.
  4. border-style: inset;: ഈ പ്രോപ്പർട്ടി ബോർഡർ ശൈലി "ഇൻസെറ്റ്" ആയി സജ്ജീകരിക്കുന്നു. ടാർഗെറ്റുചെയ്‌ത മൂലകങ്ങൾക്ക് ചുറ്റുമുള്ള അതിർത്തിക്കായി ഇത് മുങ്ങിപ്പോയതോ അമർത്തിയോ രൂപം സൃഷ്ടിക്കുന്നു.
  5. border-width: 3px;: ഈ പ്രോപ്പർട്ടി ബോർഡർ വീതി 3 പിക്സലുകളായി സജ്ജമാക്കുന്നു. മൂലകങ്ങൾക്ക് ചുറ്റുമുള്ള ബോർഡർ 3 പിക്സൽ കട്ടിയുള്ളതായിരിക്കും.
  6. padding: 5px;: ഈ പ്രോപ്പർട്ടി ടാർഗെറ്റുചെയ്‌ത മൂലകങ്ങൾക്കുള്ളിലെ ഉള്ളടക്കത്തിന് ചുറ്റും 5 പിക്സൽ പാഡിംഗ് ചേർക്കുന്നു. ഇത് വാചകത്തിനും ബോർഡറിനും ഇടയിൽ അകലം നൽകുന്നു.
  7. background-color: #FFFFFF;: ഈ പ്രോപ്പർട്ടി പശ്ചാത്തല നിറം വെള്ളയായി സജ്ജീകരിക്കുന്നു (#FFFFFF). ടാർഗെറ്റുചെയ്‌ത ഘടകങ്ങളിലെ ഉള്ളടക്കത്തിന് വെളുത്ത പശ്ചാത്തലം ഉണ്ടായിരിക്കും.
  8. line-height: 100%;: ഈ പ്രോപ്പർട്ടി ലൈൻ ഉയരം ഫോണ്ട് വലുപ്പത്തിന്റെ 100% ആയി സജ്ജീകരിക്കുന്നു. ഫോണ്ട് വലുപ്പത്തിനനുസരിച്ച് ടെക്സ്റ്റ് ലൈനുകൾ അകലത്തിലാണെന്ന് ഇത് ഉറപ്പാക്കുന്നു.
  9. margin: 10px;: ഈ പ്രോപ്പർട്ടി മുഴുവൻ മൂലകത്തിനും ചുറ്റും 10 പിക്സലുകളുടെ മാർജിൻ ചേർക്കുന്നു. ഈ ഘടകത്തിനും പേജിലെ മറ്റ് ഘടകങ്ങൾക്കും ഇടയിൽ ഇത് സ്പേസ് നൽകുന്നു.

നൽകിയിരിക്കുന്ന CSS കോഡ് HTML ഖണ്ഡികകൾക്കുള്ള ഒരു ശൈലി "കോഡ്" എന്ന ക്ലാസ് ഉപയോഗിച്ച് നിർവ്വചിക്കുന്നു. ഇത് ഈ ഖണ്ഡികകൾക്കായി ഫോണ്ട്, ഫോണ്ട് വലുപ്പം, ബോർഡർ ശൈലി, ബോർഡർ വീതി, പാഡിംഗ്, പശ്ചാത്തല നിറം, ലൈൻ ഉയരം, മാർജിൻ എന്നിവ സജ്ജമാക്കുന്നു. ഒരു ബ്ലോഗർ പോസ്റ്റിലെ കോഡ് സ്‌നിപ്പെറ്റുകൾക്കോ ​​മുൻകൂട്ടി ഫോർമാറ്റ് ചെയ്‌ത ടെക്‌സ്‌റ്റിനോ ഒരു പ്രത്യേക രൂപം നൽകുന്നതിന് ഈ ശൈലി പ്രയോഗിക്കാവുന്നതാണ്.

ഇത് എങ്ങനെ കാണപ്പെടുമെന്ന് ഇതാ:

p.code {
ഫോണ്ട് ഫാമിലി: കൊറിയർ ന്യൂ;
ഫോണ്ട് വലുപ്പം: 8pt;
ബോർഡർ ശൈലി: ഇൻസെറ്റ്;
ബോർഡർ വീതി: 3px;
പാഡിംഗ്: 5px;
പശ്ചാത്തല നിറം: #FFFFFF;
ലൈൻ-ഉയരം: 100%;
മാർ‌ജിൻ‌: 10px;
}

ഹാപ്പി കോഡിംഗ്!

Douglas Karr

Douglas Karr യുടെ CMO ആണ് ഓപ്പൺ ഇൻസൈറ്റുകൾ യുടെ സ്ഥാപകനും Martech Zone. വിജയകരമായ ഡസൻ കണക്കിന് മാർടെക് സ്റ്റാർട്ടപ്പുകളെ ഡഗ്ലസ് സഹായിച്ചിട്ടുണ്ട്, മാർടെക് ഏറ്റെടുക്കലുകളിലും നിക്ഷേപങ്ങളിലും $5 ബില്ലിൽ കൂടുതൽ ശ്രദ്ധ ചെലുത്തുന്നതിൽ സഹായിച്ചിട്ടുണ്ട്, കൂടാതെ കമ്പനികളുടെ വിൽപ്പന, വിപണന തന്ത്രങ്ങൾ നടപ്പിലാക്കുന്നതിലും ഓട്ടോമേറ്റ് ചെയ്യുന്നതിലും കമ്പനികളെ തുടർന്നും സഹായിക്കുന്നു. അന്താരാഷ്ട്രതലത്തിൽ അംഗീകൃത ഡിജിറ്റൽ പരിവർത്തനവും മാർടെക് വിദഗ്ധനും സ്പീക്കറുമാണ് ഡഗ്ലസ്. ഡമ്മിയുടെ ഗൈഡിന്റെയും ബിസിനസ് ലീഡർഷിപ്പ് പുസ്തകത്തിന്റെയും പ്രസിദ്ധീകരിച്ച എഴുത്തുകാരൻ കൂടിയാണ് ഡഗ്ലസ്.

ബന്ധപ്പെട്ട ലേഖനങ്ങൾ

മുകളിലേയ്ക്ക് മടങ്ങുക ബട്ടൺ
അടയ്ക്കുക

ആഡ്ബ്ലോക്ക് കണ്ടെത്തി

Martech Zone പരസ്യ വരുമാനം, അനുബന്ധ ലിങ്കുകൾ, സ്പോൺസർഷിപ്പുകൾ എന്നിവയിലൂടെ ഞങ്ങൾ ഞങ്ങളുടെ സൈറ്റിൽ നിന്ന് ധനസമ്പാദനം നടത്തുന്നതിനാൽ ഈ ഉള്ളടക്കം നിങ്ങൾക്ക് ഒരു ചെലവും കൂടാതെ നൽകാൻ കഴിയും. നിങ്ങൾ ഞങ്ങളുടെ സൈറ്റ് കാണുമ്പോൾ നിങ്ങളുടെ പരസ്യ ബ്ലോക്കർ നീക്കം ചെയ്താൽ ഞങ്ങൾ അഭിനന്ദിക്കുന്നു.