DESIGNA DIN BLOGG

På den här sidan kommer jag lägga upp alla tips jag hittar om att designa blogger så den blir mer personlig.

FOTOFLEXER - REDIGERA BILDER PÅ NÄTET

Med fotoflexer kan du leka med dina foton och sedan använda dom i din blogg. Sidan rekommenderas varmt!

FOTOFLEXER

SKAPA SIDOR I BLOGGER

Du kan inte bara kan skriva rullande inlägg (nyaste inlägget överst) utan du kan också skapa dina egna sidor. Fasta sidor som du kan länka till via en menylist under headern eller i en länklista i din sidebar. Blogspot tar ett steg närmre Wordpress med andra ord!

Nu ska du ha en rad högst upp i din instrumentpanel med en kryssruta som ser ut så här - dessutom ser headern på sidan i instrumentpanelen lite annorlunda ut.

Nu har du Blogger på prov.

För att lägga till sidor i din blogg går du nu till Inlägg och Redigera sidor. Här kan du skapa ny sidor, upp till 10 stycken. Du skriver och redigerar dem i bloggers vanliga inläggsruta, precis som när du bloggar.

Efteråt får du första gången du sparar välja hur du vill visa dina sidlänkar. Du kan välja att visa dem i en menylista under din header eller i en länklista i en vanlig gadget i din sidebar.

Eller - om du redan har en menylista du vill använda väljer du Ingen gadget. Då kan du själv lägga in sidolänken i din menylista där du har dina andra länkar.
Hur du gör en egen menylista skrev jag om här

Nu har du skapat din första sida. Nästa gång behöver du inte välja vart du ska spara din sida, den hamnar automatiskt brevid den första länken.

Här nedan har jag valt att lägga min länklista under headern, gadgeten heter Sidor. Om du ångrar dig om vart du vill ha din länklista drar du bara din gadget till rätt plats, ner till sidebaren eller vart du vill ha den, den anpassar sig automatiskt.

Om du öppnar din Sidor-gadget hittar du ett antal val, vad länklistan ska heta och i vilken ordning du vill ha dina länkar.

****************************************************************

OLIKA BAKGRUNDER PÅ SIDORNA

Se hur det här fungerar genom att titta på mina olika sidor och se hur de har olika bakgrunder! 

Redo att prova det själv? Först behöver du sidor på din blogg. Här är några länkar:

Shabby Blogs
The Cutest Blog on the Block
Allie Brown’s Layouts
My Style Backgrounds

Eller så kan du göra din egen personliga bakgrund med min verktyget här ! :)

Från din Blogger kgn och sedan Redigera HTML . Titta i den kodrutan och bläddra ner tills du ser </ head>

(Tips: Klicka på Ctrl-F för att söka efter </ head> för att enkelt hitta det.)

Just ovan att kopiera och klistra in den här:

<B: if cond = 'data: blog.url == " http://YOURBLOG.blogspot.com/p/PAGE.html "">
<style>
body {
Bakgrunden-image: url ( http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG ); background-position: center; background-repeat: repeat; background-attachment: fast;
}
</ Style>
</ B: if>

Två saker att ändra:

1. http://YOURBLOG.blogspot.com/p/PAGE.html

Ändra detta till sidans länk - länken till din nya blogg sida där du vill att anpassade bakgrunden ska visas. Detta är adressen uppe i toppen av skärmen i adressfältet.

2. http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG

Ändra detta till länken till din bakgrundsbild . Om du använder Photobucket som värd din bakgrund, det är den direkta länken.

Klicka på Spara mall och det är det! Du är klar!

Obs: Som alltid vara försiktig, ett litet litet fel kan orsaka det hela inte att fungera, så om det inte fungerar för dig, dubbel och trippel kolla ditt arbete för stavfel! :) Se till att din kod ser exakt ut som min, förutom med din sida och länkar bakgrund!


Jag har inte prövat detta själv, så jag hoppas att det fungerar.




***************************************************************

ATT INLEDA MED STOR BOKSTAV I INLÄGG

