Designhjälp för din blogg

Få länkarna i menyn bredvid varandra (ist. för under varandra)

Kategori: Meny
Vanligtvis så lägger sig länkarna i menyn under varandra i en lista. Dvs. alla senaste inlägg, kategorier och månader i arkivet. Se bild till vänster. Många undrar hur man får dessa länkar jämter varandra istället, se bilden till höger.
   


Såhär gör du om du vill att länkarna ska ligga jämter varandra (så som på högra bilden) istället för under varandra i menyn.
  
 
1. Gå in i din HTLM-mall (Kugghjulet -> Design -> Redigera HTML (Startsida))


2. Leta upp koderna och ta bort det bilden nedan visar:
 

3. Spara

4. Gör likadant i koderna för inläggsidan (Kugghjulet -> Design -> Redigera HTML (Inläggsida))


Genomskinlig dropdown meny

Kategori: Meny

VIl du ha en snygg genomskinlig dropdown meny på din blogg?

 

1. Kopiera och klista in följande längst ned i din stilmall och spara den:

#navbar {overflow: vissble;text-transform: uppercase; margin: 0; padding-top: 200px; margin-top: 40px;
padding: 0;background-color: #F2F2F2;/* opacitet for IE */
filter:alpha(opacity=80);
/* opacity: 0.80; filter: alpha(opacity=60); */
/* opacitet CSS3 standard */
opacity:0.80;
/* opacitet for Mozilla */
-moz-opacity:0.80;color: #000; 
height: 25px;
-moz-box-shadow:0px 0px 2px #ccc;
box-shadow: 0px 0px 2px #ccc;
}


#navbar li { overflow: vissble; list-style: none; float: left; } /* Ändra till right om du vill ha menyn till höger istället*/

#navbar li a { overflow: vissble; display: block; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:0px; border-left: 0px solid #ffffff; border-bottom: 0px solid #ffffff; ;background-color: #F2F2F2;/*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: verdana; /*Ändra typsnittet här*/ font-size: 10px; } /*Ändra storleken på texten här*/ #navbar li ul { overflow: vissble;display: none; width: 11em; /* Ändra bredden på undermenyn här */ ;background-color: #F2F2F2;/* opacitet for IE */
filter:alpha(opacity=99);
/* opacity: 0.99; filter: alpha(opacity=99); */
/* opacitet CSS3 standard */
opacity:0.99;
/* opacitet for Mozilla */
-moz-opacity:0.80;} #navbar li:hover ul, #navbar li.hover ul { overflow: vissble; display: block; position: absolute; margin: 0; padding: 0; z-index: 1; } #navbar li:hover li, #navbar li.hover li { overflow: vissble; float: none; }


#navbar li:hover li a, #navbar li.hover li a { overflow: vissble; background-color: #ffffff; /*Ändra färgen på undermenyn*//* opacitet for IE */ filter:alpha(opacity=80); /* opacity: 0.80; filter: alpha(opacity=80); */ /* opacitet CSS3 standard */ opacity:0.80; /* opacitet for Mozilla */ -moz-opacity:0.80; border-bottom: 0px solid #fff; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #696969; } /*ändra textfärgen på undermenyn här*/


#navbar li li a:hover {overflow: vissble; color: #ffffff; background-color: #ccc; } /*Ändra färgen när man håller musen över undermenyn*/


2. Klista in följande i din kodmall och spara:

<ul id="navbar">
<li><a href="http://sarasoderberg.blogg.se">Startsida</a>

</li>
<li><a href="#">Kategorier</a>
<ul>
<li><a href="http://sarasoderberg.blogg.se/category/traning.html">Träning</a></li>
<li><a href="http://sarasoderberg.blogg.se/category/tavling.html">Tävling</a></li>
<li><a href="">Mat</a></li>

 

</ul>
</li>
<li><a href="http://sarasoderberg.blogg.se/2012/september/kontakt.html">Kontakt</a></li>

<li><a href="http://www.bloglovin.com/blog/3324261/sara-soderberg">Följ mig</a>

</li>

</ul>

3. Klart! Nu kan du lägga in egna länkar i menyn och ändra utseendet själv om du vill.


Ändra namn på rubrikerna i menyn

Kategori: Meny



1.
Klicka dig in till din kodmall

2. Leta upp den rubrik du vill ändra namn på. Vill du t.ex. ändra namn på senaste inlägg letar du upp den texten.
 
Tips: Tryck på Ctrl + när du är inne i stilmallen och skriv sedan in senaste inlägg i sökrutan som kommer upp. Då kommer stycket att automatisk makeras i stilmallen så du slipper sitta och leta upp det!



3. Ersätt texten senaste inlägg med den nya text du vill ha!

4. Publicera ändring!
 
5. Gör likadant i de andra kodmallarna, glöm bara inte att publicera ändring innan du byter kodmall!


Hos blogghjalparn.blogg.se finner du textguider om HTML & CSS. Guiderna riktar sig till bloggare som vill ha hjälp med sin bloggdesign. Man kan själv läsa sig till hur man ska göra eller så kan man beställa sin egna design alternativt köpa en redan färdig design.

Copyright © 2017 Blogghjälparn

BLOGGHJÄLPARN


Senaste inläggen

Portaler & Listor
Webbdesign