Stil CSS pentru cod pe blogul dvs.

CSS

Un prieten de-al meu m-a întrebat cum am creat regiunile de cod pe ultima mea intrare pe blog. De fapt, am „falsificat” regiunea codului folosind un stil. În Blogger, vă puteți edita șablonul. Am adăugat următorul stil:

p.code {font-family: Courier New; dimensiunea fontului: 8pt; border-style: inserat; lățimea chenarului: 3 px; umplutură: 5 px; culoare de fundal: #FFFFFF; înălțimea liniei: 100%; margine: 10 px}

Următorul pas este să-mi editez eticheta în modul „Editați HTML”. Pur și simplu indic spre noul meu stil realizând eticheta. Voila! Defalcarea stilurilor:

  • Setați fontul la Courier New ... arată ca un editor de cod generic
  • Setați dimensiunea fontului la 8pt pentru a arăta corect
  • Setați stilul chenarului de paragraf la „inserare”. Aceasta reproduce cum arată o zonă text pe pagină.
  • Setați lățimea chenarului la 2 sau 3 pixeli. Acest lucru face ca stilul chenarului inserat să arate corect.
  • Împletirea setează distanța dintre margine și textul din interior.
  • Culoarea fundalului ... setați-o la alb (#FFFFFF)
  • Înălțimea liniei - Am ajustat acest lucru la 100%, deoarece unele dintre celelalte stiluri din tema bloggerului meu mi-au făcut înălțimea liniei aproximativ 200%
  • Setați marja la 10 px. Aceasta mută paragraful (eticheta p) cu 10 pixeli distanță de orice.

Asta este tot ce există! O notă: Editorul care vine cu Blogger nu poate afișa așa cum va apărea în blogul dvs. Dar funcționează și arată minunat!

Încă o notă ... după ce editați eticheta, editorului Blogger îi place să o folosească în mod aleatoriu în altă parte a postării dvs. Este un pic enervant! Sfatul meu ar fi să scrieți întreaga dvs. postare și apoi să faceți editarea mică după aceea.

O ultimă notă ... asigurați-vă că utilizați entități HTML pentru a afișa simbolurile dvs.! Câteva exemple:

  • Citatele („) sunt„
  • > este>
  • > este>

Codificare fericită!

4 Comentarii

  1. 1
  2. 2
  3. 3

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.