PowerPoint - publicera din presentation

Hör du till de som gillar Power Point?
Skulle du vilja kunna visa dina PP presentationer på din blogg?

Skulle du vilja kunna ladda upp något av följande filformat -
Presentationer: pdf, ppt, pps, pptx, ppsx, pot, potx (Powerpoint); odp (OpenOffice); key, zip (Apple Keynote).
Dokument: pdf, doc, docx, rtf, xls (MSOffice); odt, ods(OpenOffice); Apple iWork Pages.

Så här gör du:

Gå till http://www.slideshare.net/

Antingen registerar du dig så du har koll på dina uppladdningar eller så klickar du helt enkelt på Upload

Välj fil som du vill ladda upp och vänta...
Under tiden kan du fylla i dina uppgifter, om ditt bildspel ska vara offentligt eller privat ( ska du visa det på bloggen är det offentligt) och lite annat.

Det tar en liten stund, men snart får du en kod du kan bädda in i ditt blogginlägg

Markera hela koden - börja från början och håll kvar musen tills koden "stannat", den är lång så det tar tid.

Gå till din blogg och skapa nytt inlägg. Välj HTML-redigeringsläge.
Klistra in koden.

Nu kan du klicka på Skriv och se att den här rutan finns på plats.

Publicera ditt inlägg!

Är rutan för bred för din blogg? Får inte hela bildspelet plats?
Då kan du gå in i koden och ändra lite så det passar bättre!

Kika på koden du fick från Slideshare.
I den finns ett antal width och hight. Det är dem vi ska ändra!

För att passa en Minima-mall är 95% av ursprungsstorleken ganska lagom, alltså ca 404px (width) och 309 px (hight)
För att ändra de här siffrorna behöver du gå in i inlägget igen. Om du har aktiverat Redigera inlägg kan du klicka på den lilla pennan som syns under blogginlägget, annars kan du gå in via Inlägg, Redigera inlägg.

När du ska ändra siffrorna i koden får du gå tillbaka till skolans matte - att räkna procent.
Vi hade en width som var 425px och en hight som var 325px.
Att bara ändra bredden gör att bildspelet blir alldeles för högt och proportionerna ser fel ut, alltså behöver vi ändra både bredd (width) och höjd.

Om din bloggs Main wrapper är 410 px som i Minimamallen måste vi få ner bredden till den siffran - alltså:
410/425= ~ 0.96
Nu är vi lite schyssta och använder lite marginal så 0.96 får bli 0.95, alltså 95% av orginalstorleken.

425 x 0.95 = 403.75
325 x 0.95 = 308.75

Ändra bredden (width) till 404
Ändra höjden (hight) till 309

Hitta alla siffror som säger width och hight och ändra dem. Spara

Nu passar din presentation din bloggs utseende!

Om du istället vill ha bildspelet 90% av storleken får du använda satsen 0.9
Om du istället vill ha bildspelet 110% av storleken får du använda satsen 1.1

Om du har en annan vidd på din Main Wrapper får du anpassa procentsatsen efter det.

Och - har du fortfarande frågor är det på Fixas Forum du kan ställa dem ;-)

NYTT - Bloggers egen designfunktion

Nu händer det saker i Blogger Draft!

Blogger har introducerat ett eget bloggdesign-program, inbyggt i bloggen. Här kan du ändra i princip allt i din blogg, layout med antal kolumner och hur de ska ligga, färger, bakgrunder, menylisten, ja - allt du egentligen behöver.
Dessutom finns ett antal nya mallar som du kan använda som de är eller fixa till i programmet.

Du hittar enkelt till Blogger Draft ( Blogger På Prov) här:  http://draft.blogger.com/
Logga bara in med dina vanliga uppgifter

När du loggat in i Instrumentpanelen, väljer du Layout. Du ska då kunna se Malldesigner till höger om Välj en ny mall.

Nu kommer du till en sida där det ser ut så här:

Här hittar du ett antal flikar att välja mellan, men börja gärna med att välja mall. För att de flesta inställningarna ska var tillgängliga behöver du använda någon av de nya mallarna, tyvärr fungerar endast färgvalet i de gamla standardmallarna. I de nya mallarna som du kan välja här fungerar förstås alla val!

Välj sedan bakgrund, layout och färgsättning etc.

Det finns många bakgrunder att välja på

Välj färgtema till din mall.

Prova gärna att flytta runt markören på färgkartorna för att se effekten direkt i mallen.

