Dela upp kategorierna eller arkivet i spalter

 
 Efter många förfrågningar kommer nu ett svar på hur jag har delat upp mina kategorier i två spalter. Yeey!
 
 
1. Gå in HÄR och kopiera en tabellkod som passar ditt behov eller använd den här nedanför.
 
<table width="BREDDEN" border="0">
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
</table>
 
2. Koden ovan är för två spalter. De översta raderna i varje stycke är spalt 1 och de nedre är spalt 2. Om du vill ha tre spalter eller fler lägger du bara till en rad, t ex.
 
<table width="BREDDEN" border="0">
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
</table>
 
3. För fler rader lägger du bara till fler stycken.
 
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
 
Här är ett exempel på två spalter med fyra rader:
 
<table width="BREDDEN" border="0">
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
</table>
 
Du kan lägga till hur många spalter och rader som helst.
 
4. width="BREDDEN" anger du bredden på hela tabellen. Välj den storlek som passar i din meny. Om du vill ha underrubriker ovanför spalterna skriver du bara rubriken istället för adressen till kategorin, t ex.
 
<table width="BREDDEN" border="0">
<tr>
<td><b>UNDERRUBRIK</b></td>
<td><b>UNDERRUBRIK</b></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
</table>
 
SLUTEXEMPEL:
 
<div class="navheader">Kategorier</div>
<ul>
<table width="BREDDEN" border="0">
<tr>
<td><b>UNDERRUBRIK</b></td>
<td><b>UNDERRUBRIK</b></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
<tr>
<td><a href="URL">TEXT</a></td>
<td><a href="URL">TEXT</a></td>
</tr>
</table>
</ul>
 
 
Du får pyssla och testa lite själv men här har du i alla fall grunden.

Visa inläggets alla kategorier (utan kommatecken efter sista!)

 
Jag har tidigare visat hur man får alla kategorier för ett inlägg att synas men med den versionen får man ett kommateckan efter sista kategorin. Här är en version utan.

1. Gå in i din kodmall och leta upp <a href="{{ entry.category_link }}">{{ entry.category_name }}</a> som ligger någonstans under <div id="content">. Du får leta lite för kan inte säga exakt vart den ligger, alla har den inte på samma plats.

2. Byt ut

<a href="{{ entry.category_link }}">{{ entry.category_name }}</a>

till ↓

{% for category in entry.categories %}{% if loop.last %}<a href="{{ category.link }}">{{ category.name }}</a>{% else %}<a href="{{ category.link }}">{{ category.name }}</a>, {% endif %}{% endfor %}


Spara och klart! Gör nu samma sak i alla dina kodmallar.

Få ett årsuppdelat arkiv

 
Förklaring: Få ditt bloggarkiv uppdelat efter år. För denna varianten krävs bara ett enkelt kodutbyte och du behöver inte lägga in månad för månad. 
 


1. Gå in i din kodmall och leta upp stycket för arkivet (<div class="navheader">Arkiv</div>).

2. Ersätt följande kod ↓

<ul>
{% for month in archive_months %}
<li><a href="{{ month.link }}">{{ month.name }}</a></li>
{% endfor %}
</ul>

med ↓

{% set swe_months = ["", "januari", "februari", "mars", "april", "maj", "juni", "juli", "augusti", "september", "oktober", "november", "december"] %}
<ul>
{% for group in archive_months|groupby('year')|reverse %}
<li>
<b>{{ group.grouper }}:</b>
{% for a in group.list|reverse %}
<a href="{{ a.link }}">{{ swe_months[a.month] }}</a>
{% endfor %}
</li>
{% endfor %}
</ul>

Spara och gör samma sak i samtliga kodmallar!


TIPS:
Du kan ändra "januari", "februari" osv. till t ex. "jan", "feb", "01", "02"... Eller kanske till det engelska namnet.

Få en "Scroll to Top"-knapp på din blogg

 
Förklaring: Vill du ha en liten knapp i nedersta högra hörnet som du och dina läsare kan trycka på för att scrollas upp till toppen av bloggen igen? Detta ger din blogg bättre navigering.
 
 

 
Gör såhär:

1. › Gå in här ‹ och välj vilken knapp du vill ha och kopiera koden i rutan bredvid.  

