Designhjälp för din blogg

Dela dina inlägg på facebook & twitter

Kategori: Roligheter
 
Dessa share buttons kan du nu ha på på din blogg om du vill dela ett specifikt inlägg på facebook eller twitter!
 

1. Gå in i din HTLM-mall (Kugghjulet -> Design -> Redigera HTML (Startsida))

2. Leta upp <div class="entrymeta"> och kopiera och klistra in följande precis under:

<div class="social">
<a href="{{ entry.facebook_share }}" alt="Dela på Facebook"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path d="M12,0.001c-6.627,0-12,5.373-12,12C0,18.629,5.373,24,12,24s12-5.371,12-11.999 C24,5.374,18.628,0.001,12,0.001z M16.787,9.923l-0.168,2.187h-2.242v7.6h-2.834v-7.6H10.03V9.923h1.513V9.237V8.564V8.452 c0-0.647,0.016-1.646,0.487-2.266c0.495-0.655,1.176-1.101,2.347-1.101c1.906,0,2.711,0.272,2.711,0.272l-0.379,2.24 c0,0-0.631-0.182-1.217-0.182c-0.59,0-1.115,0.21-1.115,0.798v0.238v0.785v0.686H16.787z"/></svg></a>
<a href="{{ entry.twitter_share }}" alt="Dela på Twitter"><svg xml:space="preserve" enable-background="new 2.766 0 24 24" viewBox="2.766 0 24 24" height="24px" width="24px" x="0px" y="0px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M14.766,0c-6.627,0-12,5.373-12,12c0,6.627,5.373,12,12,12s12-5.373,12-12C26.766,5.373,21.393,0,14.766,0z M20.513,9.72c0.004,0.116,0.006,0.233,0.006,0.351c0,3.585-2.728,7.719-7.719,7.719c-1.532,0-2.958-0.45-4.159-1.22 c0.213,0.025,0.429,0.038,0.647,0.038c1.271,0,2.441-0.434,3.369-1.161c-1.187-0.021-2.188-0.806-2.534-1.885 c0.166,0.032,0.335,0.049,0.511,0.049c0.248,0,0.486-0.033,0.714-0.094c-1.239-0.25-2.176-1.347-2.176-2.66c0-0.012,0-0.024,0-0.035 c0.366,0.202,0.784,0.325,1.229,0.34c-0.727-0.487-1.206-1.317-1.206-2.259c0-0.497,0.133-0.963,0.367-1.363 c1.337,1.641,3.337,2.721,5.592,2.834c-0.047-0.199-0.071-0.406-0.071-0.617c0-1.499,1.215-2.714,2.713-2.714 c0.781,0,1.486,0.329,1.979,0.857c0.618-0.122,1.2-0.348,1.724-0.659c-0.201,0.634-0.633,1.166-1.192,1.502 c0.549-0.066,1.071-0.212,1.559-0.428C21.501,8.86,21.042,9.338,20.513,9.72z"/></svg></a>
</div>

 

3. Spara

 

4. Gå in i din stilmall (ändrar från startsida till stilmall i rullgardinsmenyn)

Kopiera och klistra in följande längst ned i stilmallen:

.social, .social a:visited {
fill: #999;
}

.social a:hover, .social a:visited:hover {
fill: #ccc;
}

 

5. Spara

Du ändrar färg på knapparna genom att ändra i stilmallen. I det första stycket ändrar du hur de ser ut som vanligt. I andra stycket ändrar du hur de ser ut när du har musen över knapparna.


Bildspel som header

Kategori: Header, Roligheter
Nu kan du ha ett bildspel som header. Såhär gör du:

1.
Gå in i din HTLM-mall (Kugghjulet -> Design -> Redigera HTML (Startsida))

2. Efter <head> klistrar du in följande:

<script type="text/javascript">

<!--

var image1=new Image()

image1.src="BILDADRESS 1"

var image2=new Image()

image2.src="BILDADRESS 2"

var image3=new Image()

image3.src="BILDADRESS3"

//-->

</script>

 


3. 
Nu ska du lägga in bildspelet var du vill ha det. Eftersom vi i detta fall vill ha det i headern lägger vi in det direkt efter <div id="header"> och det är denna kod du ska lägga in:

<center>

 <img src="firstcar.gif" name="slide" width="900" height="430" />

<script>

<!--

//variable that will increment through the images

var step=1

function slideit(){

//if browser does not support the image object, exit.

if (!document.images)

return

document.images.slide.src=eval("image"+step+".src")

if (step<3)

step++

else

step=1

//call function "slideit()" every 3.0 seconds

setTimeout("slideit()",2500)

}

slideit()

//-->

</script>

</center>

4.
Spara 


5. Nu går du tillbaka till den första koden du klistrade in, den precis under <head>

Där det står BILDADRESS1 klistrar du in adressen till den första bilden du vill ha i bildsspelet. Där det står BILDADRESS2 klistrar du in den andra bilden du vill ha osv....

Du får din bildadress genom att ladda upp bilden på bloggen och sedan kopiera adressen som står under fullstort läge.  Se detta inlägg för hjälp!

6. Spara

 




Runda hörn på bilder

Kategori: Roligheter
Om man vill ha runda hörn på en bilder i sin blogg kan man givetvis lägga upp bilder som redan har runda hörn. Man kan också använda sig av kodning. Så här gör du om du vill koda till runda hörn på en bild..

1. Gå in i din stilmall. Klista in följande längst ned i stilmallen:

#rundbild {
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}


2.
Spara. 

3. Gå nu in i din kodmall. Där du vill ha bilden klistrar du in:

<img id="rundbild" src="ADRESSEN TILL DIN BILD"/>

4.
Spara

Se hur du laddar upp en bild och hittar adressen till din bild
Se guide över din stilmall för att veta vad som är vad och på så sätt veta var i kodamllen du ska ändra.



Hos blogghjalparn.blogg.se finner du textguider om HTML & CSS. Guiderna riktar sig till bloggare som vill ha hjälp med sin bloggdesign. Man kan själv läsa sig till hur man ska göra eller så kan man beställa sin egna design alternativt köpa en redan färdig design.

Copyright © 2017 Blogghjälparn

BLOGGHJÄLPARN


Senaste inläggen

Portaler & Listor
Webbdesign