Hur vill du att din layout ska se ut? Välj här. Glöm inte sidfot och bredd!

Du kan bestämma färger på text, rubriker, olika bakgrunder etc. Prova dig fram!

Avsluta med att klicka på Använd i blogg. Du kan också förhandsgranska via Visa blogg.

När du har kommit så här långt, designat din blogg och sparat via Använd i blogg kanske du vill gå tillbaka och fixa mer? Jag upptäckte att knappen Malldesigner inte syns om man klickar runt bland flikarna med Inställningar, Nytt inlägg och Layout, men den kommer tillbaka om du går till Instrumentpanelen och där väljer layout för din blogg igen. Det här är säkert något Blogger kommer att fixa innan de släpper design-funktionen till alla.

Ha det skoj!

Visa navbaren vid behov

Vissa designade bloggmallar visar ingen navbar då designern tycker att det är snyggare utan och det kan man ju hålla med om ibland. Kanske vill man inte heller visa navbaren i den egna bloggmallen som man just fixat till så där snyggt?

Men - visst är det praktiskt att ha tillgång till den när man vill redigera mallen eller skriva ett nytt inlägg! Med den här lilla koden kan du visa navbaren genom att hålla musen över den, trots att den normalt är dold. Praktiskt!

Gå till din bloggs kodmall.
Lägg in följande kod precis ovanför Body - så här:

#navbar-iframe {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;
}

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Spara din mall.

Om du däremot redan har en kod (som den nedan) som döljer navbaren byter du ut den mot koden här ovanför, den med den gula bakgrunden.

/*-- hide navbar --*/
#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}

Spara din mall.

Öka eller minska vidden på din blogg

En fråga jag ofta får är hur man gör bloggen bredare eller smalare.

I den här tutorialen utgår jag från Bloggers Minima-mall, om du har en annan mall får du försöka hitta samma eller liknande wrappers. Om du har frågor om just din mall kan du länka till din blogg i kommentarerna så ska jag se om jag kan hitta svaret i din bloggs källkod.

Det är enkelt att fixa själv, du gör så här:



Gå till din bloggs kodmall. Scrolla ner till Header-wrapper.

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
 
Öka  eller minska vidden (width) med så mycket du känner att du vill ha din blogg bredare eller smalare. Kanske 100 eller 200 pixlar?

Gå vidare och öka vidden på Header .description lika mycket.

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

Nästa steg är att öka Outer Wrapperns storlek till samma siffra som Header wrappern.

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Nu behöver du bestämma om du enbart vill öka kolumnen där du skriver dina blogginlägg, alltså Main-wrappern, eller om du vill öka din andra kolumn också.

Du kan inte öka de två kolumnernas storlek med mer sammanlagt än vad du ökade Outer wrappern med. Om du valde 100 pixlar kan du nu öka main och sidebaren med 50+50px (eller med den fördelning du föredrar) men inte mer!

  #main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

 
 #sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


Du kan se hur din blogg ser ut under tiden du testar olika mått, klicka bara på Förhandsgranska.
Om det inte blev som du tänkt dig och du inte vill prova mer klickar du på Rensa redigering. Då ser din blogg ut som den gjorde innan du började ändra i kodmallen.  När du är nöjd klickar du på Spara mall.

Färdiga 3 kolumnsmallar

Jag har ju tidigare skrivit om hur man skapar 3 kolumner i Minima-mallen, men nu tänkte jag att jag kanske skulle fixa lite färdiga mallar också, bara att ladda hem och lägga in på din blogg.
Jag börjar med att fixa Minimamallen, men jag tänkte fylla på med några av bloggers andra mallar här sedan. 

Du laddar upp dem via Layout - Redigera HTML på din blogg.

Vi börjar med Minima, 2 sidebarer till vänster.

 

http://www.4shared.com/file/220361548/6522e05d/minima_3_c_left.html

Minima, en kolumn på vardera sida om mainbaren.

 

http://www.4shared.com/file/220362147/e021fafe/minima_3_c_right_and_left.html

Minima, 2 sidebarer till höger.

 

http://www.4shared.com/file/220361704/b7cbd1c/minima_3_c_right.html 

Ms Moto, en sidebar på vardera sida om mainbaren.

  

 http://www.4shared.com/file/220810212/9d94a035/msmoto_right_and_left.html

Harbour, en sidebar på vardera sida om mainbaren.

 