2. Klistra in koden i din kodmall ovanför </body>. Du bestämmer själv om du vill ha den i alla kodmallar eller bara startsidan. Jag har bara på startsidan.

Spara & klart!


TIPS: 
Ett tips är att välja den knapp som passar bäst ihop med din bloggdesign.

Få ditt arkiv i en dropdown/ droplist

 
 
Förklaring: Har du bloggat länge? Har du ett långt arkiv? Gör din blogg mer stilren genom att gömma arkivet i en dropdown/ droplist.
 

 
Gör såhär:

1. Gå in i din kodmall och leta upp stycket för ditt arkiv (<div class="navheader">Arkiv</div>).

2. Ersätt koden ↓

{% for month in archive_months %}
<li><a href="{{ month.link }}">{{ month.name }}</a></li>
{% endfor %}

Med ↓

<form name="jump3"><br /> <select name="menu3" onChange="location=document.jump3.menu3.options[document.jump3.menu3.selectedIndex].value;" value="GO"><br /> <option selected>Välj en månad</option><br /> <option>——————-</option><br /> {% for month in archive_months %}<br /> <option value="{{ month.link }}">{{ month.name }}</option><br /> {% endfor %}<br /> </select><br /> </form>

3. Spara och gör nu samma sak i alla dina kodmallar.
 
 
Spara & klart!


TIPS:
För att få listan centrerad, <center>KODEN</center>.

Länkar i headern

 

OBS! Detta är ej med dropdown utan bara länkar! 

Gör såhär:

1. Kopiera texten nedan och klistra in längst ner i din stilmall.

#headerlink {
font-family: arial, verdana;
font-size: 12px;
text-align: left;
font-weight: normal;
padding: 0px 0px 10px 50px;
color: #ffffff; margin: 0px;
}  
 
#headerlink a { color: #ffffff; text-decoration:none; padding: 0px 0px 0px 35px; }
#headerlink a:hover { color: #000000; text-decoration:none;

2. Du kan ändra i koderna så att de passar rätt på din blogg.

#headerlink { font-family: arial, verdana;  ← Här ändrar du typsnittet/ textstilen
font-size: 12px;  ← Här ändrar du storleken på texten
text-align: left;  ← Här bestämmer du ifall texten ska ligga åt vänster (left), höger (right) eller i mitten (center)
font-weight: normal;  ← Här bestämmer du tjockleken på texten, bold eller normal
padding: 0px 0px 10px 50px;  ← Här ändrar du positionen på texten
color: #ffffff;  ← Här ändrar du textfärgen (ej på länkarna)
margin: 0px; }

#headerlink a {
color: #ffffff;  ← Här ändrar du länkarnas färg
text-decoration:none;
padding: 0px 0px 0px 35px;  ← Här ändrar du avståndet mellan länkarna }
 
#headerlink a:hover {
color: #000000;  ← Här ändrar du vilken färg länkarna ska få vid mouseover
text-decoration:none; }

3. Kopiera texten nedan och klistra in den på valfri plats i dina kodmallar. Vill du ha länkarna ovanför header klistrar du in den ovanför <div id="header">

<div id="headerlink">
<a href="URL/LÄNKADRESS">LÄNKTEXT</a>
<a href="URL/LÄNKADRESS">LÄNKTEXT</a>
<a href="URL/LÄNKADRESS">LÄNKTEXT</a>
</div>

4. Sätt nu bara in dina länkar och fixa med färg, position mm i stilmallen.


Lycka till, och glöm inte att spara!

Visa inläggets alla kategorier

 
Förklaring: Numera kan du publicera dina inlägg i fler än en kategori och då vill du såklart att alla kategorierna ska synas vid inlägget.
 

 
Gör såhär: 
 
1. Gå in i din kodmall och leta upp <a href="{{ entry.category_link }}">{{ entry.category_name }}</a> som ligger någonstans under <div id="content">. Du får leta lite för kan inte säga exakt vart den ligger, alla har den inte på samma plats.
 
2. Byt ut
 
<a href="{{ entry.category_link }}">{{ entry.category_name }}</a>
 
till ↓
 
{% for category in entry.categories %}<a href="{{ category.link }}">{{ category.name }}</a>, {% endfor %}
 
 
Spara och klart! Gör nu samma sak i alla dina kodmallar.

