Installera en gratisdesign på din blogg.

I dag tänke jag visa er hur man installerar en av mina gratisdesigner, vet att det är några av er som inte vet hur man gör.


Börja med att ladda ner designen du vill använda på din blogg.

Jag har laddat ner den här The vampire diaries designen. Den hittar du här. Mina övriga designer hittar du under Navigera - till dig - Gratisdesigner.



När du har laddat ner designen måste du leta reda på den på din datorn. I mitt fall hamnar den under Dokument - downloads.

När du har hittat den nedladdade filen (som ser ut som på bilden ovanför) måste du packa upp den. Det gör du med ett valfritt unzip program. Högerklicka på zipfilen och välj Extract to, precis som bilden här ovanför visar.
När du har gjort det så kommer du att ha två stycken filer, den ena är zipfilen som du alldeles nyss laddade ner den andra är en mapp. Öppna upp mappen.


Så här ser det ut när du har öppnat mappen. Det enda du egentligen behöver bry dig om är textdokumenten (stilmall, framsida, inläggssida, kategorisida och arkivsida).


Nu ska du logga in på din blogg och klicka dig vidare till stilmallen (design - redigera stilmall), precis som bilden här under visar. Öppna upp textdokumentet Stilmall och markera och kopiera alla koderna. Markera alla koderna i stilmallen och ta bort dom och klistra istället in alla dom koderna du kopierade alldeles nyss. Glöm inte att spara.


Nu ska du  klicka dig vidare till kodmallarna, (design - kodmallar) precis som bilden här under visar.


I rullgrejen precis ovanför kodmallarna kan du välja vilken sida i kodmallarna du vill redigera. Det finns ett textdokument till varje sida i kodmallen. Klistra in koderna från textdokumenten och ersätt koderna i kodmallen. Gör detta på varje sida, glöm inte att spara mallarna innan du går vidare till nästa sida!



Klicka dig in på din blogg och kolla så att allt ser ut som det ska. Gör det inte det kan ni alltid återställa mallarna och testa igen!


Alternativ meny #2 - slidedown.

I går berättade jag hur man lägger in en dropdown meny på sin blogg - idag ska jag berätta hur man lägger in en annan slags meny. Nämligen en slidedown meny.

Till den här guiden kommer jag att använda mig av den här gratisdesignen - men ni kan naturligtvis använda er av eran egen design eller någon annan gratisdesign om ni hellre vill det.

Börja med att logga in på din blogg & klicka dig vidare till Stilmallen. Kopiera koden här nedanför och klistra in den längst ner i stilmallen. (obs. på grund av högerklicksskyddet måste du kopiera med ctrl + c)