http://www.4shared.com/file/222448393/ce810651/harbour_3_c_left_and_right.html

Harbourmallen fungerar bra, men jag stötte på ett problem som jag inte löst ännu, jag får återkomma med en uppdatering av mallen då jag fixat det.
I bloggens layoutläge hamnar båda sidebarerna på vänster sida, under varandra, trots att de ligger till höger och vänster om mainbaren i både bloggen och i kodmallen. Det ser ut så här:

 

Du kan dock ändå använda mallen då den trots allt fungerar som den ska.
------------------------------------------------------------------------------

Jag återkommer och fyller på det här inlägget vartefter jag fixat nya bloggmallar. Om du har ett önskemål så skriv gärna en kommentar så kan jag prioritera just den mallen. Dock endast Bloggers mallar!

Säg till om du får problem med bloggmallen du laddat ner!

Skapa sidor i Blogspot!

Alldeles nytt i Blogger är att du nu 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!

För att kunna utnyttja det här just nu behöver du gå över till Blogger På Prov, Bloggers testversion av Blogspot. På så vis får du tillgång till alla nya funktioner innan de släppts ut till alla användare, lite häftigt!

Du byter till På Prov (Blogger Draft) via din Instrumentpanel

 

Gå sedan allra längst ner på sidan och klicka på Funktioner.

  

Gå åter nästan längst ner på sidan och klicka på På prov i Blogger.

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.

Jag upptäckte precis den här möjligheten själv, så jag har inte hunnit titta på hur och om det går att redigera färger och övrigt utseende, men jag får återkomma om det om jag hittar något användbart.

Hittills har jag konstaterat att Sidor inte fungerar som tänkt i min Fixa-mall då den är uppbyggd lite annorlunda än bloggers vanliga mallar, men i Minima-mallen fungerade det perfekt.
Om du har en designad mall kan det vara värt att testa ändå, det går ju lätt att plocka bort sid-gadgeten om det inte blir som du tänkt.



Efter att ha fått en fråga på Forumet.
När du har lagt in Blogger På Prov (Draft) ligger det kvar sen, men det påverkar inte din bloggs funktion eller annat utseende. Din blogg funkar precis som vanligt, förutom att du kommer att kunna se ny funktioner före de som har vanliga Blogger. Så, inget förändras!

Starta med en extra stor versal

Vill du starta dina blogginlägg med en extra stor versal?

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> 



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.

Skapa din egen bloggdesign med Artisteer

I dag tänkte jag göra lite reklam för ett riktigt smart webdesignprogram som heter Artisteer.

Med det här programmet kan du på enklast möjliga sätt göra din egen bloggmall, välja bakgrund, header, ikoner i rubriker, fonter, färger, byta rubrikbakgrunder och dessutom välja din egen layout  med antal sidebarer, var de ska ligga och hur breda de ska vara. Allt med enkla knapptryckningar och inte minsta kodning.

Och bäst av allt - du laddar upp din mall direkt till din blogg via programmet - det tar till och med en backup på din gamla mall! Alla bilder som bloggen byggs upp av hamnar i ditt Picasaalbum, på samma plats där alla andra dina bilder finns som du laddat upp i dina blogginlägg.

Artisteer använder en så kallad WYSIWYG-redigerare, det betyder What You See Is What You Get och innebär att du direkt ser varje liten förändring du gör i mallen direkt i programmet. Så fort du håller musen över en knapp testas det alternativet och du ser hur det ser ut. Flytta musen till en annan bild och du ser den istället - praktiskt, eller hur!

Så, kanske är du nyfiken på hur det kan se ut när man använder Artisteer?
Kika här, jag har tagit lite skärmklipp för att visa dig lite vad som finns, men det finns en otrolig mängd alternativ jag helt enkelt inte har plats att visa upp, du får prova själv!

En gratis demo finns att ladda ner på Artisteers hemsida, se länk i sidebaren.

 

Här finns en mängd alternativ till bakgrunder, men du kan alltid ladda upp egna bilder/filer.
Det gäller i princip överallt där Artisteer använder bilder, du kan alltid välja egna.

Välj vilken layout du vill ha och bredd på de olika kolumnerna

 

Du kan skugga din sida (outer wrappern) eller välja rundade hörn högst upp.

 

Välj mellan en rad olika alternativ för dina blogginlägg och deras rubriker

Varför inte välja en snygg ikon brevid rubriken?

