Skapa en undersökning på din blogg
0 kommentarer / 
Kommentera här!
Skapa en undersökning på din blogg, hitta en sida som man lätt kan skriva in, ändra hur själva rutan ska se, ändra färg på text och bakgrund. När du är klar kopierar du koden du får som passar till just din sida.
Klistra in koden i kodmallen i menyn där du vill ha den.
www.acepolls.com
Skapa en rund kant längst ner i menyn
Gjorde en kort film hur man skapar en rund kant endast längst ner i menyn, detta funkar om man har en enfärgad bakgrund.
När man skapat själva bilden laddar man upp den på sin blogg och kopierar länken till bilden och lägger in i kodmallen, bläddra ner till side och lägg in koden längst ner i menyn.
<img src="LÄNK FRÅN BILD">
Dela upp menyn i boxar med runda hörn
Nu ska jag visa hur man lätt kan ändra menyn så den ser ut så här, se bild nedan:
Det är mycket lätt, enda man behöver är photoshop, (detta funkar om man har en enfärgad bakgrund)
Istället för att skriva och förklara hur man gör, har jag gjort ett videoinlägg där jag visar steg för steg.
I slutet av videon går det lite snabbt, men man gör precis som innan i videon och klistrar in länken från bilden i kodmallen, exempel efter arkiv.
Viktigt också att man ändrar padding i stilmallen på #side {
Ändra till 0px; eller ta bort padding helt.
Kort beskrivning:
1. Print screena din blogg och lägg in i photoshop, finns en knapp på datorn, (prt sc)
2. Beskär sedan ut en bit av menyn, lika bred, viktigt man inte zomar in eller ut när man gör detta.
3. Gör hela bakgrunden enfärgad, samma som din bloggs bakgrund
4. Gör sedan själva bilden, gör en vit "båge" och beskär ut och spara.
5. Ladda upp på din blogg och klistra in i kodmallen där du vill ha den, exempel över Arkiv
6. Gör nu en till bild detta ser man i videoinlägget hur man gör, bara att "vända på den" och spara.
7. Gör samma sak och ladda upp och lägg in den, exempel under Arkiv
Glöm inte att lägga till "> i slutet och <img src=" i början exempel: <img src="LÄNK FRÅN BILD">
Har ni frågor är det bara att skriva.
Designauktion!
HÖGST BUD JUST NU 400KR Hanna
En rosa design som passar blogg.se & webblogg.se
- Bilderna i headern får man behålla som det är eller så kan jag lägga in sina egna.
- Jag hjälper till att lägga in alla koder, antingen skicka koderna eller går in på bloggen och lägger in dem.
- Bloggen är centrerad och har högerskydd, men kan ta bort det om man vill.
- Dropdown meny och statistiksmätare som jag kan hjälpa till att lägga in om man vill detta.
Auktionen avslutas den 10 Sep klockan 20:00
Lämna ett bud, (vill enbart ha seriösa budgivare) updaterar varje dag högsta budet.
Klicka här för att se designen live!
Personen bakom bloggstyle.se
Jag har inte bara denna sidan utan också en personlig blogg, där kan ni läsa om mej och min vardag och mina intressen... besök den gärna och skriv en rad.
www.annii.se
Ny design klar!
Hur man bygger sin blogg
Om du är nybörjare är det lättast att du testar detta på en underblogg eller ny blogg och därefter testa dej fram, men som jag alltid gör när jag bygger en ny design eller vill ändra gör jag detta på en underblogg och kopierar över koderna på min riktiga blogg när jag är nöjd.
1. Välj tex temat "fashion"
2. Börja med att ändra koderna i stilmallen, ta bort allt i stilmallen och klistra in dessa koder:
html,body,h1,h2,h3,h4,h5,h6,p,dl,dd,dt,ul,li,img,table,caption,tr,th,td,tt,span,fieldset,legend, form { margin:
0; padding: 0; border: 0; }
input, select, textarea { margin: 0; padding: 0; }
/*
* play around with these to change settings on your blog!
*/
/* link colors */
a {
color: #cccccc; text-decoration: none;
font-family: verdana,arial;
font-size: 11px;
}
a:hover {
color:#ffffff;
font-family: verdana,arial;
}
#wrapper}
position: absolute;
}
#wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
body {
background: #FFFFFF url(http://styleblogg.blogg.se/bakgrunder/images/2010/bg_90197815.jpg);
}
#side {
position: absolute;
left: 40px;
top: 40px;
width: 180px;
display: inline;
background:#ffffff;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
border: 1px solid #cccccc;
}
div#content {
position: absolute;
top:120px;
left:240px;
float: right;
clear: right;
display: inline;
padding: 0 5px 5px 5px;
width: 538px;
background: #ffffff;
border: 1px solid #cccccc;
}
#header a {
color: #000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
}
h1 {
font-family: arial, verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000;
text-transform:uppercase;
margin: 0px;
padding: 0px;
height: 30px;
}
h2 {
font-family: arial, verdana, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
margin: 0px;
padding: 0px;
width: 170px;
}
/** Entry headers **/
h3 {
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding:10px 10px 10px 0px;
color: #333333;
margin: 0px 0px 10px;
text-transform: uppercase;
}
.navheader {
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #cccccc;
padding:5px 5px 0px;
margin-bottom:0px;
background-color:#FFFFFF;
text-transform: uppercase;
}
.nav {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
margin: 0px;
}
.nav ul {
margin: 0px 0px 12px;
padding: 5px 10px 10px;
font-weight: normal;
background-color: #FFFFFF;
}
.nav li {
list-style: none;
padding: 0px 0px 6px 0px;
font-weight: normal;
}
.nav a { color: #000000; }
.nav a:hover { color: #cccccc; }
/** Post's body text **/
.entrybody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
line-height: 150%;
margin: 0px 0px 10px;
background-color: #FFFFFF;
padding: 10px;
}
/** 'Posted by' txt **/
.entrymeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #666;
text-align:right;
}
.entrymeta a { color: #333333; }
.entrymeta a:hover { color: #cccccc; }
.commentheader {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color:#809FFF;
padding:5px;
color: #FFFFFF;
}
.commenttext {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000;
line-height: 130%;
}
.commentmeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #999999;
margin: 10px 0px 20px 0px
}
.commentmeta a { color: #809FFF; }
.commentmeta a:hover { color: #80FF9F; }
.commentform {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
margin: 0px 0px 20px 0px
}
.separator {
border-top: 2px solid #CCCCCC;
border-bottom: 0px solid #CCCCCC;
margin: 14px 0px 14px 0px
}
.default {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333;
font-weight: bold;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
}
.subside {
font-family: "Trebuchet MS" Verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: normal;
padding: 0px 0px 0px 0px;
}
.xmlButton {
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px Verdana, Arial, Helvetica, Sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:0;
}
.image {
border: 2px solid #CCCCCC;
background-color:#FFFFFF;
padding:2px;
margin: 0px 6px 6px 0px;
}
.thumbnail {
border: 2px solid #CCCCCC;
background-color:#FFFFFF;
padding:2px;
margin: 0px 6px 6px 0px;
}
.video{
padding: 0px 0px 0px 0px;
}
.fieldName{
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin: 0px 0px 12px 0px
}
select{
font-family: verdana, arial, sans-serif;
font-size: 11px;
}
#calendar {
color: #333333;
font-family: 'Trebuchet MS', Verdana, sans-serif;
padding: 0px;
text-align: left;
background-color: #FFFFFF;
margin: 12px 0px 12px 0px;
padding: 10px;
}
#calendar table {
padding: 1px;
/*border-collapse: collapse;*/
border: 0px;
}
#calendar table caption {
color: #666666;
font-family : Arial, Helvetica, Sans-serif;
font-size : 0.7em;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;
text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}
#calendar table th {
text-align: center;
font-weight: bold;
font-size: xx-small;
}
#calendar table tr td {
border: 1px solid #666666;
text-align: center;
font-size: xx-small;
}
#calendar table tr ul {
color: #666666;
list-style: dot;
margin: 0px 0px 0px 20px;
padding: 4 0 5 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.7em;
}
#calendar table tr td.cssDayMouseOver {
border: 1px dotted red;
cursor: hand;
}
#calendar table tr td.cssDayMouseOut {
border: 1px solid #666666;
}
#calendar table tr td.cssEntryBox {
border: 1px solid gray;
padding: 6px;
text-align: left;
background: #FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
color: #666666;
}
#calendar table tr td ul li {
color: #666666;
}
#calendar table tr td div.cssDayEntryHeader {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
text-align: left;
font-weight: bold;
padding: 4;
}
#calendar table tr td div.cssDayAvailable {
text-decoration: underline;
text-weight: bold;
}
form {
padding: 10px;
background-color: #FFFFFF;
margin: 0px 0px 10px;
}
#profile {
font-family: Verdana, Helvetica, Sans-serif;
font-size: 11px;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding-left: 16px;
}
#profile h4{
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
margin: 0px 0px 6px 0px;
}
#profile p{
}
3. Klicka nu upp bloggen och se om det ser ut som på "bild 4" i detta inlägget. Prova även att updatera med F5 om det ser likadant ut.
Nu står det ORGINAL högst upp till vänster för att ta bort det gå in i kodmallen och ta bort denna koden, det markerade och spara:
4. Nu är koderna inlaggda och det är bara fritt fram och börja bygga på designen som du vill ha den ska förklara lite kort hur vissa saker funkar:
I stilmallen finns denna koden:
På content och de andra side är det samma sak hur det funkar.
5. För att lägga in en header:
Ladda upp den som vanligt och kopiera koden
Gå sedan in i kodmallen och lägg koden under <div side >
Lägg även till detta, så här ska det hela se ut:
<div side1>
<img src=""Länk från bild här">
</div>
Spara och klicka sedan på stilmallen, bläddra ner till koden #side{
Lättast är att man kopierar hela koden #side{ och lägger under och sedan ändrar width, left etc
Exempel hur de ska se ut:
#side {
position: absolute;
left: 40px;
top: 40px;
width: 180px;
display: inline;
padding: 0 0px 0px 0px;
background: #ffffff;
border: 1px solid #cccccc;
}
#side1 {
position: absolute;
left: 200px;
top: 10px;
width: 600px;
display: inline;
background: #none;
}
Ändra nu top och left för att lägga headern där du vill ha den.
För varje gång du vill lägga in något skapa en ny #side men med en annan siffra, samma sak i kodmallen.
Nu är det bara att prova sej fram, om ni inte förstår mina förklaringar är det bara att skriva.
Designade bloggar
Olika designer på bloggstyle.se
Mina andra bloggar
Mina första designer
Beställningar/utlottningr
Kommer lägga upp fler här med tiden...
Update
Roligt att så många fort besöker sidan, jätte kul, men tänkte bara skriva när jag ska svara på alla era frågor jag har fått, just nu är jag på semester men är hemma igen runt den 23 Aug, ni som undrar lite varför jag inte har skrivit så mycket eller svarat, men jag går igenom alla meddelanden sedan!
Ska även fixa till några koder på sidan, så de ser bra ut i de flesta webläsare, för just nu är vissa bokstäver stora och är inte på sin rätta platts. Men sidan ska funka som den ska och man ska kunna klicka runt på den som innan.
Skriver längre fram.. Hoppas ni har en bra sommar för övrigt Mvh Anni
Ny design !
Hela designen har jag skapat själv med hjälp av photoshop, menyn högst upp är inte helt klar men funkar i allafall, på "designade bloggar" är det tomt ska fixa till det sedan och lite i menyn, annars funkar sidan precis som den ska, om det skulle vara något så skriv :)
På gratis mallar kommer det att komma fler.
Jag ser även att sidan inte ser helt bra ut i firefox, utan sidan funkar bäst i Explorer
ska försöka fixa till det sen.
Animation klockor
Söta animation klockor hittar ni via denna [Länk] klicka sedan på Pixel Clocks i menyn till höger.
Update
Tack också för alla fina kommentarer och roligt att ni fort läser på sidan, dock inte varit så mycket inlägg men detta är ju inte direkt e blogg utan en sida fylld med information för att hjälpa folk med koder etc.
Men jag ska börja skriva mer inlägg när jag får tid, jus nu är man ute mycket och gör annat i sommar värmen.
Men skriv på och ställ frågor, läser allt.
Mvh Anni
MUSIK
TILL BLOGGEN
Myflashfetish.com