Att första bokstaven är stor ser ganska coolt ut.

det har varit svårt att hitta rätt kod och få det att fungera,

men nu gör funkar det fint.

Här är en enkel kod som du kan lägga in i din bloggs inläggsformatering så att den finns där varje gång du skriver ett nytt inlägg.

Så här gör du:
Gå till din bloggs Inställningar, Formatering.

Längst ner på sidan finns en ruta som heter Mall för inlägg. I den rutan lägger du in följande kod:

<span style="float:left;color: #000;background:#fff;line-height:80px; padding-:1px 5px 0 0; font-family:times; font-size:100px;">Första bokstaven</span>och forstättning

I den här koden kan du byta färg på din bokstav och lite annat

Bokstavsfärg:     color: #000;
Bakgrund:           background: #fff;  (radera fff om du vill ha genomskinlig bakgrund)
Font:                    font-family: Times;
Bokstavsstorlek:  font-size: 100px

Spara din inställning men byt inte ut Första bokstaven ännu.

Gå sen till Nytt inlägg och klicka på Redigera HTML

Nu finns din kod där i rutan. Fyll i din första bokstav och skriv resten av ditt inlägg direkt efter koden. Du kan förstås byta till Skriv-läget så fort du fyllt i din bokstav. 

Om du vill redigera utseendet på bokstaven kan du göra det direkt här i inlägget också, välj bara Redigera HTML igen.

Spara ditt inlägg som vanligt. Nu börjar ditt inlägg med en stor, snygg bokstav.

Om du bara vill testa i ett enda inlägg lägger du in koden direkt i ditt inlägg, i Redigera HTML-läget.

****************************************************************

BYT FONT I RUBRIKEN

Byt font på rubriken i bloggen. Det är inte så svårt och piffar verkligen upp bloggen.

Längre ner kommer en fullständig beskrivning av hur det går till. Att liva upp bloggen

gör att den blir roligare att besöka, men ta det lungt, inte för mycket...

Skulle du vilja kunna använda ett nytt, mer personligt teckensnitt på dina rubriker i din blogg?

Det största problemet man stöter på när man ska göra bloggens text och rubriker snygga är att man är beroende av vilka teckensnitt bloggens besökare har installerade på sin egen dator.
Om vi använder ett för datorn okänt typsnitt väljer den att visa det typsnitt den känner igen.
Det är därför vi har flera teckensnitt uppradade i kodmallen - så här:

<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

När vi kodar en bloggmall lägger vi in ett flertal vanliga teckensnitt i mallen för att varje besökares dator ska ha möjlighet att hitta en font den känner igen och kan visa. Om den inte känner igen det första väljer den det andra, om inte det så det tredje...
Lite trist, eller hur!


Även om vi hittar ett riktigt snyggt teckensnitt och skriver in det i kodmallen kommer antagligen de flesta av våra besökare aldrig att kunna se det.

Men - efter lite sökande på nätet har jag hittat en bra sida som faktiskt har en lösning.

Det här är inte en lätt tutorial, antagligen inget för nybörjaren om man inte har gott om tålamod, men lägger man ner lite tid och energi kan man få en riktigt snygg och personlig blogg.

Jag har valt att inte översätta den här tutorialen och lägga den direkt här på fixa-bloggen eftersom de koder som behövs är skrivna av websidans ägare och jag vill inte ta åt mig äran för dem. Du hittar allt du behöver här:

www.kevinandamanda How to use a cute font for your bloggtitle

Kevinandamanda - FontsForPeas

Kevinandamanda - Scrapbookfonts

Undrar du hur du ska göra för att installera nya teckensnitt på din dator?

Gör så här!

Börja med att ladda hem de teckensnitt/fonter du vill ha. Se till att de sparas i en mapp där du kan hitta dem när du valt färdigt.

Öppna din mapp med teckensnitt.

Du hittar då filer som ser ut som en hög med böcker, zippade filer. Det används när man vill skicka flera filer ihop, som i ett litet paket.

