Header Ads

Dekorera med ljusslinga



Ute blir det allt mörkare och vad passar inte bättre då än att hänga upp lite ljusslingor.
Det kan du göra på din blogg också om du vill.

Ljusskenet du ser runt lamporna på bilden gör sig bäst mot en mörk bakgrund, men lampslingan i sig är fin även mot en ljusare bakgrund.
Du hittar en annan ljusslinge-bild längre ner i inlägget.

Tyvärr kan du inte lägga in koden i en html-gadget utan du måste in i din kodmall och lägga till en liten kodsnutt, men det är enkelt.

Gör så här:

Öppna din bloggs kodmall.


Klicka med musen en gång i kodmallsrutan (för att visa att det är här du ska söka) och tryck sen på Ctrl och F på ditt tangentbord. Du får då fram en sökruta.



I den sökrutan klistrar du in  <div class='body-fauxcolumns'> och trycker enter. Du kommer då direkt till rätt plats i din kodmall. 

Ovanför den här raden ska du klistra in följande kod.

<!-- FixaDinBlogspots ljusslinga -->
<div id="tag" style="position:absolute; top:20px; z-index:1;">
<a href="http://fixa-din.blogspot.com" target="_blank">
<img border="0" src="http://byggfyhren.com/fixadinblogspot/ch_li.png" />
</a></div>
<!-- Slut kod ljusslinga -->


Det ska se ut så här:



Lägg gärna till den tomma raden före och efter kodstycket så är det lättare för dig att hitta det igen när vintern/julen är slut och du vill radera bilden med ljusslingan.

Tips!
Om du lägger FixaDinBlogspot (eller adressen fixa-din.blogspot) på minnet kan du enkelt söka efter koden igen nästa gång. Använd bara Ctrl och F igen.

Spara sen din kodmall.

Syns ej bloggrubriken ordentligt?

Kanske visar det sig att någon del av din bloggrubrik skyms av lamporna och det vill vi ju inte.
Du har då två val. Antingen kan du lägga rubriken ovanpå lampbilden (tänk dig en stapel med böcker t.ex. Överst syns ju bäst) eller så kan du flytta ner rubriken en liten bit.

Rubriken ovanpå

I koden du klistrade in finns redan förberett för att lägga din bild under rubriken, jag har lagt till z-index:1;
z-index använder man för att tala om hur viktigt något är, vilket element som ska visas överst. Ju högre siffra desto viktigare = längre fram.
Jag har givit vår bild z-index 1 vilket säger att den är viktigare än bakgrunden och wrappern (den färgade bakgrunden bakom inläggen). Genom att ge din bloggrubrik z-index 2 (eller högre) säger du att rubriken ska synast över bilden.

Gör så här:

Gå till din bloggs Malldesigner.
Du hittar den här:


Här ska du sen klicka vidare till Avancerat - Lägg till CSS.


I rutan fyller du i följande kod:

.Header h1 {
z-index:2;
}

Klicka sen på Använd i blogg uppe i högra hörnet för att spara.

Fördelen med att använda z-index (den här gången) är att du inte behöver plocka bort den här koden efter vintern/jul, den stör inte din blogg även om den ligger kvar.

Flytta ner Rubriken

Vill du hellre flytta ner rubriken lite gör du så här istället.

Gå till Malldesignern - Avancerat - Lägg till Css som i exemplet ovan.
För att flytta ner rubriken något ska du lägga in följande kod i css-rutan.

.Header h1 {
margin-top: 30px;
}

Så här:


Ändra ev på pixelantalet om du vill öka eller minska avståndet uppåt. 
Spara när du är nöjd. 

Den här koden vill du kanske ta bort när du tar bort din ljusslinga framöver och då hittar du den lätt, det är bara att radera den. Glöm inte att spara!

Använda en annan bild


En ljusslinga som passar bättre mot ljusa bakgrunder kan du få genom att radera ettan i bildlänken i koden, alltså den här: http://byggfyhren.com/fixadinblogspot/ch_li1.png

Om du hellre vill använda en egen bild kan du göra det genom att byta ut bildlänken mot din egen. Tänk på att du behöver ha en lång, låg bild för att passa in. Lämplig storlek är höjd max 60px och längd minst 1900px om du vill att den ska räcka över de flesta datorskärmar. Självklart kan du ha en bild som enbart täcker en liten yta också om du föredrar det!



Var försiktig när du klistar in din bildlänk så att du inte råkar radera de två "situationstecknen", ett på vardera sida om bildlänken. 

3 comments:

  1. Så fint Juligt ❤️...
    /Kram i vintersolen!

    ReplyDelete
  2. Hej! Går det att göra ljusslingan kortare? Min blogg är 1010 bred och när jag adderat ljusslingan och tittar på bloggen från mobil enhet krymper hela bloggen ihop och lägger sig förkrympt på ena sidan av skärmen.
    Mvh
    Annars mycket nöjd följare!

    ReplyDelete
  3. Hej Anonym. Jag kan inte ordna en kortare ljusslinga men du kan få en kod som döljer slingan i mobiler. Lägg den i Malldesignern - Avancerat - Lägg till CSS så ska det fungera. Se till att få med alla tecken, särskilt de två avslutande }-tecknen.
    Här är koden:

    @media screen and (max-width: 600px) {
    #tag {
    display:none;
    }
    }

    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.
-------------------------------