Bloggdesign tips | Menyn

 
Jag hade tänkt visa ett enkelt sätt att få in sin instagram i menyn. Jag har ett bildspel i min meny just nu som visar en bild i taget och visar mina instagram bilder. 
 
Jag använder mig av stilmallen som heter Basic (tidigare kallad Fashion). 
  • Börja med att gå in på snapwidget.com.
  •  Tryck sedan på "Get Your Free Widget". Så lär du komma hit ↓
  •  Jag har nu valt "Widget Type" Slideshow, vilket gör att en bild visas i taget.  "Thumbnail Size" är alltså hur stor den blir och jag använder samma bredd som jag har på min meny på bloggen.  Det är bara att trixa och prova sig fram och kan kolla på resultatet genom att kolla "Preview".
  • När du är klar trycker du "Get Widget".  Då ska det komma upp en ruta med en kod, kopiera denna koden. 
  • Nu går du in på din blogg → Design → Redigera HTML → Startsida
  • Om du vill att menyn ska hamna i menyn letar ni upp   <div id="side">.
  • Jag har min widget efter "Senaste inläggen".  Om ni vill ha den där lägger ni den här. 

<div class="navheader">Senaste inläggen</div>
<ul>
{% for entry in blog.entries[:20] %}
<li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
{% endfor %}
</ul>

 

LÄGG KODEN HÄR

 

<div id="profile">

{% if profile %}
<h4>Om</h4>
<a href="http://profile.publishme.se/profile/view/{{ profile.id }}/"><img class="thumbnail" src="{{ blog.blog_path }}profile.jpg" alt="Min profilbild" /></a>
<p><a href="http://profile.publishme.se/profile/view/{{ profile.id }}/"><span style="font-weight:bold"> {{ profile.name }}</span></a></p>
<p>{{ profile.description }}</p><br />
{% endif %}

 

Sen är det bara att testa sig fram. Lycka till!

Designtips-Scroll to Top "Knapp"

Ett jätte enkelt designtips är att lägga till en "Scroll to top" knapp på in blogg. Är smidigt och bra när mascrollat långt ner på bloggen. 
 
  1. Gå in på http://www.scrolltotop.com.
  2. Välj en av "knapparna" du tycker om.
  3. Kopiera texten som är i rutan brevid "knappen". 
  4. Gå in i kodmallen 
  5. Klistra in texten just ovanför </body> 
  6. Publicera och sen är det klart.
Några av mina favoriter.
 

Designtips - Ta bort mellanrummen mellan bilderna.

Nu ska jag visa er hur ni tar bort mellanrummen mellan bilderna.
Att istället för att det ska se ut så här:
 
Kommer det se ut så här:
 
Det blir både snyggt och är mycket lätt att göra.
1. Gå in i stilmallen
2.Leta reda på .image { 
3. Ändra sedan ALLA "px" i "margin" och "padding" till "0px 
Om du inte hittar .image {  klistrar du in den här koden.
image {
border: 0px solid #CCCCCC;
background-color:#FFFFFF;
padding:0px;
margin: 0px 0px 0px 0px;
}
 
 


RSS 2.0