Gratis arkivsida

För det första, om du vill koda själv kan du klicka på HTML, välja sida i en ruta som ska se ut som nedan och sedan börja koda! Men då måste du vara duktig på det, för det finns många siffror och tecken att hålla reda på. Personligen vet jag knappt något om kodning, jag kopierar mest autokoder.
För det andra tänkte jag ge er en annan kodning (en autokod igen såklart). Även denna är från min sida så om resultatet inte passar in på din blogg borde du testa något annat. Annars är det bara att klistra in:

{% extends "index" %}

{% block head %}
<title>{{ blog.title }} - {{ archive_page.name }}</title>
{{ macros.opengraph_entries(archive_page.name, blog, profile, entries) }}
{% endblock %}

{% block profile %}{% endblock %}

{% block side %}
<ul>
<li><a href="{{ blog.blog_path }}index.html" title="Gå till startsidan"><strong>Till bloggens startsida</strong></a></li>
</ul>
{% endblock %}

Jag hoppas verkligen att jag hjälper er när jag gör det här! Kommentera gärna vilken sida ni vill se härnäst, och vad ni tyckte om designen! Förresten, den här kodningen är för arkivsidan :)

Gratis stilmall

Hej! Vill du få en gratis stilmall av mig? Koda in detta bara! Ge gärna credit om du har en publicerad blogg som du vill ha designen till :) Du behöver inte fråga om lov men säg gärna till om du har använt den :)

/* Theme Dotty */
@import url("http://static.blogg.se/themes/dotty/style.css");
{{options.importstr}}

body {
background-color: {{options.color.background}};
background-image: {{options.image.background.urlsrc}};
}

.header-big { background-image: {{options.image.header.urlsrc}}; }
.header-small:first-of-type { background-image: {{options.image.header1.urlsrc}}; }
.header-small:nth-of-type(2) { background-image: {{options.image.header2.urlsrc}}; }
.header-small:nth-of-type(3) { background-image: {{options.image.header3.urlsrc}}; }
.header-small:nth-of-type(4) { background-image: {{options.image.header4.urlsrc}}; }
.header-small:nth-of-type(5) { background-image: {{options.image.header5.urlsrc}}; }
.header-small:nth-of-type(6) { background-image: {{options.image.header6.urlsrc}}; }

#header {
height: 346px;
}

.nav a, a, body, .nav, .commentmeta a:hover, .navheader, .commentheader, .commentmeta, .commentmeta a {
color: {{options.color.header}};
}

.entrybody, .commentform, .commenttext, #profile, #profile .info-profile, a:hover, .nav a:hover {
color: {{options.color.body}};
}

.social svg, #social svg { fill: {{options.color.header}}; }
#social { text-align: center; }
#social svg { border-radius: 50%; }

h1, h2, #header h1 a { color: {{options.color.background2}}; }
#side, #content, .header-wrap { background: {{options.color.background2}}; }

.avatar {
border-bottom: 1px solid {{options.color.border}};
border-top: 1px solid {{options.color.border}};
}

.navheader { border-bottom: 2px solid {{options.color.border}}; }

.commentheader { border: 1px solid {{options.color.border}}; }

.commenttext, .commentmeta {
border-bottom: 1px solid {{options.color.border}};
border-left: 1px solid {{options.color.border}};
border-right: 1px solid {{options.color.border}};
}

.response-by, .entrymeta { border-bottom: 1px solid {{options.color.border}}; }

.response, .response-by {
border-left: 1px solid {{options.color.border}};
border-right: 1px solid {{options.color.border}};
}

.dot { color: {{options.color.border}}; }

h3, .avatar, .commentheader {
background: {{options.color.border}};
}


h3, .navheader {
font-family: "{{options.gfont.heading.name}}", {{options.gfont.heading.fallback}};
}

h1 {
font-size: 2.2em;
height: 40px;
margin-left: 280px !important;
margin-top: 84px !important;
overflow: hidden;
width: 100%;
}

h1, h2, .nav, .entrybody, .commentheader, body, .commenttext, .commentmeta .response, .response-by, .commentform, select {
font-family: "{{options.gfont.body.name}}", {{options.gfont.body.fallback}};
}

h3 {
font-size: {{options.fontsize.heading}};
}

.navheader {
font-size: {{options.fontsize.header}};
}

.entrybody, .nav, .commentheader, .commenttext, h2, .response, .response-by {
font-size: {{options.fontsize.body}};
line-height: 140%;
}

.commentmeta, .commentform, select {
font-size: {{options.fontsize.body}};
}
.header-wrap { position: absolute; bottom: 7px; }
.header-right .header-wrap {width: 354px; right: 0; }

.like-container { float: left; margin-left: 5px; }
.likebtn { margin-right: 0px !important; }
.like-container .likebtn { margin-right: 0; }
.like-container .likebtn .likebtn__btn {
background: {{options.color.likebtn}} !important;
}
.like-container .likebtn.clicked .likebtn__btn {
color: {{options.color.likebtn}} !important;
background: white !important;
}

.entrymeta:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
line-height: 0;
}

Mobildesign

Hej! Nu kan du lära dig om mobilanpassning. Först av allt måste du aktivera mobilsajten om du inte redan har gjort det:
När du har klickat på "Spara" efteråt ska det komma upp en massa inställningar. Du kan börja med att fixa till din header. Det ser lite olika ut för olika teman (jag visade i förra inlägget hur du ställde in ett gratistema), men det ska se ut ungefär såhär:
Har du ett bra bloggnamn som du vill använda? Skriv in det i rutan högst upp! Sedan kan du välja färg eller bild för bakgrunden. Välj även rubrikens textfärg, typsnitt och textstorlek. Ja, du ser nog ungefär vad du ska göra.
Om du inte vet hur du ställer in färgerna visade jag det i förra inlägget. Nu är det dags för rubrikskuggan och menyikonen! Menyikonen är förresten den här:
Fixa till skuggan och färgen. Nu är det dags att börja jobba på inläggsdesignen! Det här är inte så komplicerat som det verkar. Börja med att välja färger:
Dom flesta vet nog redan det, men för dig som inte vet det så klickar man bara i rutan där det står t ex #ffffff och väljer härifrån:
Sedan kan du ta typsnitt, storlek och justering på inläggsrubriken och inläggstexten. Enkelt! Bara följ knapparna och prova dig fram med hjälp av "mobilen" till höger på din dataskärm ;)
Till sist kan du knappa in länkfärgerna:
Glöm inte att spara efteråt! Sparar man inte så sparas det inte ;)
Hoppas verkligen detta hjälpte! Det verkar komplicerat men det är egentligen ganska enkelt, bara följ stegen! Lycka till!