Samma val finns för blocken, alltså dina gadgetar

Välj hur dina inlägg och block ska se ut, med eller utan bakgrund,

inringad rubrik eller kanske helt utan?

Om du vill ha en länkmeny väljer du hur den ska se ut och vart den ska ligga-ovanför headern eller under. Bestäm hur knapparna ska se ut och om de ska ligga till vänster, höger eller i mitten.

Vill du ha läckra blanka knappar eller mer diskreta? Med kantlinje eller kanske mönstrade?

Designa klart hela din mall, glöm inte footern och vilken färg dina länkar ska ha ;-)

Det och allt annat du vill sätta din egen prägel på!

Du kan också skriva dit din egen copyright-text.

När du är färdig klickar du på publicera till blogger. Då får du fram en ruta

där du kan fylla i dina inloggningsuppgifter och får välja vilken blogg som

ska få äran av din nya, snygga mall.

Bilderna i mallen laddas upp på ditt Picasakonto.

Nu är din din nya mall på plats.

Glöm inte att spara arbetskopian också, kanske ser du saker du vill gå tillbaka

och ändra, då är det bra att bara kunna öppna din mall igen och fixa det du vill.

Publicera sedan din mall på nytt.

Tänk vad mycket smart de kommer på!

Om du skapar en bloggmall med Artisteer vore det jättekul om du länkar till din blogg här i inlägget så att vi får se vad du skapat! Jag är jättenyfiken!

Skapa en egen menylista med bilder

Vill du skapa en egen menylista under din header, knappar som leder till olika sidor eller etiketter etc om du klickar på dem?

När jag ska designa något nytt till min blogg börjar jag med att öppna photoshop. Sen går jag till min blogg och tar ett screenshot av den. På så vis kan jag öppna en bild med min blogg i mitt bildhanteringsprogram och arbeta i lager ovanpå den. Då ser jag direkt om knapparna får rätt storlek och hur de passar.

Här är mitt screenshot med ett lager med knapparna jag vill ha ovanpå.

Med den här koden kommer inte någon text att synas igenom dina bilder så skriv den text du vill ha direkt på dina knappar!

Eftersom jag har lagt till skuggor väljer jag att spara mina bilder i png.format, men om du inte har någon transparant del i din bild väljer du kanske hellre jpeg.

Spara varje knapp för sig.

Ladda upp dina bilder på Photobucket eller liknande sida.

Nu är det dags att öppna din bloggs kodmall.

Du ska klistra in följande kod:

a.navigation {
display:inline;
padding: 5px 5px 5px 5px;
/* paddingsiffrorna styr: uppåt - höger - nedåt - vänster*/
border-width: 0;
}

och du kan göra det precis ovanför   ]]></b:skin>

Tryck på Ctrl och F på ditt tangentbord så kommer det fram en sökruta. Fyll i ]]></b:skin> som här ovan och tryck på enter. Då kommer du till rätt plats i din bloggmall utan att behöva leta dig fram.

Som  du ser har jag lagt in en liten rad som förklarar vilken av paddingsiffrorna som flyttar bilderna åt vilket håll. Med de här siffrorna kan du separera knapparna mer eller flytta ihop dem, likaså öka avståndet till headern uppåt och din main och sidebar nedåt. Testa så får du se vad som händer.

Nu går du vidare till din bloggs layoutläge och öppnar en gadget under din header. Välj HTML/Javascript. Fyll i följande kod i rutan:

<p align="center">

<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a>
<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a>

<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a>
<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a></p>

 Den här koden ger dig fyra länkar och den lägger sig mitt under headern. Om du vill flytta länkarna så att de blir vänstercentrerade skriver du left istället för center och för högercentrering skriver du right.

Hämta dina bilders direktlänkar från Photobucket och klistra in dem där det står bildadress i den ordning du vill ha knapparna. Byt ut webadress mot den sidas webadress du vill länka till.

Ett tips är att länka till en viss etikett på din blogg, kanske foton eller djur/barn - vilka etiketter du nu har. Då gör du det lätt för din besökare att hitta inlägg som intresserar dem.

Spara din gadget när du är klar.

Du kan alltid lägga till fler rader med adresser och bildlänkar om du vill. Var i så fall noga med att behålla <p align="center"> i början på koden och </p> i slutet. Det är med det här du kan styra åt vilket håll dina etiketter ska ligga åt. 

En ny rad med länkar ser alltså ut så här:

<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a>