För att se hur ett flöde kan se ut, kan du kika här: RSS-flöde i en box

Det finns ett gäng olika sätt att presentera ditt rssflöde på, och om du blir premium-medlem på den sidan så finns det mer alternativ du kan använda.

Men, hursomhelst, så här gör du:

1. Gå in på www.rssinclude.com och börja med att registrera ett konto.

2. Du kommer att få ett mail med en aktiveringslänk och sen så ska du välja ett lösenord. När du gjort det, så klickar du på Create a new rssbox

3. Välj vilken typ av layout du vill ha på din box.

4. Klistra in adressen till rss-flödet som du vill presentera. Sen kan du se hur flödet kommer att se ut till höger.

5. Klicka på fliken  Content and styling options och ändra utseendet på din box. När du har ändrat klart, klicka på Save & Preview. Ser den ut som du hade tänkt dig, klicka på fliken Include.

6. Kopiera nu koden som du får upp i rutan.

7. Nu ska du lägga in koden på din blogg/hemsida, och det är helt och hållet upp till dig själv att lägga i den där du vill.

Om du har problem, så kan du alltid fråga här, eller på forumet så kanske du får lite hjälp.

http://www.colorzilla.com/gradient-editor/

Där behöver du bara välja vilka färger som ska ingå.

Först så väljer du färger:

Men även om du inte vill ha exakt dom färgerna så kan du dubbelklicka på en av de ”pilar” som är där och sedan kommer det upp en ”färgpanel” där ni kan välja mer exakta färger.

I rutan ”Preview” (bilden ovanför)  kan ni välja åt vilket håll färgen ska skifta. Klicka på dropdown boxen som heter ”Orientation”. Där kan ni välja mellan ”Vertical”, ”Horizontal”, ”Diagonal” (neråt åt vänster eller höger) eller ”Radial” (cirkel).

När ni sen har skapat den gradient som ni vill ha så kopierar ni in koden i din css för det elementet du vill ha färgat.

Ett exempel på vart ni ska kopiera in koden:

