Designhjälp för din blogg

Ladda in fler inlägg när man scrollar (Infinite Scroll)

Kategori: Inläggsidan

Visas bara några styckna inlägg på din blogg? Så här gör du om du vill att fler inlägg ska laddas in då man scrollar till botten av bloggen.

1.
 Gå in i din HTLM-mall (Kugghjulet -> Design -> Dator -> Redigera HTML -> Startsida


2. Lägg till följande kod precis före </head>

<script type="text/javascript" src="/static/api.js"></script>


3. Precis efter <div id="content"> lägger du till:

 {% block entry_loop %}
 {% for entry in entries %}

4. Efter: <!--### loop AD do not remove or move ###-->

ska det stå:

 {% endfor %}
 {% endblock entry_loop %}

 

5. Precis innan </body> klistrar du in följande:

{% if page in ["index","archive","category"] and last_ts and page %}
<script>
if(typeof(bindContentLoader) == 'function') {

  bindContentLoader('{{ page }}',$('#content'),{{ last_ts }}, function(){
  });
</script>

{% endif %}

 

6. Spara


Ändra utseende på sökrutan och sökrutetexten

Kategori: Övrigt

1. Gå in i din Stilmall (Kugghjulet -> Design -> Redigera HTML -> Stilmall)


Längst ned i din stilmall lägger du in följande:

.sokknapp {
background:#ffffff url();
color:#666;
font-family:tahoma;
font-size:11px;
text-transform: uppercase;
border:1px solid;
height:30px;
width:40px;
}

.sokruta {
background:#ffffff url();
color:#666;
font-family:tahoma;
font-size:12px;
border:1px solid;
height:30px;
width:150px;
}

.sokrubrik {
font-size: 15px;
color: #fff;
margin: 0px; font-weight:normal;
font-family: 'Armata', sans-serif;
text-transform: uppercase;
}


2. Spara

3. Gå nu in i din HTLM-mall (Kugghjulet -> Design -> Redigera HTML (Startsida))

4. Ta bort <section id="search">Här står det lite olika beroende på vilken design du använder dig av</section>

5. Klista in följande exakt på samma ställe:

<section id="search">
<div class="sokrubrik">Sök i bloggen</div>
<form action="http://www.google.se/search" name="search" method="get">
<input type="search" class="sokruta" name="q" value="" size="12" maxlength="64" />
<input type="hidden" name="sitesearch" value="{{ blog.url }}" />
<input type="submit" class="sokknapp" value="Sök" />
</form>
</section>


6.
Spara

7. Nu kan du gå in i din stilmall igen och ändra utseende på knappen genom att ändra i koderna som du skrev in i steg 1.

Här kommer lite hjälp med att ändra utseendet:

sokknapp {
background:#ffffff url(); <----- Ändra bakgrundsfärg på sökknappen
color:#666;  <----- Ändra textfärg på sökknappen
font-family:tahoma;
font-size:11px;
text-transform: uppercase;
border:1px solid;
height:30px; <----- Ändra höjd på sökknappen
width:40px; <----- Ändra längd på sökknappen
}

.sokruta {
background:#ffffff url(); <----- Ändra bakgrundsfärg i sökrutan
color:#666;
font-family:tahoma;
font-size:12px;
border:1px solid;
height:30px; <----- Ändra höjd på sökrutan
width:150px; <----- Ändra längd på sökrutan
}

.sokrubrik {
font-size: 15px; <----- Ändra storlek på texten "Sök i bloggen".
color: #fff; <----- Ändra färg på texten "Sök i bloggen".
font-weight:normal;
font-family: 'Armata', sans-serif; <----- Ändra typsnitt på texten "Sök i bloggen".
text-transform: uppercase; 
}


FAQ

Kategori: FAQ
Varför syns inte hela min blogg på mobilen?
Svar: Bloggen är troligvis inte mobilanpassad så att hela bloggen ska synas. Om du klickar på Kugghjulet -> Inställningar -> Mobilt hittar du inställningar angående bloggens utseendet på mobilen.

Jag hittar inte rätt i min stilmall/kodmall?
Svar: Om du går in i din stilmallen/kodmallen och klickar var som helst i mallen och sedan trycker på "Ctrl" och "F" så kommer det upp en sökruta. Där i kan du sedan skriva i t.ex. "navheader". Då kommer det/dem orden att bli markerar i sin stilmall/kodmall. Har du IMac/Macbook använder "CMD" och "F" istället !

Om man vill ta bort headern och bara ha en text, hur gör man då?
Svar: Ändra headern färgen till samma färg som din bakgrundsfärg på bloggen. Och ha sedan header texten i en annan färg.

Hur tar jag bort den fula linjen mellan inläggen?
Svar: Läs det här inlägget för att ta bort linjen. 


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