Tv IS happiness

Twitter på bloggen

Det är ganska lätt.
Gå in på den här adressen men se till att du är inloggad på Twitter först. När du tagit dig in där så väljer du att skapa en för "website".

Nu väljer du hur du vill att din widget skall se ut. Var noga med att se till att bredden på din widget matchar bredden på din side (där den nu enligt mina instruktioner kommer att läggas).

Gå in på din blogg i en ny internetflik. Vidare till din design flik och sedan kodmallar.
Scrolla ned till <div id="side">.

Nu väljer du ut var i din side den ska ligga. Jag bestämmer nu att den kommer hamna efter dina senaste inlägg(du kan givetvis lägga den någon annanstans). Scrolla ned till detta parti som du kan se nedan.

<div>Senaste inläggen</div>
<ul>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>
<div class="navheader">Senaste inläggen</div>
<ul>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>

Efter det här partiet kommer din twitter widget ligga. MEN!
Innan du lägger in den koden så börja med att kopiera in <div class="navheader">Twitter</div> .
Nu lägger du in koden som du fått från twitter efter den raden som du nyss kopierade in!

GLÖM INTE ATT SPARA!!

Transparens

/* opacitet for IE */
filter:alpha(opacity=95);
/* opacity: 0.95; filter: alpha(opacity=75); */
/* opacitet CSS3 standard */
opacity:0.95;
/* opacitet for Mozilla */
-moz-opacity:0.95;
Det finns olika sätt att få något att bli genomskinligt. Om ni vill få ngt att bli helt genomskinligt så räcker det med att skriva in transparent istället för en färgkod. T.ex
background: #transparent;


Men! man kan även ha olika delar på bloggen delvis transparenta. Så att man se igenom men inte helt och hållet.
Koden nedan är koden ni ska klistra in.

/* opacitet for IE */
filter:alpha(opacity=75);
/* opacity: 0.75; filter: alpha(opacity=75); */
/* opacitet CSS3 standard */
opacity:0.75;
/* opacitet for Mozilla */
-moz-opacity:0.75;

Denna kod skall ni klistra in under den del av bloggen som ni vill ha delvistransparent. (t.ex side eller wrapper.)
För att ändra hur mkt genomskinlig vald del ska vara så ändrar ni samtliga siffror som är skrivna i fetstil. Om ni vill ha mindre genomskinlighet (mer vitt i mitt fall) så skriver ni ett högre tal. Om ni vill ha mer genomskinlighet (mindre vitt i mitt fall) så skriver ni ett lägre tal.

Lycka till!

Runda hörn

-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-khtml-border-radius-topleft:10px;
-khtml-border-radius-topright:10px;
-khtml-border-radius-bottomleft:10px;
-khtml-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-khtml-border-radius-topleft:10px;
-khtml-border-radius-topright:10px;
-khtml-border-radius-bottomleft:10px;
-khtml-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

Denna kodbit som ni ser ovan ska ni kopiera in på det som ni vill ska ha runda hörn. Om ni t.ex vill ha en rundad profil/side så sätter ni in den i stilmallen efter #side. I slutet av varje kodrad så står det 10px om ni vill ha en större kurva så ökar ni till ett större tal. t.ex 15px.
Orsaken till att det är så många rader är för att dem olika raderna påverkar olika webläsare. 

Lycka till!

Ny design - Floating Balls



Detta är den nya designen. Då jag fick reda på att det var en del fel på den gamla som jag inte tyckte om och att det dessutom vaar lite för många som trodde jag var naken på headern så beslöt jag mig för att ta bort den helt och hållet. 

Den heter Floating Balls. Bilderna i header och bakgrunden är tagna från we heart it. Min blogg syns som vanligt bäst i Google Chrome!

Ska även slänga upp lite nya själhjälp grejer i blogdesign kategorin då ja lärt mig lite nya grejjor!

Lexikon

Dessa koder funkar i både stilmallen och kodmallen.

 

Mellanslag = &nbsp;

 

Storlek på texten = <font size="1-6">Din text</font>


Allt i samma kod = <font face="typsnittet" color="färgen" size="storleken">Din text</font>


Kursiv stil =  <i>Din text</i>

 

Fet stil = <b>din text</b>


Centrera något = <center>Texten eller bilden</center>


Radbrytning = <br />

Understruken text = <u>Din text</u>

Överstruken text = <strike>Din text</strike>


Lägga in en bild = <img src="adressen till bilden">


Annan färg = <font color="färgen">Din text</font>


Bild som länk = <a href="adressen till sidan" target="_blank"><img src="adressen till bilden" border="0"></a>

Horisontell Dropdown Meny

Det finns flera olika versioner på Dropdownmenyer och den som jag ska ge er är väldigt simpel. Det finns två olika knappar i min. Några är s.k dropdownflikar medans några är en direktlänk.
Så här ser en länk ut när ni lägger in dem i kodmallen:
Där det står adress lägger ni in länkadress och sedan fyller ni i vad det ska stå på länkens namn.

<li><a href="Adress" mce_href="">Länkens namn</a>    </li>

Och Dropdown.det som skiljer dem åt är ju själva "dropdown funktionen" OCH ser ni att det står "ul" efter första raden och ett till nästan likadant efter den sista? Dem är jätteviktiga att ni får med. Så om ni vill lägga till en till länk i dropdown fliken så får ni se till att den ser ut som den på andra raden om den inte ska ligga sist. 

<li><a href="#" mce_href="#">Dropdown namn</a><ul>

<li><a href="Adress" mce_href="/922173/entries/article/new/länk">Länkens namn</a> </li>

<li><a href="Adress" mce_href="/922173/entries/article/new/länk">Länkens namn</a> </li></ul>


