Praktiskt taget alla bloggplattformar, inklusive Blogger, har funktionen "citattext". Det här är användbart när du vill markera avsnitt från andra texter eller där du behöver markera information från din egen artikel. Den citerade texten kan anpassas för att se annorlunda ut än huvuddelen av din artikel och dessa skillnader gör det tydligt.

I den här artikeln kommer jag att beskriva hur man använder funktionen "citattext" i Blogger-bloggar samt hur man anpassar utseendet.

Hur citerar du text

Att välja text för att citera är ganska lätt. I Blogger kan du till exempel "citera text" genom att välja den och trycka på "citattext" -knappen.

Du kan också välja text för att citera genom att lägga till "

"Tagga runt texten.

Standardutseendet är ett enkelt inslag och det hjälper inte riktigt att skilja det från resten av artikeln. Så det är användbart att ändra utseendet på den standard citerade texten.

Redigera utseendet på den citerade texten

Att redigera utseendet på citerade text kräver att du ändrar den grundläggande HTML-designen på din blogg. Jag täckte hur jag redigerar det här i min tidigare artikel om Blogger Favicons.

Öppna först din Blogger-instrumentpanel och välj " Design ".

Därefter väljer du " Redigera HTML" i huvudbloggen i Blogger.

Detta öppnar HTML-mallredigeraren. Här kan du kolla " Expand Widget Templates" för att se till att all HTML-kod för din blogg är synlig.

Bläddra sedan ner och leta efter det avsnitt som innehåller ordet " blockquote ". Alla relevanta alternativ för den citerade texten kommer att gå mellan "{" och "}".

Anpassa utseendet på den citerade texten

Alternativen som jag använder för min citerade text på min personliga blogg TechComet är följande:

 blockquote {margin: 1em 20px; bakgrund: #dfdfdf; vaddering: 8px 8px 8px 8px; typsnittstyp: kursiv; }

Detta ger följande effekt när jag väljer text för att citera:

Texten är något indragad, den är kursiv och det finns en mjukgrå bakgrund. Dessa förändringar gör verkligen den citerade texten mer slående och det är lätt att skilja det från huvuddelen av artikeln.

Det finns ett antal olika alternativ som du kan lägga till i din citerade text och jag kommer att diskutera dem nedan.

Marginal

För det första vill du ange texten så att den inte ligger i samma linje som resten av din artikel. Du kan göra detta genom att justera antalet pixlar som marginalen är från resten av texten. Jag har satt min till 20px. Justera detta värde som du tycker är lämpligt.

 marginal: 1em 20px

Bakgrundsfärg

Därefter kan du ändra bakgrundsfärgen genom att justera " bakgrund" -taggen. Jag har valt en ljusgrå färg. Färgerna i HTML-koden representeras av sex "hexdigits". Du kan hämta en lista med färger och deras motsvarande hexdigit härifrån.

 bakgrund: #dfdfdf

Stoppning

Mängden "vaddering" du använder bestämmer avståndet att den citerade texten är från kanten av rutan som skapas av bakgrundsfärgen. Ju mindre antal pixlar desto närmare kommer texten att ligga i kanten av lådan.

Den första siffran är avståndet (i pixlar) från början av textrutan till textens början, den andra siffran är den högra indragen, den tredje siffran är den undre strecksatsen och den fjärde siffran är den vänstra strecksatsen (In kort, de fyra figurerna börjar från toppen och går iurs medurs).

 vaddering: 8px 8px 8px 8px

Typsnitt

Du kan också djärva eller kursivisera den citerade texten så att den verkligen ser annorlunda ut än resten av din artikel.

 typsnittstyp: kursiv typsnitt: fetstil

Gränser

Jag har inte valt att lägga till en gräns i min citerade text, men om du önskar att du kan göra det med hjälp av " border" -taggen. Du måste välja tjocklek, stil och färg på din kant.

 gräns: 2px solid #dfdfdf gräns: 2px prickad #dfdfdf

Slutsats

I de flesta moderna bloggar finns det ofta sektioner som citeras från andra webbplatser och bloggar. För att få din blogg att sticka ut och att lägga till en "professionell" beröring, rekommenderar jag att du spenderar lite tid och anpassar utseendet på din citerade text.

Låt oss veta hur text är citerat i dina artiklar!