Bildspel i menyn

 
Förklaring: Få ett bildspel i din sidomeny som skiftar mellan ett antal bilder.
 
1. Följ stegen 1 och 2 i › det här inlägget ‹.
 
2. Lägg in denna kod ↓ under <div id="side"> eller <div class="nav"> i kodmallarna. Jag la min under nav. Båda funkar men på olika sätt, du får testa själv.
 
<div id="EmilyPictureBackground">
<img src="BILD 1" width="BREDDEN" height="HÖJDEN" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"BILD 1;BILD 2;SISTA BILDEN",5);
</script>
 
Nu kan du lägga in hur många bilder du vill bara du har ett mellan bilderna. OBS! Ej efter sista bilden! Du lägger bildkoden där det står BILD 1 osv.
 
Glöm inte att lägga in i alla kodmallar, och spara!
 

TIPS:
Se till att alla bilderna är lika stora. 5 = hur många sekunder en bild ska visas innan den byter till nästa.

Stor bokstav i början på varje inlägg

 
Vill du se hur det kan se ut med större bokstav? Kolla in min julblogg.
 
1. Gå in i din stilmall och klistra in följande kod längst ner:
 
.entrybody:first-letter{
display: block;
margin: 5px 0 0 5px;
float: left;
color: #E42732;
font-size: 20px;
font-family: Georgia;
}

2. Ändra de olika värderna till så som du vill ha det:
color = Färgen
font-size = Storleken
font-family = Typsnittet
 
Spara & klart!
 

TIPS:
Endast den första bokstaven i inlägget blir stor. Texten måste ligga först i inlägget för att den första bokstaven ska bli stor. Ligger det t ex. en bild överst och texten under så blir inte bokstaven stor.

Få en genomskinlig bakgrund på Wrapper

Förklaring: Wrapper är den bakgrund som sitter bakom dina inlägg, headern och menyn. Få en genomskinlig bakgrund på din Wrapper som håller samman bloggen på ett snyggt sätt.
 


Gör såhär:
 
1. Gör en genomskinlig bild i photoshop och ladda upp den på bloggen. Spara URL-adressen.
 
2. Gå in i stilmallen och leta upp stycket #wrapper { Som brukar ligga ganska högt upp.
 
3. Där lägger du till ↓
background: url(LÄNK TILL genomskinliga BILDEN);
 
Lägg kodraden någonstans i Wrapper stycket. Har du redan en background (eller background-color), ersätt den. Spara!
 
Nu om du även vill ha runda hörn och skugga som jag hade så lägger du även in dessa i Wrapper:
 
För (svag) skugga:

-webkit-box-shadow: 0px 0px 5px #999;
-moz-box-shadow:0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;

 

För runda hörn (med radius 30px):

-moz-border-radius: 30px;
border-radius: 30px;

 

Såhär kan det t ex. se ut:

#wrapper {
-webkit-box-shadow: 0px 0px 5px #999;
-moz-box-shadow:0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
background: url(http://cdn.publishdev.se/cdn/7/2884404/images/2012/genomskinlig_197514617.png);
width: 1000px;
margin: 0px auto;
position: relative;
padding: 10px 10px 10px 10px;
-moz-border-radius: 30px;
border-radius: 30px;
} 

Spara & klart!
 

 TIPS:
Går inte din Wrapper hela vägen ner utan stannar när menyn tar slut? Gör såhär:
Lägg in följande kod i stilmallen efter Wrapper-stycket. 

#wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0px;
}  

Få ett unikt typsnitt i rubrikerna

 
Förklaring: Få ett unikt typsnitt i dina rubriker. Kanske ett i skrivstil eller sketchy.
 


Gör såhär:
 
1. › Gå in här ‹ och välj det typsnittet du vill ha. Klicka sedan på "Quick-use".
 
2. Bläddra ner tills du kommer till en blå ruta med nr. 3 på. Kopiera koden i rutan, den kan t ex. se ut såhär..
 
<link href='http://fonts.googleapis.com/css?family=Butcherman' rel='stylesheet' type='text/css'>
 
3. Klistra in koden i dina kodmallar ovanför </head>. Spara.
 
