Header Ads

Signatur i varje inlägg

Jag har tidigare skrivit om att lägga till en signatur i varje inlägg via bloggens adminpanel. Nackdelen med att lägga in en signatur på det sättet är att du får en kod direkt i din skrivruta när du ska skriva ditt inlägg, en kod du behöver flytta ner för att kunna skriva själva bloggtexten och det stör litegrann tycker jag.

Genom att lägga till signaturen direkt i din kodmall slipper du se din signatur under tiden du skriver ditt inlägg, den syns först när du publicerat ditt inlägg.

Du kan skapa en signatur via Mylivesignature eller så kan du själv lägga in ditt namn och styla det med lite kod. På så vis kan du välja något av de 501 teckensnitt Google Webfonts erbjuder.


Signatur från Mylivesignature

Skapa din signatur och avsluta med att kopiera den HTML-kod du får.
( Osäker på hur? Läs steg för steginstruktioner här )

Öppna din bloggs kodmall och kryssa i rutan för Utöka Gränssnittskomponentmallar.

Tryck Ctrl och F på ditt tangentbord för att få fram en sökruta.

I sökrutan fyller du i    <div class='post-footer'>   och trycker enter.

Ovanför den här raden klistrar du in din signaturkod.  Förhandsgranska och om du är nöjd, spara!


Vill du centrera din signatur?  Lägg till <center> före din kod och avsluta med </center> efter koden.


Egen signatur

Vill du hellre lägga till en egen signatur med ett teckensnitt från Google Webfonts?

Att jag föreslår teckensnitt just härifrån är för normalt sett kan en besökare bara se de teckensnitt han/hon själv har installerade på sin dator då denne besöker en sida, men genom att använda en speciell funktion Google Webfonts har kan vi välja på hela 501 olika fonter och alla besökare ser din signatur precis så som du gör.


Öppna  bloggens kodmall och  kryssa i rutan för Utöka Gränssnittskomponentmallar.

Tryck Ctrl och F på ditt tangentbord för att få fram en sökruta.

I sökrutan fyller du i    <div class='post-footer'>   och trycker enter.

Ovanför den här raden klistrar du in följande kod:

<div class='textsignatur'>Namn</div>

Byt ut Namn mot det namn du vill använda i din signatur.  Spara!



Nu är det dags att styla din signatur. Börja med att gå till Google Webfonts där du väljer vilket teckensnitt du vill ha. När du hittar något du vill prova klickar du på Quick Use för att få fram den kod du ska använda.


Här hittar du först en kod som ska ligga högst upp i mallen, strax efter <head>taggen.
Kopiera och klistra in under raden <title><data:blog.pageTitle/></title>






Nu kommer ett viktigt steg, du måste lägga till ett / tecken för att koden ska fungera i en Blogger-blogg.
Lägg till ett snedstreck precis innan det avslutande >tecknet och det måste vara ett mellanslag mellan 'text/css' och  /   det är viktigt!:

<link href='http://fonts.googleapis.com/css?family=Spirax' rel='stylesheet' type='text/css' />

Fixat? Bra! Då kan du spara.
(om du får ett felmeddelande att mallen inte går att spara är det mellanrummet eller snedstrecket som saknas, gör om!)

Nu är det dags att lägga till lite egen kod innan du lägger till själva fontfamiljen (steg 4 hos Google Webfonts). Spara sidan öppen och öppna din bloggs kodmall i en ny flik. 

Tryck åter igen Ctrl och F för att få fram sökrutan och fyll i  ]]></b:skin>  Tryck enter!

Före den här raden klistrar du in följande kod:

.textsignatur {
text-align: center;
margin-top: 20px;
margin-bottom: 0px;
font-size: 40px;
font-family: ;
color: #000000;
}

Öppna fliken där du har Google Webfonts och gå till steg 4. Kopiera koden för fontfamilj och byt ut den röda raden i koden ovan mot din nya font-familjkod. Förhandsgranska och ändra färg (color: #000000;), storlek (font-size: 40px, ) och avståndet uppåt och nedåt (marginal) om du vill. 
När du är nöjd - spara!


Nu har du fått en alldeles egen, automatisk signatur som kommer att synas i slutet på varje inlägg utan att du behöver tänka på det mer i framtiden. 


11 comments:

  1. Tack för ett jättebra tips!
    Och för att du förklarar så bra!

    ReplyDelete
  2. Jag har en följdfråga, den finns i forumet:
    http://fixadinblogg.com/index.php?/topic/4628-olika-signaturer-med-olika-teckensnitt-pa-olika-sidor/

    ReplyDelete
  3. Toppen att slippa "signaturskoden" i inläggen och Google Webfonts hade jag helt missat!

    ReplyDelete
  4. Hej

    Först vill jag säga att din sida är underbar!
    Ett stort tack till dig som gör detta men det funkar inte på min blogg :(
    Förstår inte riktigt vad felet är.
    Jag har klistrat in det sista men det kommer inte upp någon signatur :S
    Vad kan jag ha gjort för fel?

    Mvh Eleni

    ReplyDelete
  5. Eleni - har du klistrat in alla tre koderna? Namndelen, fontdelen och sist css-koden där du styr färg, teckensnitt och sånt?

    Jag hittar inte de två första i din kodmall, men sånt är svårt att se utifrån.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Gjorde om allt och tror jag vet vilket fel jag gjorde. Hittade först inte gränssnittet i den nya blogger så gick in via den gamla.
    Men nu har det fixat sig. Tack så hemskt mycket för en underbar sida!!! <3

    ReplyDelete
  8. Det här var en fin ide och jag lyckades med signaturen. En fråga har jag, men den skulle ju inte ställas här.

    ReplyDelete
  9. Varför fungerar det inte på Nattstad?

    http://nattstad.se/ankarstrand

    ReplyDelete
  10. Signaturen fungerar så tack för tipset. Men jag vill inte ha den under LinkWithin, kan man ändra på det?
    http://segervikt.blogspot.se/

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------