För stilmallen:
(börja med att lägga in denna)

För kodmallen:
Notera att dropdown menyn i kodmallen börjar med stycket "<div id="navbar">" och slutar med "<div><br />" dock så kan det hända att ni inte behöver just det slutet. Men det behövs iaf på min blogg.

Ny design! Black&White

Happ! något är nytt? Jorå. Jag fick äntligen foten ur. Dock en grje kvar att göra som är att lägga till lite mer länkar under headern. Bl.a så ska Jonna in i blogg kategorin. Jag tror jag ska göra en för Anime/Manga också... Lika bra eller? Men asså ärligt talat så är jag inte storm förtjust i headern. mår lite illa av den faktiskt..
TExten i headern är tagen från en låt. Pn Puss till den som gissar rätt ;) 2.2 har jag skrivit för att jag är 22. Och btw. man kan inte se något naket av mig så inbilla er inte! jag har stirrat klart på den redan.

I'm on fire! Ny design!

Fast inte till denna bloggen utan till en annan blogg som jag och Melle driver. Förlåt Melle men jag är så trött på allt det vita. Den blev inte så pjåkig ändå ;) Klicka för att komma dit!

Bilderna under headern är tagna från WeHeartIt. En förträfflig sida!

Inget högerklick

Det här är också något som jag tyckte var jobbigt att hitta rätt kod till så därför ger jag er den koden så att ni inte ska behöva gå igenom den jakten ni med.

Kopiera följande och klistra in under head i kodmallen.


På ett ställe i koden som du klistrar in så har jag skrivit "Skriv valfri text här!" och det är alltså där du skriver ditt meddelande som ska dyka upp när någon högerklickar!

Enjoy!

Entrymeta: flytta upp den till under titeln

Entrymeta är det som står under inlägget. Dvs tiden, datum, kommenterar, trackbacks osv. Det som jag ska visa här är hur du flyttar upp det till under titeln. Så att det blir som på bild nedan.



Det man ska göra är att gå in i kodmallen och leta upp stycket som börjar med entrymeta. tryck på Ctrl+F och skriv in etrymeta så hittar du det enkelt.

styckraden ser ut så här: 
<h3>${EntryTitle}</h3>
<div class="entrybody">${EntryBody}</div>
<div class="entrymeta">
${EntryDate} @ ${EntryTime}
<a href="${EntryPermaLink}">Permalink</a>
    <a href="${EntryCategoryLink}">${EntryCategoryName}</a>
    <a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>
 <a href="${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a>


Ta bort allt som står efter entrymeta koden men spara kvar själva <div class="entrymeta">.

Under raden <h3>${EntryTitle}</h3> kopierar du in följande:
<div align="center"><font face="verdana" size="1" color="black"> ${EntryDate} @ ${EntryTime} <a href="${EntryPermaLink}">Permalink</a>
    <a href="${EntryCategoryLink}">${EntryCategoryName}</a>
    <a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>
 <a href="${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a>
</font></div>

Som ni ser är stycket en hel del längre än det stycket du tog bort och det är för att jag lagt till dessa
<div align="center"><font face="verdana" size="1" color="black">.
Om ni vill ändra placering av texten ändrar ni på div align till valfritt, för att ändra färg skriver ni bara i den önskade färgen och för att ändra storlek på text och typsnitt.. ja det är väl ganska logiskt... (den feta texten är det ni kan ändra på!) Lycka till!

Stilmallen och dess sektioner

#header = Detta är "bilden" högst upp på sidan.

#content = är det som håller ihop bloggens inlägg, titlar och dylikt.

#h1 = rubriken som är uppe vid headbilden

#h2 = headbildens underrubrik

#h3 = rubriken för inläggen.

#entrybody = själva inläggen.

#entrymeta = permalink, kommentarer, kategori-länk osv.

#entrymeta a = länkarna för permalink, kommentarer, kategori-länk osv.

#entrymeta a:hover = Detta är även som föregåede punkt men är ansvarig för länken som blir när du håller muspekaren direkt över den.

#side = sidomenyn som du navigerar i.

#navheader = rubrikerna i sidomenyn.

#nav a = länkarna i sidomenyn.

#nav a:hover = precis som vid entrymeta a hover fast för sidomenyn

#a = alla övriga länkar i bloggen

#a:hover = alla länkarna i bloggen när man håller musen över dem.

#.commentheader = Där det står vem som skrivit

#.commenttext = kommentartexten

Annie inspi' Andy & Pinkish



Klicka på den för större version!



Klicka!

Separera inläggen, ta bort strecket

Gå in i kodmallen och ta bort detta stycket:

<hr class seperator />

Den ser ut ungefär så, den innehåller iaf dem orden
...hehe

"Boxar" i menyn

Ja, jag tänkte jag skulle skriva mitt första deisgn inlägg. Som sagt så hade jag problem med min nya design så därför tänkte jag skriva in dem sakerna här så att fler inte får samma problem!

Det är faktiskt skitenkelt bara man har dem RÄTTA koderna.

Börja med att gå in i stilmallen och klistra in det här partiet direkt efter din side:

#box {
width: 200px;   <------ ska vara lika brett som din side
padding:7px 7px 7px 7px; <--- så att texten inte hamnar längs med kanternra
background: #FFFFFF;    <---- färgen på boxen
border: 1px solid #000000; färg på kanten + tjocklek
}

Efter att du gjort det går du in i din kodmall och klistrar in följande där boxen ska börja:

<div id="box">

och där boxen ska sluta klistrar du in:

</div>
<br />

Så här ser det ut i min kodmall:

<div id="box">
   <div>Recent</div>
<ul>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>
</div>
<br />
RSS 2.0