body {
background: rgb(38,128,239); /* Old browsers */
background: -moz-linear-gradient(top, rgba(38,128,239,1) 0%, rgba(79,172,255,1) 67%, rgba(168,214,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(38,128,239,1)), color-stop(67%,rgba(79,172,255,1)), color-stop(100%,rgba(168,214,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(38,128,239,1) 0%,rgba(79,172,255,1) 67%,rgba(168,214,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(38,128,239,1) 0%,rgba(79,172,255,1) 67%,rgba(168,214,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(38,128,239,1) 0%,rgba(79,172,255,1) 67%,rgba(168,214,255,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(38,128,239,1) 0%,rgba(79,172,255,1) 67%,rgba(168,214,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2680ef', endColorstr='#a8d6ff',GradientType=0 ); /* IE6-9 */
font-family:"Gill Sans Ultra Bold Condensed";
}

I exemplet ovan så kommer den gradient jag har valt att synas som bakgrund för hela sidan. Alltså ”body”. Men ni kan också välja enstaka element som till exempel ”content”, ”side”, etc.

Sidan finns på www.designadinblogg.se/gratisdesign

Dagligen så laddas det ner över 400 designer därifrån och det är i snitt över 1000 unika besökare och nästan 10 000 sidvisningar, dvs det är ett utmärkt sätt att göra reklam för sig själv och få fler att upptäcka just dina designer.

Det finns för närvarande över 100 designer till blogg.se men siktet är på minst det dubbla, så om du har en gratisdesign av kvalitet som du vill dela med dig av, skicka då in den via uppladdningssidan: http://www.designadinblogg.se/gratisdesign/?page_id=2

Om det är så att du har skickat in en design som inte har blivit publicerad, så beror det på att jag anser att det är felaktigheter i koderna, eller att designen helt enkelt inte håller måttet. Vi är ute efter att ha designer av hög kvalitet, både kodmässigt och utseendemässigt.

http://apps.facebook.com/bloglovin/

Säg gärna vad ni tycker. All feedback är bra. Kommentera eran åsikt.

Håll ögonen öppna för en liten överraskning som (kan hända) kommer snart. Vad det är får ni se när det kommer fram här på www.designadinblogg.se.

Ha en trevlig helg för övrigt alla!

Idag såg jag att Blogg Esse har lagt in en ny bilduppladdare som möjliggör för dig som bloggare att skapa bildgallerier i dina inlägg på ett enkelt sätt.

Då har du möjlighet att skapa polaroidfoton, galleri eller lägga upp bilder på en lång rad.

Om du vill se exempel på hur det kan se ut kan du kika här: http://galleridemo.blogg.se/

Jag diggar polaroid-funktionen själv som kan se ut så här:

Så här gör du för att använda den:

1. Välj att skriva ett nytt inlägg.

2. Klicka på den nya ikonen som har kommit upp i snabbmenyn

3. Nu får du upp ett nytt fönster, välj att ladda upp dina nya bilder, eller om du redan har dem uppladdade på din blogg så väljer du Arkiv.

4. När du har valt dina bilder, så laddas de upp med automatik. När de laddat klart kan du lägga till en bildtext till varje bild. När du gjort det, så skall du klicka på den gröna knapp som knappt syns (antar att det är en bugg), den gömmer sig där jag lagt in en pil.

5. Nu ska du välja hur du vill att dina bilder skall visas i ditt inlägg. Du väljer genom att klicka på fliken anpassa och sen kan du välja mellan de tre olika varianter som finns. Under varje variant finns det lite inställningar du kan göra, t ex bakgrundsfärg med mera. Välj de inställningar du vill ha, och klicka sen på knappen nere till höger, Infoga i inlägget

6. Sen är det bara att fortsätta skriva ditt inlägg och publicera det. Smidigt som bara den!

Här är i alla fall länken till Youtube-klippet:

http://youtu.be/3AUTfe-iDIg

CSS koden:

#panel {
 background: #f3f3f3;
 height:auto;
 display: none;
 border:2px solid #000;
 border-top:none;
 border-bottom-right-radius:10px;
 border-bottom-left-radius:10px;
 -moz-border-bottom-right-radius:10px;
 -moz-border-bottom-left-radius:10px;
 -webkit-border-bottom-right-radius:10px;
 -webkit-border-bottom-left-radius:10px;
 text-align:center;
}
.slide {
 margin: 0;
 padding: 0;
 border:2px solid #000;
 background:#f3f3f3;
 box-shadow:0px 0px 10px #000;
 text-align:center;
 height:30px;
 border-top-right-radius:10px;
 border-top-left-radius:10px;
 -moz-border-top-right-radius:10px;
 -moz-border-top-left-radius:10px;
 -webkit-border-top-right-radius:10px;
 -webkit-border-top-left-radius:10px;
 font-weight:900;
}
.slide a:link, .slide a:visited {
 text-decoration:none;
 cursor:default;
}

Javascript koden:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
 $("#panel").slideToggle(1000); //Hur fort det ska gå
 $(this).toggleClass("active"); return false;
 });
});
</script>

HTML koden:

<p class="slide"><a href="#" class="btn-slide">Klicka här!</a></p>
<div id="panel">

HTML koden ska in precis ovanför <div class=”nav”>

Sista diven:

</div>

Den sista div’en ska in ovanför <img src=”http://stats.blogg.se/?id=${BlogID}” border=”0″ width=”0″ height=”0″ alt=”" />

Demo: http://ddbstrangerz.blogg.se/

Hoppas ni förstår! Lycka till!

http://www.youtube.com/watch?v=GOdz7q5C6zc

I klippet ser ni hur jag gör för att lägga in koden och vart jag lägger in den. I videon så ser ni också vad ni kan ändra på för att få till den färg ni vill ha. Den först som jag ändrar färgen till ”yellow” på – är färgen för själv texten. Den andra, där jag skriver in ”black”, är färgen för skuggan som syns lite snabbt innan den går över till sin färg.

Här är koden som ni ska lägga in INNAN </body>

<script src="http://nakajima.github.com/jquery-glow/src/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://nakajima.github.com/jquery-glow/src/jquery.color.js" type="text/javascript"></script>
<script src="http://nakajima.github.com/jquery-glow/src/jquery-glowing.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
 $('a').addGlow({ textColor: 'green', haloColor: '#0f0', radius: 100 });
 $('*').bind('glow:started', console.info);
 $('*').bind('glow:canceled', console.info);
 });
 </script>