ul#drawers {width: 100px; list-style: none; margin: 0 auto; padding: 0px; border-top: 0px; color: #000;}
ul#drawers a {text-decoration: none; color: #000;}
ul#drawers li h4 {margin: 0; padding: 1px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;}
h4.small {display: table-cell; width: 100px; margin: 0px; height: 100%;}
li.drawer h4.open {background-color: #121213; border-top: 0px;}
li.drawer div {padding: 2px; margin: 0px; line-height: 12px; background-color: #363835; background: rgba(255, 255, 255, 0.0);}
li.drawer div li {list-style-type: disc;}
li.drawer div ul {-webkit-padding-start: 12px;}


Klicka dig vidare in i kodmallen & leta upp </head>. Kopiera koden här nedanför & klistra in den precis ovanför </head> taggen.

<script src="http://static.tumblr.com/me5sfsd/1YFl414t0/jquery142.js";></script>
<script type="text/javascript">
$(document).ready(function () {
$('li.drawer div:nth-child(2)').hide();
$('li.drawer h4').click(function () {
if ($(this).hasClass('open')) {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');}
else {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');
$(this).next().slideDown();
$(this).addClass('open');}
});
});
</script>

Leta nu upp <div id="side"> & <div class="nav"> & kopiera koden här nedanför & klistra in den precis under.

<ul id="drawers">
<li id="info">
<h4>Menyheader</h4>
<div align="left">
<p>
<a href="http://dinadress.blogg.se">Länk namn</a>
<p>
<a href="http://dinadress.blogg.se">Länk namn</a>
</p>
</div>
</li>
</ul>
<ul id="drawers">
<li class="drawer" id="info">
<h4>Menyheader</h4>
<div align="left">
<p>
<a href="http://dinadress.blogg.se">Länk namn</a>
<p>
<a href="http://dinadress.blogg.se">Länk namn</a>
</p>
</div>
</li>
</ul>

Kolla så att menyn funkar. När du har gjort det är det dags att konfigurera menyn. Ta bort & ersätt Menyheader mot din egen menyheader. Tex. Arkiv / Kategorier / Länkar osv. Ta bort & ersätt adresserna med dina egna adresser samt Länk namn mot ditt eget länk namn. Ett exempel: 

<ul id="drawers">
<li class="drawer" id="info">
<h4>Arkiv</h4>
<div align="left">
<p>
<a href="http://minadress.blogg.se/2012/january/">Januari</a>
<p>
<a href="http://minadress.blogg.se/2012/february/">Februari</a>
</p>
</div>
</li>
</ul>

För att lägga in fler länkar använder du dig av denna koden:

<p>
<a href="http://dinadress.blogg.se">Länk namn</a>

& den lägger du in precis innan </p>

Lycka till!


Alternativ meny #1 - dropdown.

Vi kan väl alla komma överens om att den gamla vanliga menyn kan bli lite tråkig - så därför kommer jag att posta tre olika inlägg med guider på hur du kan byta ut den mot alternativa menyer. I det här inlägget kommer jag att förklara hur du lägger till en dropdown meny.

Till den här guiden kommer jag att använda mig av den här gratisdesignen - men ni kan använda eran egen design eller någon annan gratisdesign (Designa din blogg har över 100 designer som ni kan ladda ner gratis och använda på era bloggar!) om ni hellre vill det. 

Men nu till guiden!

Börja med att logga in på din blogg och klicka dig vidare till stilmallen.

Klistra in den här koden längst ner i stilmallen: (obs. kopiera med ctr + c)

#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc; /*Ändra färgen på menyflikarna här*/
color: #fff; /*Ä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 {
display: none;
width: 10em; /* Ändra bredden på undermenyn här */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #889988; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #ffffff; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/
#navbar {
margin: 0;
padding: 10;
height: 1em;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 2px 5px;
background-color: #;  
color: #000;
text-decoration: none;
font-family: arial;
font-size: 10px;
}
#navbar li ul {
display: none;  
width: 10em;
}
#navbar li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
}
#navbar li:hover li,
#navbar li.hover li {
float: none;
}
#navbar li:hover li a,
#navbar li.hover li a {
background-color: #fff;
opacity: 1.0;
border-bottom: 0px solid #fff;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
color: #000000;
}
#navbar li li a:hover {
background: #fff;
color: #fff;
border-bottom: 1px dashed #fff;
}


Lägg den här koden precis under föregående kod:

#menu2 {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background: none; no-repeat left bottom;
z-index: 80;
position:absolute;
top:26px;
left:165px;
width: 500px;
border: none;
/* opacitet for IE */
filter:alpha(opacity=85);
/* opacity: 0.85; filter: alpha(opacity=85); */
/* opacitet CSS3 standard */
opacity:0.85;
/* opacitet for Mozilla */
-moz-opacity:0.85;
}

Klicka dig vidare till kodmallar och klistra in den här koden vars ni vill ha menyn. Jag vill ha den i headern så jag kommer att klistra in den under <div id="header"> </div>

<div id="menu2">
<ul id="navbar"></br></br>

<li><a href="http://dinlänk.blogg.se">Meny länk</a>

<li><a href="#">Meny namn 2</a>

<ul>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>

</li>