4. Gå nu tillbaka till Google Web Fonts och kopiera koden i nästa ruta, under nr. 4, den kan t ex. se ut såhär..
 
font-family: 'Butcherman', cursive;
 
6. Klistra in koden i din stilmall under h3 { (entry headers). Ersätt din tidigare font-family kod.
Exempel: 

/** Entry headers **/
h3 {
font-family: 'Butcherman', cursive;
font-size: 30px;
text-align: left;
font-weight: normal;
padding: 5px 10px 5px 10px;
color: #000;
margin: 15px 0px 0px 0px;
text-shadow: 0px 1px 2px #999; <-- Den här koden kan du lägga till om du vill ha skugga bakom rubriken

}

 

Nu har du fått ditt nya typsnitt på rubrikerna i inläggen. För att få samma på rubrikerna i menyn gör du bara samma sak fast under stycket .navheader { .

 

Spara & klart!


Signatur efter varje inlägg

 
Förklaring: Få en signatur eller hälsning efter varje inlägg.
 

 
Gör såhär:
 
1. Om du vill ha en bild som signatur med t ex. ditt namn laddar du upp den på bloggen och sparar URL-adressen.
 
2. Gå in i din kodmall och leta upp stycket <div id="content">
 
3. Kopiera någon av koderna nedan och klistra in under <div>${EntryBody}</div>
 
<div align="right"><img src="DIN BILD/SIGNATUR"></div>
 
<div align="right"><font face="TYPSNITT" color="FÄRG" size="STORLEKEN (1-6 eller px)">DIN TEXT</font></div>
 
4. Klistra in koden till din bild eller skriv din text och välj om den ska ligga till höger (right), vänster (left) eller i mitten (center). Spara sedan och läggen in samma sak i de andra kodmallarna.
 
Spara & klart!

Ändra färg på länkar i menyn

 
Förklaring: Få en annan färg på länkarna i sidomenyn.
 


Gör såhär:
 
1. Gå in i din stilmall.
2. Leta upp denna kod
 
.nav a { color: #666; text-decoration:none; } Här där det står #666 ändrar du till den färgen du vill ha.
.nav a:hover { font-weight: bold; color: #000; }Här kan du ändra vilken färg det blir vid mouseover.
 
 
Observera att det inte är exakt likadant i allas stilmallar, men det är i alla fall något liknande.

ID och CLASS? MARGIN och PADDING?

 
Jag har fått frågorna flera gånger om vad det är för skillnad på div id och div class, jag vet såklart svaret men hänvisar er som vill veta till Design&Makeup som har ett jättebra inlägg om det. Klicka här!
Jag har även fått frågor om vad det är för skillnad på margin och padding, Design&Makeup har ett jättebra inlägg om det också. Klicka här!
 
Hur dessa funkar och vad det är för skillnad på dom kan vara ganska bra att kunna om man vill syssla med bloggdesign,

Bildspel i headern

 
Förklaring: Få ett bildspel i din header som skiftar mellan ett antal bilder.
 

 
Gör såhär:
 
1. Gå in i din stilmall och lägg in koden ↓ under stycket #header
 
#EmilyPictureBackground {
float: center;
margin-right: 0px; }
 
2. Lägg in denna kod ↓ ovanför </head> i dina kodmallar
 

<script type="text/javascript">

// Browser Slide-Show script. With image cross fade effect for those browsers

// that support it.

// Script copyright (C) 2004-2011 www.cryer.co.uk.

// Script is free to use provided this copyright header is included.

var FadeDurationMS=1000;

function SetOpacity(object,opacityPct)

{

// IE.

object.style.filter = 'alpha(opacity=' + opacityPct + ')';

// Old mozilla and firefox

object.style.MozOpacity = opacityPct/100;

// Everything else.

object.style.opacity = opacityPct/100;

}

function ChangeOpacity(id,msDuration,msStart,fromO,toO)

{

var element=document.getElementById(id);

var msNow = (new Date()).getTime();

var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;

if (opacity>=100)

{

SetOpacity(element,100);

element.timer = undefined;

}

else if (opacity<=0)

{

SetOpacity(element,0);

element.timer = undefined;

}

else

{

SetOpacity(element,opacity);

element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);

}

}

function FadeInImage(foregroundID,newImage,backgroundID)

{

var foreground=document.getElementById(foregroundID);

if (foreground.timer) window.clearTimeout(foreground.timer);

if (backgroundID)

{

var background=document.getElementById(backgroundID);

if (background)

{

if (background.src)

{

foreground.src = background.src;

SetOpacity(foreground,100);

}

background.src = newImage;

background.style.backgroundImage = 'url(' + newImage + ')';

background.style.backgroundRepeat = 'no-repeat';

var startMS = (new Date()).getTime();

foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);

}

} else {

foreground.src = newImage;

}

}

var slideCache = new Array();

function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)

