Blockcitat/ Block Quote

Vad är blockcitat/block quote?

Ibland vill man markera en liten del i en text som lite viktigare eller som en början på en ny vändning i det man skriver. Då är ett blockcitat ett bra alternativ.

Det finns en block citat funktion i din redigerare i Blogspot men resultatet när du använder den är kanske inte så rolig, texten dras in litegrann men i övrigt förändras den inte. Det kan du ändra på med lite kod!

Du använder ett blockcitat genom att markera en del av din text och sen trycka på knappen för det i redigeraren, den här.

Normalt sett ser ett blockcitat ut så här:

Med lite förändring kan det se ut så här t.ex. Större, lutande (italic) text och med ett streck före som markerar att här finns något speciellt att titta på. Du kan självklart välja själv hur just dina blockcitat ska se ut. Kanske med en färgad bakgrund?

Men hur gör man då?

Jo, vi behöver lägga till lite kod i din kodmall. 

Gå till Redigera HTML under rubriken Mall i din adminpanel.

Klicka med din mus i kodrutan (för att markera att det är här du vill söka) och tryck sen Ctrl + F för att få fram en sökruta. Kopiera .post blockquote och klistra in det, tryck Enter.

Här hittar du koden för hur ditt blockcitat ska se ut. Just nu står det inte så mycket, men du kan lägga till det du vill. Du kan också radera raden med margin om du inte vill att texten ska ligga lite åt höger. (1 em är detsamma som storleken på din text, 2 em är två gånger höjden. Du kan byta ut siffran mot pixlar, px, om du vill )

Här nedan hittar du ett exempel på vad du kan göra. Välj själv vad du vill lägga till och ändra på siffror och färgkoder som det passar dig och din blogg.

Spar rubriken .post blockquote { och lägg bara till de rader du vill ha nedan. Var försiktig så att du inte raderar någon av klammrarna ( {} ) eller något ; tecken.

Du kan spara mina förklaringar, de ligger inom /* såna här tecken */ vilket gör att de inte syns ute i bloggen. Det är något webdesigners använder sig av för att spara anteckningar i sin kod, när man går tillbaka efter ett tag kan det vara bra med små anteckningar som påminner en om vad som är vad!

.post blockquote {
  font-size: 17px; /* storlek på texten */
  color: #a70000; /* färgkod */
  font-style: italic; /* lutande text, vill du ha tjockare bokstäver kan du använda "bold" istället */
  border-left: 3px solid #a70000; /* ett rött streck till vänster om ditt citat, byt färg om du vill */
  padding: 0 6px 6px; /* lite luft runt texten, framför allt användbart om du vill ha en bakgrundsfärg */
  background-color: #f4f4f4; /* en färgkod för bakgrundsfärg */
}

Vill du istället för ett streck ha en bild kan du lägga in en bildkod - som den här. Glöm inte att ändra på paddingen, du måste flytta din text så att den inte ligger över bilden (om du inte vill ha den så förstås...) Din bild måste du först ladda upp någonstans på internet så att den får en webadress.

background-image: url('http://din bildadress.png'); /* klistra in din bildadress mellan ' ' tecknen */
  background-repeat: no-repeat; /* bilden ska bara visas en gång, inte upprepas längs raden */
  padding-left: 30px; /* avståndet mellan bild och text */

Avsluta med att spara mallen

Lycka till!