Högerklicka på filen och välj Packa upp här.

Har du inte det valet på din meny? Då behöver du ladda hem ett program som hjälper dig att öppna filerna, t.ex. winrar. Det hittar du bland annat här, eller googla på Winrar.

Det här är ett mycket användbart litet program, så jag rekommenderar att du har det på din dator, du kommer säkert att behöva det igen.

När filen är uppackad är det dags att högerklicka på den igen.

Välj Installera. Om du har många filer med teckensnitt kan du markera dem alla och installera dem samtidigt.

Nu finns dina nya teckensnitt att använda i alla de program på datorn som låter dig välja hur din text ska se ut. Bildhanteringsprogram, Word etc.


****************************************************************

ATT LÄGGA IN REKLAM I ENSKILDA INLÄGG

Att lägga in reklam på bloggen är vanligt. Det kan vara givande att lägga in reklam i enskilda inlägg också. Det är inte speciellt svårt. Saken är den, att om du verkligen vill få klick och leads, så är det bästa sättet att skriva ett inlägg om själva produkten/företaget och förklara vad det är som är så bra med det hela, och varför man skall klicka eller bli medlem. Ljug inte utan var ärlig.

För att lägga in reklam i ett enskilt inlägg, så skall du göra på följande sätt.

1. Börja med att skriva ett vanligt inlägg.

2. När du nu ska lägga in själva reklamsnutten, så klickar du på HTML.

3. Lägg nu in koden för själva reklamen i rutan som kommer upp. På lämpligt ställe i din text.

     Klicka sedan på uppdatera.

4. Nu har du fått in din reklam i inlägget. Om reklamen är gjord i flash, kommer du bara se en

     ruta, innehållet ser du först när du kollar på din blogg.

Klicka på spara och publicera, så har du nu skapat ett inlägg med reklam i.

Så sätt igång och gör reklam på ett smakfullt och smart sätt!

Lycka till!

************************************************************************

MENYBAR MED DROPDOWN FUNKTION

Meny menyer med drop down-effekt och här är en variant.
Varje överliggande länk har fyra underlänkar, vilka man förstås kan radera eller öka på med likadana länkar.

Du lägger koden i en html-gadget under din header.

Först ut i koden hittar du css-delen som styr menybarens utseende

Här kan du ställa in vidd, färg, storlek på font och liknande.

Tänk på att color betyder textfärg och background color är rutornas färg.

Bredden är anpassad efter en vanlig grundläggande Minima-mall som är 660px bred. Har du en annan bredd får du anpassa både vidden (width) på .menu och på knapparna i menu ul li a, .menu ul li a:visited för att anpassa dem så de får en lagom, snygg bredd.
Samma sak gäller om du väljer att ha fler eller färre än de 6 förberedda länkarna.

Om du vill ha din menybar vänsterställd plockar du bort raden som säger "margin: 0 auto;"


Ordet Height som står efter det första Width styr hur mycket plats som din menybar ska ta upp höjdmässigt. Minska om du vill att dina blogginlägg och sidebaren ska komma högre upp:


.menu {
font-family: arial, sans-serif;
width: 660px;
height:100px;
}


Nästa del är själva länkdelen, html-länkarna.
Varje överlänk med underlänkar ser ut så här:

<li><a class="hide" href="http://adress">LÄNK1</a>  där skriver du namnet



<!--[if lte IE 6]>

<a href="http://adress">LÄNK1

<table><tr><td>

<![endif]-->



 <ul>

 <li><a href="http://adress">UNDERLÄNK1</a></li> webbadress  namnet på länken

 <li><a href="http://adress">UNDERLÄNK2</a></li>

 <li><a href="http://adress">UNDERLÄNK3</a></li>

 <li><a href="http://adress">UNDERLÄNK4</a></li>



 </ul>



<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->



</li>

Varje överlänk finns med två gånger eftersom koden är anpassad även efter Internet Explorer 6 som inte riktigt klarar av att läsa vanlig kod. På så sätt kan även de som fortfarande använder IE 6 se din menybar.

