Designhjälp: Rundade kanter runt dina inlägg.

Igår fick vi en kommentar på bloggen där en tjej frågade om jag kunde visa hur man fick rundade hörn runt sina inlägg. Så jag tänkte svara på den frågan och visa :) Så här löd frågan:

Nike (*****************) om Ang. Design Beställningar:

Hej gick in på din Novellblogg och undrar hur man kan få bubblor runt inläggen, och i menyn? Snälla skriv ett mejl och svara. Är desperat! Btw älskar novellen du håller på och skriver :D 

Checka gärna in min novellblogg. http://abieberworld.blogg.se



Svar: Detta är ett väldigt enkelt sätt att göra det på, eller ja... det finns nog bara ett, haha :D Så här ser det alltså ut på min novellblogg runt alla inlägg:


(Bilden är klickbar!)

 

Det är alltså bara tre enkla steg. Först ska du göra tre olika delar. En top, en mittendel och en botten. Dessa bilder går att göra i antingen PhotoShop eller Paint. Mina ser ut så här:


Top:


Botten:



Jag har inte lagt upp mittenbilden här för det är bara en vit ruta som är anpassad efter content.


När du gör dessa bilder måste du anpassa längd och höjd efter inläggsrutan (content). Det kan du alltid kolla i stilmallen. Efter att du har gjort bilderna laddar du upp alla bilder på bloggen genom att klicka på Skapa>Bild och välj filen. Sedan är det bara att trycka på ladda upp och vänta ;) När du har gjort det ska du lägga in alla delarna på sina platser i stilmallen. Då ska det se ut såhär:

 

•Leta upp delen "/** Entry headers **/". Sedan får du lägga till url(bildadress här) och sedan klistra in bildadressen dör jag har markerat blått. Efter det skriver du in no-repeat;.

 

Koden:

•Gör exat samma med den andra bilden, mittenbilden. Leta upp delen "/** Post's body text **/" och lägg in samma kod som finns ovan i det rödmarkerade området. Med det fins en liten sak du ska ändra; I stället för no-repeat; ska du skriva repeat-y;.
•Nu till sista delen. Gör exakt samma som du gjorde med den alla första bilden. Leta upp delen "/** Posted by' txt **/. Och lägg in koden och bildadressen inom det rödmarkerade området. Men i slutet av denna koden ska det stå no-repeat; som första gången.
Sedan är allt klart! :) Du måste förmodligen uppdatera sidan eller trycka på F5 för att se de nya förändringarna. Nu har du rundade inlägg! Och vill ni veta hur man gör runda kanter på kommentarsrutorna och runt där man kommentera så fråga bara. Skicka en kommentar eller ett mail så tar jag upp det här på bloggen ;) Hoppas detta hjälper, Kram Johanna! :)

Kommentarer
Skrivet av: Nike

Tack, fan vad snällt! <3

2011-07-13 @ 20:57:37
URL: http://abieberworld.blogg.se/
Skrivet av: Nike

2011-08-14 @ 22:05:18
URL: http://abieberworld.blogg.se/
Skrivet av: Nike

Hej! Jag är tjejen som frågade hur man gjorde rundade hörn. Men asså jag tycker det var skit svårt + att jag vill ha rundade hörn i menyn också :] Jag undrar om du kunde göra själva stilmallen [ inte heaern ] till mig? Länkar såklart till din blogg då! :] Skulle vara jättesnällt.

2011-08-14 @ 22:09:01
URL: http://abieberworld.blogg.se/

Kommentera inlägget här:

-Namn:
Kom ihåg mig?

-E-postadress: (ses bara av oss)

-URL/Bloggadress:

Kommentar:

Trackback