{

var imageSeparator = imageFiles.indexOf(";");

var nextImage = imageFiles.substring(0,imageSeparator);

if (slideCache[nextImage] && slideCache[nextImage].loaded)

{

FadeInImage(pictureID,nextImage,backgroundID);

var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)

+ ';' + nextImage;

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",

displaySecs*1000);

// Identify the next image to cache.

imageSeparator = futureImages.indexOf(";");

nextImage = futureImages.substring(0,imageSeparator);

} else {

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",

250);

}

// Cache the next image to improve performance.

if (slideCache[nextImage] == null)

{

slideCache[nextImage] = new Image;

slideCache[nextImage].loaded = false;

slideCache[nextImage].onload = function(){this.loaded=true};

slideCache[nextImage].src = nextImage;

}

}

</script><head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

 

<script src="fadeslideshow.js">

 

/***********************************************

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

***********************************************/

<script>var slide1foldername='';</script><script charset="utf-8" src="slide1.js"></script>

</script>

 

<script>

 

var mygallery=new fadeSlideShow({

wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "ondemand",

togglerid: ""

})

 

 

var mygallery2=new fadeSlideShow({

wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "always",

togglerid: "fadeshow2toggler"

})

 

</script>

 

3. Lägg sedan in denna kod ↓ efter <div id="header">
 
<div id="EmilyPictureBackground">
<img src="BILD 1" width="BREDDEN" height="HÖJDEN" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"BILD 1;BILD 2;SISTA BILDEN",5);
</script>

Nu kan du lägga in hur många bilder du vill bara du har ett ; mellan bilderna. OBS! Ej efter sista bilden! Du lägger bildkoden där det står BILD 1 osv.
 
Glöm inte att lägga in i alla kodmallar, och spara!
 

TIPS:
Se till att alla bilderna är lika stora. 5 = hur många sekunder en bild ska visas innan den byter till nästa.

Dela menyn i boxar med runda hörn

 
Förklaring: Få sidomenyn indelad i boxar/ delar. Du kan även ge boxarna runda hörn.
 


Gör såhär:
 
1. Gå in i din stilmall och leta upp stycket #side. Där ska du:
 
#side {
text-align: left;
float: left;
width: 205px;
margin: 0px 0px 0px 0px;
padding: 0px;
margin-top: 0px;
}
#side {
background: #fff;  ← Ta bort bakgrunden (ta bort hela den raden eller byt ut färgkoden till None)
text-align: left;
float: left;
width: 215px;  ← Här kan ni bestämma bredden på menyn
margin: 0px 0px 0px 0px;  ← Nollställ margin
padding: 0px;  ← Nollställ padding
}
 
2. Scrolla sedan ner till .nav ul. Där ska du:
obs! lägg inte till koderna om de redan finns.
 
.nav ul {
text-align: left;  ← Om du vill ha texten åt vänster (left), höger (right) eller centrerat (center)
margin: 0px 0px 10px; ← Hur mkt mellanrum det ska vara mellan boxarna
padding: 10px;  ← Hur mkt padding (mellanrum) det ska vara mellan innehållet och ytterkanten i boxen
font-weight: normal;  ← Tjocklek på texten (normal, medium eller bold)
background: #fff; ← Bakgrundsfärgen i boxarna
}
 
3. För att sedan få runda hörn lägger du till:
 
-moz-border-radius: 15px;
border-radius: 15px;
 
Så här kan det se ut:
 
.nav ul {
text-align:left;
margin: 0px 0px 10px;
padding: 10px;
font-weight: normal;
background: #dfdfdf;
-moz-border-radius: 15px;
border-radius: 15px;
}
 