Fyll i webadress och rubrik för varje länk. Radera de underlänkar du inte använder.

Här följer hela skriptet. Kopiera och lägg in enligt anvisningarna. Sedan ändrar du namn och adress.

<style>

/* common styling */

.menu {font-family: arial, sans-serif; width:660px; height:100px; position:relative; margin: 0 auto; font-size:13px; z-index:100;}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:108px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}

.menu ul {padding:0; margin:0; list-style: none;}

.menu ul li {float:left; position:relative;}

.menu ul li ul {display: none;}



/* specific to non IE browsers */

.menu ul li:hover a {color:#fff; background:#36f;}

.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}

.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}

.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}

.menu ul li:hover ul li a:hover {background:#710069; color:#fff;}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

.menu ul li:hover ul li:hover ul.left {left:-105px;}

</style>



<div class="menu">



<ul>

<li><a class="hide" href="http://adress">LÄNK1</a>



<!--[if lte IE 6]>

<a href="http://adress">LÄNK1

<table><tr><td>

<![endif]-->



	<ul>

	<li><a href="http://adress">UNDERLÄNK1</a></li>

	<li><a href="http://adress">UNDERLÄNK2</a></li>

	<li><a href="http://adress">UNDERLÄNK3</a></li>

	<li><a href="http://adress">UNDERLÄNK4</a></li>



	</ul>



<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->



</li>



<li><a class="hide" href="http://adress">LÄNK2</a>



<!--[if lte IE 6]>

<a href="http://adress">LÄNK2

<table><tr><td>

<![endif]-->



	<ul>

	<li><a href="http://adress">UNDERLÄNK1</a></li>

	<li><a href="http://adress">UNDERLÄNK2</a></li>

	<li><a href="http://adress">UNDERLÄNK3</a></li>

	<li><a href="http://adress">UNDERLÄNK4</a></li>

	</ul>



<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->



</li>



<li><a class="hide" href="http://adress">LÄNK3</a>



<!--[if lte IE 6]>

<a href="http://adress">LÄNK3

<table><tr><td>

<![endif]-->



	<ul>

	<li><a href="http://adress">UNDERLÄNK1</a></li>

	<li><a href="http://adress">UNDERLÄNK2</a></li>

	<li><a href="http://adress">UNDERLÄNK3</a></li>

	<li><a href="http://adress">UNDERLÄNK4</a></li>

	</ul>



<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->



</li>



<li><a class="hide" href="http://adress">LÄNK4</a>



<!--[if lte IE 6]>

<a href="http://adress">LÄNK4

<table><tr><td>

<![endif]-->



	<ul>

	<li><a href="http://adress">UNDERLÄNK1</a></li>

	<li><a href="http://adress">UNDERLÄNK2</a></li>

	<li><a href="http://adress">UNDERLÄNK3</a></li>

	<li><a href="http://adress">UNDERLÄNK4</a></li>

	</ul>



<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->



</li>



<li><a class="hide" href="http://adress">LÄNK5</a>



<!--[if lte IE 6]>

<a href="http://adress">LÄNK5

<table><tr><td>

<![endif]-->



	<ul>

	<li><a href="http://adress">UNDERLÄNK1</a></li>

	<li><a href="http://adress">UNDERLÄNK2</a></li>

	<li><a href="http://adress">UNDERLÄNK3</a></li>

	<li><a href="http://adress">UNDERLÄNK4</a></li>

	</ul>



<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->



</li>



<li><a class="hide" href="http://adress">LÄNK6</a>



<!--[if lte IE 6]>

<a href="http://adress">LÄNK6

<table><tr><td>

<![endif]-->



	<ul>

	<li><a href="http://adress">UNDERLÄNK1</a></li>

	<li><a href="http://adress">UNDERLÄNK2</a></li>

	<li><a href="http://adress">UNDERLÄNK3</a></li>

        <li><a href="http://adress">UNDERLÄNK4</a></li>

	</ul>



<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->



</li>

</ul>

</div>

******************************************************************