Jag har fått frågor om hur jag har gjort flikarna i menyn, så det tänkte jag berätta nu.
Detta är klurigt, så läs igenom allt två gånger så att du säkert har förstått.

Vad är en moseover bild?
- Det är en bild som övergår till en annan bild när man har musen över den.
Man behöver alltså två bilder!

Mina flikar består av dessa bilder:

Den första bilden syns när bloggen laddat och den andra när ni lägger musen på den första bilden.
Klickar man på bilden kommer man till ett inlägg eller sida, och det är det jag skall visa er hur man gör!

Såhär gör ni:
Börja med att göra själva bilderna, det som sedan blir själva "menyn".
Gå in i kodmallen och lägg in följande kod före </head> i alla kodmallar.
<mce: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" mce_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();} // --></mce:script>

Sedan laddar ni upp bilderna på er blogg och kopierar URL-adressen. Alltså länken till bilderna (http:// )
Lägg in URL-adresserna i denna kod:

<div style="position:absolute; width:903px; x-index:0; left: 30px; top:370px;">
<a href="http://LÄNKditBILDERNAlänkar">
<img src="http://URLtillBILD1" oversrc="http://URLtillBILD2" border="0"></a></div>

Där det står "LÄNKditBILDERNAlänkar" skall ni skriva in URL-adressen dit bilden skall länka.
Där det står "URLtillBILD1" skall ni skriva in URL-adressen som den första bilden har. Alltså den som kommer att synas när bloggen laddat.
Där det står "URLtillBILD2" skall ni skriva in URL-adressen till den andra bilden. Alltså den som kommer att synas när man har musen på bilden.

Denna kod skall ni lägga in i kodmallara under <div id="wrapper">
Är flikarna på fel ställe så skall ni ändra siffrorna här --> left: 30px; top:370px;
"Left" ändrar hur mycket år vänster bilderna skall vara och "Top" ändrar hur högt upp bilderna skall vara. (Om man sätter ett minus tecken framför siffran så flyttas fliken åt andra hållet)
Skall man ha många flikar måste man ändra dehär siffrorna för alla flikar.


Förstod ni inte eller har ni frågor? Kommentera!