Lycka till och hoppas att det hjälpte!

Skriv gärna i kommentarerna om vad NI vill lära er!

På återseende!

Videoinstruktion

Uppdaterat: Videoinstruktion finns till höger

Något som kan vara lite skoj att lägga in är en header som ändras konstant.

Jag har letat upp ett script som inte använder sig av någon fräck övergång, men som iaf byter bild på headern och om man dessutom vill, så kan man skriva en liten information under bilden och även länka till den. Det öppnar upp för att använda den som en funktion där man väljer att göra reklam för vissa speciella inlägg eller så.

Om ni vill se ett enkelt exempel, så kan ni kika här: Header slideshow

Det är ganska så enkelt att göra detta, och det är bara er egen fantasi som sätter stopp för hur ni ska använda det.

Gör så här:

1. Ladda upp alla bilder som du vill använda, se till att de har samma storlek. Spara adressen till varje bild så att du kan använda det sen.

2. Kopiera följande kod:

<script language="JavaScript1.2">
/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var variableslide=new Array()
//variableslide[x]=["adress till bilden", "länk till en sida (valfritt)", "text till bilden, valfritt (går att skriva HTML-kod)"]
variableslide[0]=['bild1.gif', '', '']
variableslide[1]=['bild2.gif', 'http://www.designadinblogg.se', 'Här kan du skriva en text om du vill']
variableslide[2]=['bild3', '', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='130px' //skriv i bredden på dina bilder här!
var slideheight='120px' //skriv i höjden på dina bilder här, inklusive eventuell text du tänkt använda!
var slidebgcolor='#F3F3F3'
//här ställer du in fördröjningen mellan varje bild (i millisekunder)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

3. Gå in i dina kodmallar, och leta upp

<div id=”header”>
<h1><a href=”${BlogUrl}”>${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

4. Ta bort allt mellan <div id=”header”> och </div> och klistra in koden mellan dessa två.

5. Nu ska du lägga in adressen till bilderna, och det gör du där det står på följande vis:

variableslide[0]=['bild1.gif', '', '']
variableslide[1]=['bild2.gif', 'http://www.designadinblogg.se', 'Här kan du skriva en text om du vill']
variableslide[2]=['bild3', '', '']

Du byter ut bild1.gif, bild2.gif osv till de adresser som dina egna bilder har där du har laddat upp dem.
Om du vill ha fler än 3 bilder så kan du lägga till fler rader, se bara till att du följer sifferkoden med, så att du fortsätter på vaiableslide[3], variableslide[4] osv…

Om du vill lägga till en text under bilden, så skriver du den mellan de två sista ”snuttarna”, på variableslide[1]=[‘bild2.gif’, ‘ht… ser du var du lägger in texten.

6. Nästa steg är att ställa in bredden du har på dina bilder, och det gör du i följande kod:

var slidewidth=’130px’ //skriv i bredden på dina bilder här!
var slideheight=’120px’ //skriv i höjden på dina bilder här, inklusive eventuell text du tänkt använda!

Leta upp den koden och ändra värdena till de som stämmer med dina egna bilder. Om du väljer att ha en text, så skall det räknas in med. Men det är bara att testa dig fram lite med det.

Leta upp nedanstående kod för att ändra bakgrunden på din slider, används mest om du har text under varje bild.

var slidebgcolor=’#F3F3F3′

Nästa sak som du kan ställa in är hur lång tid det ska ta innan bilden byts ut, och det gör du i följande kodrad:

var slidedelay=3000

Värdet är i millisekunder, dvs 3000 är samma som 3 sekunder.

Nu är det bara att spara, och göra likadant på dina andra kodmallar.