Spara!
 
 
4. Nu ska vi in i kodmallen. Om du kollar på din blogg nu så är rubrikerna i menyn utanför boxarna. Det ska vi fixa nu. Leta upp alla kategorier (senaste inläggen, kategorier, arkiv osv.). Jag använder Senaste inlägget för att visa hur man gör:
 
<div class="navheader">Senaste inäggen</div>
<ul>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">» ${EntryTitle}</a></li>
</tag:recentlist>
</ul>
 
Klipp ut den markerade texten <ul> och klistra in den ovanför <div class="navheader">Senaste inäggen</div>. Så här ska det se ut:
 
<ul>
<div class="navheader">Det senaste</div>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">» ${EntryTitle}</a></li>
</tag:recentlist>
</ul>
 
Gör nu samma sak på övriga kategorier. Och glöm inte göra det i ALLA kodmallar.
 
Spara!
 
Om ni har gjort rätt och om jag har förklarat rätt så borde eran meny vara delad i boxar med rundade hörn nu. Säg gärna till om något blivit fel, inte funkar eller om jag missat nåt.

Ta bort bloggnamnet i headern

 
Gör såhär:
 
Gå in i dina kodmallar och leta upp stycket:
 
<div id="header">
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>   ← Ta bort den raden.
<h2>${BlogDescription}</h2> ← Och ta bort den.
</div>
 
Sedan kan du gå in i stilmallen och ta bort de två styckena som börjar med  h1 { och  h2 {
 
 
Spara och klart!
<div id="header">
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

Hur man gör en mouseover-bild

 
Förklaring: En mouseover skiftar bild när du håller muspekaren över. Jag brukar använda det till min julkalender.
 


Gör såhär: 
 
1. Börja med att klistra in följande kod i alla kodmallar ovanför </head>
 
<script LANGUAGE="JavaScript">
<!--
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
//
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
//
// http://jehiah.com/archive/simple-swap
//
function SimpleSwap(el,which){
el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;
// preload image
// comment the next two lines to disable image pre-loading
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
// set event handlers
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
// save original src
x[i].setAttribute("origsrc",x[i].src);
}
}
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
//-->
</script>
<script LANGUAGE="JavaScript">
<!--
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
//
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
//
// http://jehiah.com/archive/simple-swap
//
function SimpleSwap(el,which){
el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;
// preload image
// comment the next two lines to disable image pre-loading
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
// set event handlers
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
// save original src
x[i].setAttribute("origsrc",x[i].src);
}
}
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
//-->
</script>
 
 
2. Skapa dina bilder och ladda upp dem på bloggen. Spara URL-adresserna.
 
3. Använd någon av koderna nedan och klistra in där du vill ha dem. Om du ska ha i ett inlägg måste du välja "ändra redigerare" först.
 
<img src="ADRESSEN TILL BILD 1" oversrc="ADRESSEN TILL BILD 2">
 
Vill du ha bilden som en länk, använd:
 
<a href="ADRESSEN TILL SIDAN"><img src="ADRESSEN TILL BILD 1" oversrc="ADRESSEN TILL BILD 2">
 
 
Spara och klart!

Få google translate på din blogg

 
Förklaring: Med Google Translate kan dina besökare översätta din sida till ett annat språk.
 


Jag har fått förfrågan om hur man får Google Translate på sin blogg, här är svaret:
 
Det är väldigt enkelt. Gå in på http://translate.google.com/translate_tools?hl=sv. Följ bara stegen 1-4. Kopiera koden på steg 4 och lägg in den där du vill ha den på din blogg.
 
 
Klart!

Gör en GIF på Picasion.com

 
Förklaring: En animerad/ skifftande bild.
 


Gör såhär:
 
1. Gå in på Picasion.com och ladda upp de bilder du vill ha (minst 2, max 10)
 
2. Välj vilken bredd bilden ska ha (Size). Välj "advanced.." för att skriva en egen bredd (max 450).
 
3. Välj hur snabbt bilderna ska skifta (Speed). Du ser på den lilla rutan bredvid hur snabbt det är.
 
4. Tryck sen på "Create animation" så får du upp koden. Du kan även högerklicka och spara bilden till din dator.

Nästa sida