</ul></li>

<li><a href="#">Meny namn 3</a>

<ul>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>

</ul></li>
</li></ul></div>


Så här ser det ut nu - ni bör ha något liknande:




Nu när menyn är inlagg ska vi konfigurera den. Vi börjar i kodmallen.

Börja med att ersätta Meny länk, Meny namn 2 och Meny namn 3 mot dina egna menyer. Ersätt även länkadresserna med dina egna länkadresser samt länk namnen med dina egna länknamn.

Ett exempel:

<div id="menu2">
<ul id="navbar"></br></br>

<li><a href="http://bubblewrappedheart.se">Hem</a>

<li><a href="#">Arkiv</a>

<ul>
<li><a href="http://bubblewrappedheart.se/2012/january/">Januari</a></li>
<li><a href="http://bubblewrappedheart.se/2012/february/">Februari</a></li>
<li><a href="http://bubblewrappedheart.se/2012/march/">Mars</a></li>
</li>

</ul></li>

<li><a href="#">Kategorier</a>

<ul>
<li><a href="http://bubblewrappedheart.se/category/bocker.html">Böcker</a></li>
<li><a href="http://bubblewrappedheart.se/category/musik.html">Musik</a></li>
<li><a href="http://bubblewrappedheart.se/category/design.html">Design</a></li>

</ul></li>
</li></ul></div>


Nu när länkarna är som dom ska - så ska vi gå vidare till stilmallen. Kommer ni ihåg Menu2 koden som vi la in tidigare? Leta fram den. Det ni ska ändra på är det här:

top:26px; ‹- talar om hur långt ifrån toppen menyn ska vara.
left:165px; ‹- talar om hur långt ifrån vänster menyn ska vara.


Ni får testa er fram tills menyn är där ni vill att den ska vara.

Gå vidare till Navbar koden som ni la in tidigare.

#navbar { 
margin: 0; 
padding: 10; 
height: 1em;
}
#navbar li { 
list-style: none; 
float: left;
}
#navbar li a { 
display: block; 
padding: 2px 5px; 
background-color: #;
‹- Ändra färgen på menyflikarna.
color: #000; ‹- Ändra färgen på menylänkarna.
text-decoration: none;
font-family: arial; ‹- Ändra typsnittet på menylänkarna.
font-size: 10px; ‹- Ändra storleken på menylänkarna.
}
#navbar li ul { 
display: none;  
width: 10em; ‹- Ändra bredden på undermenyn.
}
#navbar li:hover ul,
#navbar li.hover ul { 
display: block; 
position: absolute; 
margin: 0; 
padding: 0;
z-index: 1;
}
#navbar li:hover li,
#navbar li.hover li { 
float: none;
}
#navbar li:hover li a,
#navbar li.hover li a { 
background-color: #fff; ‹- Ändra färgen på undermenyn.
opacity: 1.0; 
border-bottom: 0px solid #fff; ‹- Ändra färgen på border.
border-left: 0px solid #fff; ‹- Ändra färgen på border.
border-right: 0px solid #fff; ‹- Ändra färgen på border.
color: #000000; ‹- Ändra färgen på länkarna i undermenyn.
}
#navbar li li a:hover { 
background: #fff; ‹- Ändra bakgrunden vid mouseover.
color: #fff; ‹- Ändra färgen vid mouseover.
border-bottom: 1px dashed #fff; ‹- Ändra färgen på border vid mouseover.
}


Sen var det klart! Det här är mitt färdiga resultat:



Add custom fonts

Det är många av er som har skrivit till mig angående mina "custom" typsnitt i inläggs & meny rubrikerna så jag tänkte att jag skulle skriva en liten tutorial på hur man gör det.

Först av allt; Ladda ner den här cufon filen! 

Fortsätt med att klicka er in på Webs.com, du behöver skapa ett konto där så att du har någonstans att ladda upp dom filerna som är nödvändiga. Du ska inte skapa ett vanligt konto dock, utan ett så kallat HTML konto.

