Tips - bloglovin' i menyn
Många har en liten bild i menyn där det står "bloglovin'" jag gjorde min i Pages. Finns också färdiga bilder/texer som man kan ha som bildlänk i menyn som man klickar på bilden kommer man till sin egna bloglovin' sida där olika kan följa dig eller kan du följa andra!
1. Börja med att gå in på google.com. Sök på bloglovin' och sedan välj en bild som passar dig. Du kan också göra en själv i något word program.
2. Välj en bild och sedan lägger du den på skrivbordet.
3. Kopiera koden <a href="HÄR SKRIVER DU VARS BILDEN SKA LÄNKAS" target="_blank"><img src="HÄR KLISTRAR DU IN BILDENS URL/LÄNK"</a> och lägg in den någon stans i kodmallen där du vill ha den. Spara!
4. Ladda upp bilden du valde i google. Funkar lika dant som när du ska lägga in din header. Storleken kan variera mellan 100-300 är vanligast. Jag brukar välja 200 eller 100 det bror på hur stor bilden är. Kopiera bildkoden sedan till bilden du ska i menyn och lägg in den i koden du klistrade in i kodmallen. Du ser precis vart du ska lägga bildkoden i "koden" du la in tidigare. Spara!
5. Gå in på din bloglovin' där det går att trycka "följ bloggen" på din "egna". Kopiera den adressen och lägg in den i koden du la in i "kodmallen". Spara!
Kanske lite otydligt men men.. Skriv en kommentar om du behöver hälp. Puss
Tips - Redigering i Gimp 2.6
Tänkte visa hur man gör i gimp. Riktigt roligt!
Resultatet;
Ta bort rss ikonen
Jag har alltid undrat hur man tar bort rss ikonen -
Men sedan fick jag reda på det via en designsida. Det är det änklaste som finns i "webbdesign världen".
______________________________________________________________________________________________
1. Börja med att gå in på dina kodmallar och sedan leta upp koden <div class="subside"> och sedan under raderar du koden <a href="index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a> och under ska det vara kvar 3 </div>. Gör det på dem andra sidorna kategorisidan & arkivsidan osv. Sen är det klart!
______________________________________________________________________________________________
<a href="index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>
Tips - slideshow i headern
Eftersom många hade frågat hur man gör ett bildspel i headern så tänkte jag visa!
1. Börja med att gå in på dina kodmallar och lägger in den
här koden någon stans mellan <head> och </head> jag brukar lägga in den i slutet av </head> så att jag vet vad jag har den.
_______________________________________________________________________________________________
2. Sedan lägger du in den
här koden mellan <div id="wrapper"> och <div id="header">. Du kan ha så många bilder du vill i ditt bildspel, bara att den sista bilden du lägger in inte har denna ; i slutet. Alltså sista bilden ska
inte ha en sån här ; bakom sig. Du lägger bara till en kod för mer bilder än tre.
_______________________________________________________________________________________________
3. Sen är det bara att ta bort headern i stilmallen och sedan ändra höjden så att det ser så bra ut som möjligt.
_______________________________________________________________________________________________
4. Du ska ju ha bilder i ditt bildspel! Ladda upp dina bilder som vanligt, men det gäller att du har samma storlek på bilderna så att det inte hackar i spelet. Sedan kopierar du bildkoden och lägger in den i kodmallen (koden som du la in) och så stor det i stort sätt som du ska göra.
_______________________________________________________________________________________________
5. Och spara! Gick det bra? mejla eller kommentare för mer hjälp
[email protected]. Puss
Tips- antalet inlägg i menyn
Världens änklaste webbhjälp!
När man skaffar en blogg brukar antalet inlägg i menyn vara runt 20, man kan se det genom att kolla i ens kodmallar och leta upp koden <tag:recentlist limit="20">. Nyss ändrade jag till 10 för det blev för mycket i menyn annars hos mig. Man kan ändra till fler antal inlägg eller tvärt om, genom att höja siffran kommer det fler inlägg i menyn och sen tvärt om. Händer det inget? kommentera så försöker jag hjälpa er så gott jag kan!
__________________________________________________________________________________________
Före och efter;
__________________________________________________________________________________________
Beskrivning i menyn
Om du vill lägga in en personlig text under din profilbild i menyn, så är det inte så himla knepigt.
Det är något som de flesta bloggare gärna vill ha för att deras besökare skall få en snabb beskrivning av bloggaren i sig, och det finns även möjlighet att lägga till en epostadress eller liknande om man vill det.
Vad som skall stå i själva texten är helt och hållet upp till dig själv.
______________________________________________________________________________________
1. Gå in i dina kodmallar.
2. Leta upp en rad som ser ut så här: </tag:profile>
På raden under den, så ska du nu skriva i din egen personliga text.
3. Du kan använda helt vanlig html för att modifiera texten.
Klicka sen på spara kodmall och kolla hur allt ser ut sen.
Vill du ha lite mer tips om just detta, så kommentera så hjälper jag dig så gott jag kan.
Ändra texten i menyn, bloggsidan
Tänkte visa hur man ändrar texten i bloggen.
Samt menyn, inläggs texten och rubrikerna. Jätte enkelt!
Tona vid mousover
<style type="text/css">
img{opacity: 1;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
img:hover{opacity: 0.6;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
</style>
1. Gå in på dina kodmallar och sedan klistrar du in koden nedan mellan <head> och </head>. Jag la den precis ovanför </head>.
________________________________________________
<style type="text/css">
img{opacity: 1;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
img:hover{opacity: 0.6;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
</style>
________________________________________________
2. Ändra hur mycket genomskinligt det ska vara genom att ändra i koden "img:hover{opacity: 0.6; från 0,1-1,0"
Resultatet!
Gick allt bra?
Bilder i menyn
Så här lägger du in en bild i menyn.
1. Ladda upp en bild på bloggen och kopiera adressen till bilden.
Ta inte för stor stolek på bilden bara eftersom den ska få plats i menyn.
2. Klicka på fliken design på din blogg och gå sedan vidare till kodmallar.
3. Lägg till texten
<img src="adressen till din bild"> någonstans under <div> beroende på vart i menyn du vill ha bilden.
4. Där det står "adressen till din bild" klistrar du in adressen som du kopierade i steg 1.
5. Sen är det bara att spara. Kommentera om det bli tokigt! Puss
Ta bort den vita ramen runt headern?
Det finns flera anledningar till att det kan finnas en vit ram kring headern, därför visar jag det enklast genom ett kod-exempel som kommer från stilmallen:
#header {
background: #FFFFFF *1* url(adress till header-bild);
padding-left: 0px;
padding-bottom:0px;
padding-top:0px;
border: 0px; *2*
margin: 0px 0px 0px;
width: 831px; *3*
: 539px; *4*
}
1. Se till att bakgrundsfärgen (som i detta fall är vit = #FFFFFF) är densamma som du vill att headern ska vara i.
2. Se till att ”bordern” är 0px (om den raden finns där).
3. Se till att header-bilden är lika stor som du anget bland koderna.
4. Samma svar som nr 3.
OBS! Dubbelkolla i det redigerings-program du använder att bilden inte har en vit ram kring sig. Om den vita ramen mot förmodan kvarstår kan jag kika bland dina koder för att utveckla svaret.. Yes.. Puss
Obs; Fixar ny design
Det kan se lite konstigt ut men men :) Puss
Ta bort menyn
Tänkte berätta hur man tar bort menyn i headern. Det är plätt lätt. Börja att gå in på dina kodmallar, sedan leta upp <div id="side">. Markera <div id="side"> till </div></div></div>, sedan raderar du det och sen är det borta. Det kan variera lite från blogg till blogg, vissa har lite olika utseende. Hoppas det gick bra.
Kanske ett lättare sätt;
Ta bort från <div id="side"> till
</div></div></div>
(precis innan <img src="http://stats.blogg.se/?id=${BlogID}" border="0" width="0" height="0" alt="" />)
Jag har en annan meny, det är bara att googla om ni vill ha en liknande som t.ex "Meny under headern". Kanske lägger upp en beskrivning sen. Jag lärde mig av att googla och söka upp hjälpmedel. Kommentera om ni behöver hjälp. Puss
Text i kommentarsfältet
Jag ville bara visa hur man gjorde. Det är många som har frågat så jag visar! Blev inte så bra kvaleté på filmen eftersom jag exporterade filmen fel. Men ville visa lite bättre denna gång.
Runda hörn med CSS
Runda hörn på bloggen kan man skapa antingen med hjälp av bilder, eller så använder man sig av CSS.
Det absolut lättaste sättet är att använda sig av CSS, för då sköts allt med kod, istället för att man måste skapa olika typer av bilder.
Så här kan ett exempel se ut:
Den här rutan har runda hörn, men du kan bara se det om du har en nyare version av webbläsare.
Dock så finns det lite begränsningar i det hela och det är att man måste ha en nyare version av webbläsare för att det ska synas. Har man t ex en äldre version av Internet Explorer så funkar det inte, men förhoppningsvis så uppdaterar folk sina webbläsare med tiden, så då kan man ju använda sig av detta.
Så här gör man:
1. Kopiera koden nedanför:
-webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
-moz-border-radius: 15px; /* FF1-3.6 */
border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+
*/
2. Lägg in koden i din stilmall, i det element som du vill ska ha rundade hörn.
Om du vill att din wrapper ska ha runda hörn, då lägger du in koden i stilmallen där du har koden för wrapper.
Om du vill göra själva böjen i hörnet mindre eller större, då ändrar du värdet som i exemplet är 15px.
Svårare än så är det inte.
Lycka till!
Dock så går det inte om man har en header-bildspel. Kanske kan gå. Pröva dig fram!
Facebook-gilla knapp!
Hej bloggen!
Tänkte görja med min första så kallad webbdesignhjälp. Så börjar med en Facebookgilla knapp. Många har ju facebook så det är ganska populärt att ha en sån så jag börjar att förklara.
1. Gå in på dina kodmallar
3. Då ska du leta upp <div class=”entrymeta”> och lägga in koden en rad under den kodraden.
4. I koden står det DIN BLOGG ADRESS HÄR. Och där ska du lägga in DIN blogg adress. Utan http://. Alltså du ska lägga in DIN blogg adress imellan de tecknen "gymnastiikollii.blogg.se"
5. Om du vill att det ska vara ett annat typsnitt på texten på knappen, så ändrar du det där det står font=”verdana”. Du kan välja mellan dessa typsnitt: arial, lucida grande, segoe ui, tahoma, trebuchet ms och verdana.
6. Nu ska du SPARA kodmallen. Nu kommer gilla-knappen vara under varje inlägg.
Hoppas ni förstår. Annars kommentera så kanske jag kan hjälpa dig. Lägg gärna in din mejladress.
Så kommer gilla knappn se ut!
