Designhjälp för din blogg

Spotify spellista på din blogg

Kategori: Roligheter
 
 
Vill du dela med dig av en låt eller en spellista från spotify på din blogg? 
 
1. Klicka dig in på https://developer.spotify.com/technologies/spotify-play-button/
 
2. Sen är det bara att följa instruktionerna

3. Klista in den koden du kopiera i din kodamall där du vill ha spellistan!

4. Förhandsgranska så du ser att det blev rätt innan du spara!

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.


Bildspel från instagram på din blogg

Kategori: Roligheter

Vill du ha ett bildspel där dina instgram bilder visas på din hemsida?

1. Gå in på här

2. Scrolla ned till Customize your widget och skriv in dina uppgifter. Välj om du vill ha alla dina foton med i bildspelet genom att skriva in din användare eller bara foton med en speciell tag

3. Klicka på Get Code och kopiera hela koden som kommer upp. 

4. Gå in i den kodmall och klista in koden där du vill ha bildspelet.

5. Förhandsgranska innan du sparar!

Du måste ha din instagram profil public, så att alla kan se dina bilder för att bildspelet ska kunna fungera!


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