Börja med att fylla i all nödvändig information så som ditt namn, din emailadress osv. När du kommer till den här sidan ska du istället för att fortsätta, klicka på Already have a site to upload? Try using HTML - only mode som ligger högst upp till höger. Jag har markerat texten; 


Nu ska du ladda upp Cufon filen som du laddade ner allra först. Det gör du genom att klicka på den här blåa rutan som ligger ganska högt upp till vänster. Det står Single file uploader på den.



När du har laddat upp filen så ska du leta reda på en font som du vill använda dig av (lämna uppe sidan, du kommer att behöva den senare!) Det finns flera olika sidor men jag gillar Dafont. När du har hittat ett typsnitt som du gillar klickar du på download.

När du har fått ner filen högerklickar du på den & väljer Extract here. (Det betyder att du måste ha ett uppackningsprogram installerat på datorn.)

Nu ska du generara ditt typsnitt, det gör du här.


Select the font you´d like to use.
Ladda upp den uppackade typsnitt filen.

The EULAs of these fonts allow Web Embedding.
Om du inte kryssar i denna ruta finns det chans att typsnittet inte går att använda. 

Include the following glyphs.
Kryssa i dessa alternativ: basic latinuppercase , lowercase samt numerals.

När du kommer till slutet ska du kryssa i att du accepterar villkoren sen är det bara att klicka på Lets do this!

Nu bör du ha fått ner den genererade typsnittsfilen. Då går du tillbaka till Webs & gör samma sak med den som du gjorde med Cufonfilen tidigare. Ladda upp den.

När du har båda filerna uppladdade ska du logga in på din blogg & gå in i kodmallen.

Det här är koden du ska använda dig av, & den lägger du in precis innan </head>. (kopiera med ctrl + c)

<script src="http://emmanathaliet.webs.com/cufon-yui.js" type="text/javascript"></script>
<script src="http://emmanathaliet.webs.com/Hurricane_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h3');
Cufon.replace('h4');
Cufon.replace('h5');
</script>
<script src="Länken till Cufon filen" type="text/javascript"></script>
<script src="Länken till det genererade typsnittet" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h3');
</script>

Dom rosamarkerade snuttarna i koden är vars du ska ändra & lägga in länkarna till filerna du laddade upp!

Hoppas det gick bra! & att jag inte är allt för dålig att förklara.. Det är nämligen första gången jag skriver en sån här tutorial!


Centrera tid & datum under inläggen alt. 2

Om det nu av någon anledning inte funkade för dig att centrera tid & datum i stilmallen så var lugn, det finns ett annat sätt att göra det på. Den här gången ska du gå in i kodmallen i stället för stilmallen. Leta fram kodstycket som jag har markerat här under på bilden;


{klickbar bild}

Som jag sa tidigare så kan koderna i eran kodmall se lite annorlunda ut om ni redan har varit & ändrat i koderna, men det är entrymeta även i kodmallen som ni ska leta upp. Koden vi ska använda oss av för att centrera tid & datumet samt kategorilänken & kommentarlänken är <center> & </center>

Lägg in koderna så att det ser ut så här i din kodmall nu;

{klickbar bild}

Kom i håg att <center> alltid ska klistras in innan </center> annars riskerar ni att centrera hela bloggen istället.

& innan ni börjar, snälla spara en kopia av kodmallen som den var innan ifall det skulle bli fel så slipper ni återställa alltihopa.



Centrera tid & datum under inläggen alt. 1


{klickbar bild}

För att centrera datum & tid under inläggen lättast gör du det i stilmallen. Utseendet på stilmallen kan variera beroende på vilken stilmall du valde att använda dig av.

Men det är alltså Entrymeta du ska leta upp i stilmallen. Leta upp Text-align i kodstycket & ändra så att det står Text-align: center; (alt. lägg till den raden om den saknas) precis som det är här ovan på bilden.

Sen var det klart. Enkelt va?