Det är ganska svårt att förklara hur man ska göra såvida man inte har en bra grund. Därav knåpade jag ihop en stilmall som har boxar på vänster sida. Om du har blogg.se standardversion som kodmall kommer din profilbild samt beskrivning komma upp automatiskt längst upp i designen (det ändrar du under inställningar > profil).

Jag rekommenderar att du gör detta i en testblogg (skapa en ny blogg och testa designen i den innan du lägger in den i din vanliga blogg).

1 ). Kopiera stilmallen nedan och klistra in den under design > stilmall (glöm inte att ta bort allting som finns där sen tidigare).

body {
margin: 0px;
padding:0px;
background: #cccccc;
}

a {color: #000000; text-decoration:none;}
a:hover {color: #6CA5FF;}

#wrapper {
clear:none;
margin: 20px auto;
padding: 0px;
width: 800px;
}

p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#header {
background: #ffffff url() no-repeat left top;
margin: 0px;
width: 800px;
height: 380px;
}

#side {
float: left;
width: 180px;
margin: 0px;
padding: 10px 0px 0px 0px;
}

#content {
background:#ffffff;
overflow: hidden;
width: 600px;
position:relative;
left:0px;
padding: 10px 0px;
voice-family:"\"}\"";
voice-family:inherit;
float: right;
margin: 10px 0px 0px 0px;
}

#header a {
color: #000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
}

h1 {
font-family: arial, verdana, sans-serif;
font-size: 1em;
font-weight: bold;
color: #000;
text-transform:uppercase;
margin: 0px;
padding: 0px;
}

h2 {
font-family: arial, verdana, sans-serif;
font-size: .7em;
font-weight: normal;
color: #333;
margin: 0px;
padding: 0px;
}

/** Entry headers **/
h3 {
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
padding: 0px 0px 10px 0px;
color: #000;
border-bottom:1px dashed #000000;
margin: 10px;
}

.navheader {
font-family:  Arial, Helvetica, Sans-serif;
font-size: 1em;
font-weight: bold;
color: #000000;
padding:5px;
background-color:#ffffff;
text-transform: uppercase;
}

.nav {
font-family: Arial, Helvetica, Sans-serif;
font-size: 0.7em;
font-weight: normal;
color: #000000;
}

.nav ul {
margin: 0px 0px 10px;
padding: 5px;
font-weight: normal;
background-color: #FFFFFF;
border: 0px solid #000000;
}

.nav li {
list-style: none;
padding: 0px 0px 2px 0px;
font-weight: normal;
}

.nav a { color: #000000; }
.nav a:hover { color: #6CA5FF; }

/** Post's body text **/
.entrybody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
line-height: 150%;
margin: 0px 0px 10px;
background-color: #FFFFFF;
padding: 5px 10px 10px 10px;
border: 0px solid #000000;
}

/** 'Posted by' txt **/
.entrymeta {
font-family: verdana, arial, sans-serif;
font-size: .65em;
font-weight: normal;
color: #666;
text-align:right;
}

.entrymeta a { color: #809FFF; }
.entrymeta a:hover { color: #6CA5FF; }

.commentheader {
font-family:  arial, helvetica, sans-serif;
font-size: .70em;
font-weight: bold;
background-color:#809FFF;
padding:5px;
color: #fff;
}

.commenttext {
font-family: verdana, arial, sans-serif;
font-size: .70em;
font-weight: normal;
color: #000;
line-height: 130%;
}

.commentmeta {
font-family: verdana, arial, sans-serif;
font-size: .65em;
font-weight: normal;
color: #999;
margin: 10px 0px 20px 0px
}

.commentmeta a { color: #809FFF; }
.commentmeta a:hover { color: #80FF9F; }

.commentform {
font-family: verdana, arial, sans-serif;
font-size: .70em;
font-weight: normal;
color: #333333;
margin: 0px 0px 20px 0px
}

.separator {
border-top: 0px solid #77B5F0;
border-bottom: 0px solid #77B5F0;
margin: 14px 0px 14px 0px
}

.default {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333;
font-weight: bold;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
}

.subside {
font-family: "Trebuchet MS" Verdana, Arial, Helvetica, Sans-serif;
font-size: .7em;
font-weight: normal;
padding: 0px 0px 0px 0px;
}

.xmlButton {
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px Verdana, Arial, Helvetica, Sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:0;
}

.image {
border: 0px dashed #4A6FFF;
background-color:;
padding:5px;
margin: 0px 6px 6px 0px;
}

.thumbnail {
border: 0px dashed #77B5F0;
background-color:;
padding:5px;
margin: 0px 6px 6px 0px;
}

.video{
padding: 0px 0px 0px 0px;
}

.fieldName{
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin: 0px 0px 12px 0px
}

select{
font-family: verdana, arial, sans-serif;
font-size: 11px;
}

/*****************************************************************************
* Calendar					                                                 *
*****************************************************************************/

#calendar {
color: #333333;
font-family: 'Trebuchet MS', Verdana, sans-serif;
padding: 10px;
text-align: center;
background-color: #FFFFFF;
border: 1px solid #000000;
margin-bottom: 12px;
}

#calendar table {
padding: 1px;
/*border-collapse: collapse;*/
border: 0px;
}

#calendar table caption {
color: #77B5F0;
font-family : Arial, Helvetica, Sans-serif;
font-size : 0.7em;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;
text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}

#calendar table th {
text-align: center;
font-weight: bold;
font-size: xx-small;
}

#calendar table tr td {
border: 1px solid #809FFF;
text-align: center;
font-size: xx-small;
}

#calendar table tr ul  {
color: #BBB;
list-style: dot;
margin: 0px 0px 0px 20px;
padding: 4 0 5 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.7em;
}

#calendar table tr td.cssDayMouseOver {
border: 1px dotted red;
cursor: hand;
}

#calendar table tr td.cssDayMouseOut {
border: 1px solid #809FFF;
}

#calendar table tr td.cssEntryBox {
border: 1px solid gray;
padding: 6px;
text-align: left;
background: #FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
}

#calendar table tr td ul li {
}

#calendar table tr td div.cssDayEntryHeader {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
text-align: left;
font-weight: bold;
padding: 4;
}

#calendar table tr td div.cssDayAvailable {
text-decoration: underline;
text-weight: bold;
}

form {
padding: 10px;
border: 0px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 10px;
}

#profile {
background-color: #FFFFFF;
border: 0px solid #000000;
padding: 10px;
margin-bottom: 12px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
}

#profile h4{
display: none;
}

#profile p{

}

2 ). Förhandsgranska stilmallen för att se hur resultatet blir.

3 ). Spara stilmallen. Nu kommer du ha en profilbild samt text längst upp i sidomenyn i en box :)

OBS! Om du vill lägga in egen information + text får man göra det manuellt i kodmallarna. Lägg in det under <div class="nav"> i varje kodmall.