Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse
Lägg in header på Blogg.se

Lägg in header på Blogg.se

Det är ganska enkelt att lägga in en header på Blogg.se. Men eftersom det finns massor av olika stilmallar att använda sig av på blogg.se nu, och när man ska lägga in en egen header, så är det inte alltid självklart hur man gör. Vissa steg är lika oavsett vilken stilmall du har, men sen kan koderna i stilmallen se lite olika ut.

Så, jag har tänkt att jag visar er hur man gör de steg som är likadana, sen får ni välja vilken stilmall ni utgår ifrån och så får ni följa stegen sen efter det.

Än så länge har jag valt att bara visa hur man gör på de stilmallar som är gratis. Ni som har PRO får vänta lite till!

Det här inlägget har jag lagt ner massor av tid på, så vill ni dela det här inlägget på Facebook, länka till det på er egen blogg osv, då blir jag väldigt tacksam!

Det absolut första du ska göra är ju att skapa din egen header, och storleken på den varierar beroende på vilken stilmall du utgår ifrån, så du får testa dig fram lite allteftersom tills det att du hittar rätt storlek.

När du har skapat din header, då gör du så här:

1. Logga in på din blogg.

2. Ladda upp din bild på din blogg. Klicka på Arkiv -> Bilder och sen väljer du din bild, antingen genom att dra och släppa eller via gamla hederliga vägen då du söker dig fram till bilden.

ny header på blogg se 1

3. Välj nu vilken storlek bilden har. Om du har en header om är 650px bred, då måste du välja en bredd på över det, dvs minst 700px. Om du väljer 600px, då kommer din bild att förminskas med automatik.

Klicka sen på starta uppladdningen.

ny header på blogg se 2

4. Nu har du laddat upp bilden, och skall nu kopiera adressen till bilden, det gör du genom att hålla muspekaren över bilden, och sen kopiera adressen för Fullstor bild.

ny header på blogg se 3

5. Håll nu ner knappen Alt och tryck på Design när menyn kommer upp.

6. Klicka på Redigera stilmall.

ny header på blogg se 5

7. Nu skall du välja vilken stilmall du har, klicka på den stilmall du har, så kommer du till fortsättningen sen.

Silentium

Bilden som finns har storlek 1000 x 217px.

1. Klicka på redigera kodmallar.

2. Leta upp följande kodrad:

<img id=”headerimg” src=”http://static.blogg.se/themes/silentium/bg.jpg” />

Byt ut adressen (markerad med rött ovan) mot adressen som du kopierade i steg 4.

3. Spara din kodmall och upprepa stegen i de övriga kodmallarna.

 

El Classico

1. Kopiera följande kod:

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://creativecommons.org/licenses/MIT/	*/

/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

/*		Default Layout: 992px.
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	font:16px/1.7em Helvetica, Arial, Sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family:&amp;amp;amp;amp;amp;amp;amp;amp;quot;Francois One&amp;amp;amp;amp;amp;amp;amp;amp;quot;, Arial, Sans-serif;
	line-height:1.3em;
	font-weight:normal;
}

a {
	color:#06c;
	text-decoration:none;
}

a:hover {
	color:#0e5295;
	text-decoration:underline;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}

p {
	margin:.5em 0 .75em 0;
}

#wrapper {
	width:980px;
	margin:0px auto;
	overflow:auto;
}

header {
	border-bottom:1px solid #dbdbdb;
	padding:20px;
	text-align:center;
	margin:0 0 20px 0;
}

header h1 {
	font-size:48px;
}

header h2 {
	font-family:Georgia, Serif;
	font-weight:normal;
	color:#999;
	font-style:italic;
}

header h1 a {
	color:#333;
	text-decoration:none;
}

#content {
	float:left;
	width:600px;
	padding-right:20px;
	border-right:1px solid #dbdbdb;
	margin-right:19px;
	margin-bottom:20px;
}

#content h3 {
	font-size:28px;
}

.post {
	margin:0 0 15px 0;
	border-bottom:1px solid #dbdbdb;
	padding-bottom:15px;
}

.post:nth-last-child(1) {
	border-bottom:none;
}

.post h3 a {
	color:#333;
	text-decoration:none;
}

.post img.thumbnail {
	float:left;
	margin:5px 20px 0 0;
	border:1px solid #dbdbdb;
	padding:6px;
}

.post img.image {
	margin:15px 0;
	max-width:600px;
}

p.meta {
	line-height:1.5em;
	color:#999;
	padding:10px 0;
	font-size:0.9em;
}

#tailsweep-div-midContent {
 	display:none;
}

#comment_anchor {
	float:right;
}

.post ul {
	list-style-type:disc;
	padding:0 0 0 20px;
	margin:.5em 0 .75em 0;
}

#comment h3:nth-child(1) {
	margin-top:0;
}

#comment fieldset {
	border:1px solid #dbdbdb;
	padding:10px;
}

#comment legend {
	font-weight:bold;
	font-size:18px;
}

#comment dl dt {

}

#comment dl dt label {
	font-weight:bold;
}

#comment dl dd {
	margin-bottom:20px;
}

#comment dl dd em {
	margin-left:10px;
	font-size:12px;
	color:#666;
}

#comment h3, #comment h4 {
	margin:.5em 0;
}

#comment .commenttext {
	border-bottom:1px solid #dbdbdb;
	padding:0 0 20px 0;
}

#comment input[type=text], #comment textarea {
	width:340px;
	padding:6px;
	border:1px solid #ccc;
	font-size:14px;
}

#comment textarea {
	height:180px;
}

.formbutton {
	color:#fff;
	padding:8px 16px;
	font-size:14px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	border: solid 1px #7ea02c;
	background: #c9de96; /* Old browsers */
	background: -moz-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
}

#side {
	float:left;
	width:340px;
}

#form-wrapper {
	position:relative;
}

#criteria {
	width:318px;
	border:1px solid #dbdbdb;
	padding:9px;
}

#search_btn {
	position:absolute;
	right:1px;
	top:1px;
	background:#f5f5f5;
	padding:8px 12px;
	margin-left:-2px;
	color:#555;
	border:1px solid #fff;
	background: #e6f3ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#e6f3ff), to(#afcbe7));
	background: -moz-linear-gradient(top,#e6f3ff,#afcbe7);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6f3ff',endColorstr='#afcbe7');
}

#search_btn:hover {
	color:#fff;
	background: #d0e8ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#d0e8ff), to(#76a1cb));
	background: -moz-linear-gradient(top,#d0e8ff,#76a1cb);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0e8ff',endColorstr='#76a1cb');
}

#side section {
	margin:0 0 5px 0;
	border-bottom:1px solid #dbdbdb;
	padding:15px 0;
}

#side section:nth-last-child(1) {
	border-bottom:none;
}

#side section h4 {
	margin:0 0 0.75em 0;
}

#side section ul {
	list-style-type:disc;
	padding:0 0 0 20px;
}

#side section ul li {
	font-size:0.9em;
}

#side section ul.services {
	list-style-type:none;
	padding-left:0px;
}

#side section ul.services li {
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:20px;
}

.rss {
	background-image:url(img/icons/social/feed.png);
}

.facebook {
	background-image:url(img/icons/social/facebook.png);
}

.twitter {
	background-image:url(img/icons/social/twitter.png);
}

footer {
	text-align:center;
	background-color:#f7f7f7;
	border-top:1px solid #dbdbdb;
	padding:20px;
	color:#bbbbbb;
	font-size:.85em;
}

footer a {
	color:#999;
}

footer a:hover {
	color:#666;
	text-decoration:none;
}

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {

	body {

	}
}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {

	body {
		width:292px;
		margin:0px auto;
	}

	#wrapper {
		width:292px;
		margin:0px auto;
		overflow:auto;
	}

	#content, #side {
		width:292px;
		float:none;
	}

	.post img.image {
		margin:15px 0;
		max-width:292px;
	}

	header h1 {
		font-size:24px;
	}

	header h2 {
		font-family:Georgia, Serif;
		font-weight:normal;
		color:#999;
		font-style:italic;
		font-size:14px;
	}

	#content h3 {
		font-size:18px;
	}

	#comment .commenttext {
		border-bottom:1px solid #dbdbdb;
		padding:0 0 20px 0;
	}

	#comment input[type=text], #comment textarea {
		width:250px;
		padding:6px;
		border:1px solid #ccc;
		font-size:14px;
	}

	.post iframe {
		max-width:292px;
	}

	#comment textarea {
		height:180px;
	}

}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	body {
		width:460px;
		margin:0px auto;
		font:14px/1.5em Helvetica, Arial, Sans-serif;
	}

	#wrapper {
		width:460px;
		margin:0px auto;
		overflow:auto;
	}

	#content, #side {
		width:460px;
		float:none;
	}

	.post img.image {
		margin:15px 0;
		max-width:460px;
	}

	.post iframe {
		max-width:460px;
	}

}

2. Ersätt allt som står i stilmallen med koden ovan.

3. Leta upp kodavsnittet som ser ut så här:

header {
border-bottom:1px solid #dbdbdb;
padding:20px;
text-align:center;
margin:0 0 20px 0;
}

Ersätt det med följande kod:

header {
background: #ffffff url(adressen till din bild här) no-repeat center center;
border-bottom:1px solid #dbdbdb;
padding:20px;
text-align:center;
margin:0 0 20px 0;
}

Där det står adressen till din bild, lägger du in adressen du kopierade i steg 4. Sen sparar du din stilmall.

 

Anchor, Author

1. Leta upp följande kodavsnitt i stilmallen:

div#header {
float: left;
clear: left;
display: inline;
padding: 0 20px 20px 20px;
border-bottom: 1px solid #ddd;
width: 710px;
}

2. Ersätt den med följande kod istället:

div#header {
background: #ffffff url(adressen till din bild här) no-repeat center center;
float: left;
clear: left;
display: inline;
padding: 0 20px 20px 20px;
border-bottom: 1px solid #ddd;
width: 710px;
}

3. Klicka på publicera ändringar.

 

Travel

Storleken på headern i denna stilmall är 800 x 105px.

1. Leta upp följande kod i stilmallen:

#header {
background: #FFFFCC url(http://static.blogg.se/shared/img/css/travel_top.jpg) no-repeat left top;
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px;
width: 800px;
height: 105px;
}

2. Byt ut adressen som är rödmarkerad till adressen för din bild som du kopierade i steg 4.

3. Klicka på Publicera ändringar.

 

Pink Fusion

1. Kopiera följande kod.

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://creativecommons.org/licenses/MIT/	*/

/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

/*		Default Layout: 992px.
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	font:16px/1.6em Georgia, Serif;
	background:url('https://static.blogg.se/themes/pink-fusion/img/body-bg.png');

}

h1, h2, h3, h4, h5, h6 {
	line-height:1.6em;
	font-weight:normal;
}

a {
	color:#06c;
	text-decoration:none;
}

a:hover {
	color:#0e5295;
	text-decoration:underline;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}

p {
	margin:.5em 0 .75em 0;
}

#header-nav {
	width:100%;
	position:fixed;
	background: #50dcff; /* Old browsers */
	background: -moz-linear-gradient(top, #ff99ff 0%, #cc66cc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff99ff), color-stop(100%,#cc66cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff99ff 0%,#cc66cc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff99ff 0%,#cc66cc 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ff99ff 0%,#cc66cc 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff99ff', endColorstr='#cc66cc',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ff99ff 0%,#cc66cc 100%); /* W3C */
	z-index:10000000000000000000;

	-moz-box-shadow: 0 8px 10px #000;
	-webkit-box-shadow: 0 8px 10px #000;
	box-shadow: 0 8px 10px #000;
	padding:8px;
}

#header-nav nav {
	margin:0px auto;
	width:980px;
	position:relative;
}

#header-nav nav ul {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}

#header-nav nav ul li {
	display:inline-block;
	padding: 0px 12px;
}

#header-nav nav ul li:nth-child(1) {
	padding-left:0px;
	font-family:Georgia;
}

#header-nav a {
	color:#fff;
}

#header-nav .services {
	list-style:none;
	position:absolute;
	right:10px;
	top:0px;
}

#header-nav .services li {
	display:inline-block;

}

#home_nav {
	text-shadow: 1px 1px 1px #333; /* horizontal-offset vertical-offset 'blur' colour */
	-moz-text-shadow: 1px 1px 1px #333;
	-webkit-text-shadow: 1px 1px 1px #333;
	font-weight:bold;
}

#home_nav:hover {
	text-decoration:none;
}

#header-nav form {
	float:right;
}

#wrapper {
	width:980px;
	margin:0px auto;
	overflow:auto;
	padding-top:40px;
	background:#333;
	background:hsla(0, 100%, 0%, .6);
}

header {

	padding:20px 0 0 0;
	text-align:center;
}

header h1 {
	font-size:48px;
}

header h2 {
	font-family:Georgia, Serif;
	font-weight:normal;
font-size:1.1em;
	color:#999;
	font-style:italic;
padding:0 40px;
}

header h1 a {
	color:#cc66cc;
	text-decoration:none;
}

header h1 a:hover {
	color:#ff99ff;
	text-decoration:none;
}

#content {
	padding:40px 40px 0 40px;
}

#content h3 {
	font-size:28px;
}

.post, #comment {
	margin:0 0 40px 0;
	border:1em solid #ddd;
	color:#333;
	padding-bottom:15px;
	background:#fff;
	padding:40px;
}

.post:nth-last-child(1) {

}

.post h3 a {
	color:#333;
	text-decoration:none;
}

.post img.thumbnail {
	float:left;
	margin:5px 20px 0 0;
	border:1px solid #dbdbdb;
	padding:6px;
}

.post img.image {
	margin:15px 0;
	max-width:600px;
}

p.meta {
	line-height:1.5em;
	color:#999;
	padding:10px 0;
	font-size:0.9em;
}

#comment_anchor {
	float:right;
}

.post ul {
	list-style-type:disc;
	padding:0 0 0 20px;
	margin:.5em 0 .75em 0;
}

#comment h3:nth-child(1) {
	margin-top:0;
}

#comment fieldset {
	border:1px solid #dbdbdb;
	padding:10px;
}

#comment legend {
	font-weight:bold;
	font-size:18px;
}

#comment dl dt {

}

#comment dl dt label {
	font-weight:bold;
}

#comment dl dd {
	margin-bottom:20px;
}

#comment dl dd em {
	margin-left:10px;
	font-size:12px;
	color:#666;
}

#comment h3, #comment h4 {
	margin:.5em 0;
}

#comment .commenttext {
	border-bottom:1px solid #dbdbdb;
	padding:0 0 20px 0;
}

#comment input[type=text], #comment textarea {
	width:340px;
	padding:6px;
	border:1px solid #ccc;
	font-size:14px;
}

#comment textarea {
	height:180px;
}

.formbutton {
	color:#fff;
	padding:8px 16px;
	font-size:14px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	border: solid 1px #7ea02c;
	background: #c9de96; /* Old browsers */
	background: -moz-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
}

#side {

}

#form-wrapper {
	margin:0 10px 0 0;
	padding:0;
}

#criteria {
	width:180px;
	border:none;
	padding:5px;
}

#search_btn {

}

#side {
	padding:0 40px 40px 40px;
	width:900px;
	overflow:auto;
}

#side section:first-child {
	border-top:1em solid #ddd;
}

#side section {
	background:#fff;
	border-left:1em solid #ddd;
	border-right:1em solid #ddd;
	border-bottom:1px solid #dbdbdb;
	padding:15px;
}

#side section:nth-last-child(1) {
	margin-right:0px;
	border-bottom:1em solid #ddd;
}

#side section h4 {
	margin:0 0 0.75em 0;
}

#side section ul {
	list-style-type:disc;
	padding:0 0 0 20px;
}

#side section ul li {
	font-size:0.9em;
}

#side section ul.services {
	list-style-type:none;
	padding-left:0px;
}

ul.services li {
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:20px;
}

.rss {
	background-image:url(https://static.blogg.se/themes/pink-fusion/img/icons/social/feed.png);
}

.facebook {
	background-image:url(https://static.blogg.se/themes/pink-fusion/img/icons/social/facebook.png);
}

.twitter {
	background-image:url(https://static.blogg.se/themes/pink-fusion/img/icons/social/twitter.png);
}

footer {
	text-align:center;
	padding:20px;
	font-size:.85em;
}

footer a {
	color:#999;
}

footer a:hover {
	color:#666;
	text-decoration:none;
}

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {

	body {

	}
}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {

	body {
		width:292px;
		margin:0px auto;
	}

#header-nav {
/*display:none;*/
margin-left:-15px;
}

	#wrapper {
		width:292px;
		margin:0px auto;
		overflow:auto;
padding-top:0px;

	}

	#content, #side, #comment {
padding:15px;
		width:262px;
		float:none;
	}

.post {
padding:10px;
margin-bottom:10px;
}

	.post img {
		margin:15px 0;
		max-width:292px;
	}

	header h1 {
		font-size:24px;
	}

	header h2 {
		font-family:Georgia, Serif;
		font-weight:normal;
		color:#999;
		font-style:italic;
		font-size:14px;
	}

	#content h3 {
		font-size:18px;
	}

	#comment .commenttext {
		border-bottom:1px solid #dbdbdb;
		padding:0 0 20px 0;
	}

	#comment input[type=text], #comment textarea {
		width:185px;
		padding:6px;
		border:1px solid #ccc;
		font-size:14px;
	}

fieldset {
border:none;
padding:0px;
}

	.post iframe {
		max-width:292px;
	}

	#comment textarea {
		height:180px;
	}

}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	body {
		width:460px;
		margin:0px auto;
	}

	#wrapper {
		width:460px;
		margin:0px auto;
		overflow:auto;
	}

	#content, #side {
		width:430px;
		float:none;
	}

	.post img.image {
		margin:15px 0;
		max-width:410px;
	}

	.post iframe {
		max-width:410px;
	}

}

2. Ersätt allt som står i stilmallen med koden ovan.

3. Leta upp följande kodrader:

header {

padding:20px 0 0 0;
text-align:center;
}

4. Ersätt med följande kod:

header {
background: url(adressen till din bild) no-repeat center center;
padding:20px 0 0 0;
text-align:center;
}

5. Där det står adressen till din bild lägger du in adressen du kopierade i steg 4.

6. Klicka på Publicera ändringar.

 

Dusty Rose

Storleken på denna header är 600 x 300px.

1. Leta upp följande kod i stilmallen:

#header {
background: url(http://static.blogg.se/themes/dusty-rose/img/header_174341815.jpg) no-repeat left top;
margin: 0px 0px 30px;
padding: 0px 0px 0px 0px;
height: 300px;
width: 600px;
text-align: left;;
}

2. Byt ut adressen som är markerad med rött till adressen du kopierade i steg 4, dvs din egen header.

3. Klicka på Publicera ändringar.

 

Retro red, Retro blue

1. Leta upp följande kod:

#header {
background: #FFFFFF;
margin: 0px;
padding: 10px 0px 40px;
height: 90px;
text-align: left;
border: #000000;
}

2. Ersätt den med följande kod:

#header {
background: #FFFFFF url(adressen till din bild) no-repeat center center;
margin: 0px;
padding: 10px 0px 40px;
height: 90px;
text-align: left;
border: #000000;
}

3. Där det står adressen till din bild lägger du in adressen du kopierade i steg 4.

4. Klicka på Publicera ändringar.

 

Orange City, Nature

Storleken på headern:

Orange city: 790 x 126

Nature: 800 x 120

1. Leta upp följande kod i stilmallen.

#header {
background: #000000 url(http://static.blogg.se/shared/img/css/orangecity_top.jpg) no-repeat left top;
margin: 0px;
padding: 37px 0px 0px 100px;
height: 90px;
text-align: left;
border-top: 0px none;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}

2. Byt ut adressen som jag markerat med rött till adressen du kopierade i steg 4.

3. Klicka på Publicera ändringar.

 

Mr. Andersson, Bubblegum

1. Leta upp följande kod i din stilmall:

#header {
width: 760px;
background: #000;
border:1px solid #999;
padding: 12px 12px 12px 12px;
margin: 0px 0px 7px 0px;
voice-family:”\”}\””;
voice-family:inherit;
width:726px;
}html>body #header { width: 726px; }

2. Ersätt den koden med följande kod:

#header {
width: 760px;
background: #000 url(https://cdn.publishdev.se/cdn/5-2/353660/images/2012/headerblogg_4ffacf44ddf2b37132000659.png) no-repeat center center;
border:1px solid #999;
padding: 12px 12px 12px 12px;
margin: 0px 0px 7px 0px;
voice-family:&amp;amp;amp;amp;amp;amp;amp;amp;quot;\&amp;amp;amp;amp;amp;amp;amp;amp;quot;}\&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;quot;;
voice-family:inherit;
width:726px;
}html&amp;amp;amp;amp;amp;amp;amp;amp;gt;body #header { width: 726px; }

3. Där det står adressen till din bild lägger du in adressen du kopierade i steg 4.

4. Klicka på Publicera ändringar.

 

Love, Food, Fashion

1. Leta upp följande kod:

#header {
margin:0px;
background: #FFFFFF url(http://static.blogg.se/shared/img/css/love_heading.gif) no-repeat center;
padding: 26px 12px 0px 120px;
height: 74px;
width: 712px;
}

2. Byt ut den rödmarkerade adressen till adressen du kopierade i steg 4 dvs din egen header.

3. Klicka på Publicera ändringar.

 

Kottkesque

1. Leta upp följande kod:

#header {
background: #9FFF80;
padding-left: 30px;
padding-bottom:5px;
padding-top:20px;
margin: 0px;
border-bottom:1px dashed #000;
}

2. Ersätt den koden med följande kod:

#header {
background: #9FFF80 url(adressen till din bild) no-repeat center center;
padding-left: 30px;
padding-bottom:5px;
padding-top:20px;
margin: 0px;
border-bottom:1px dashed #000;
}

3. Där det står adressen till din bild lägger du in adressen som du kopierade i steg 4.

4. Klicka på Publicera ändringar.

 

Flowers

1. Leta upp följande kod:

#wrapper {
clear:none;
margin: 30px auto;
padding: 150px 0px 20px;
width: 800px;
background-color: #FFFF91;
background-image:url(http://static.blogg.se/shared/img/css/flowers_top.jpg);
background-repeat: no-repeat;
background-position: left top;
}

2. Ersätt den rödmarkerade adressen med adressen som du kopierade i steg 4.

3. Klicka på Publicera ändringar.

 

Bloom

1. Leta upp följande kod:

#header {
margin:0px auto;
background: transparent;
padding: 12px 12px 12px 12px;
}

2. Ersätt koden ovan med följande kod:

#header {
margin:0px auto;
background: #ffffff url(adressen till din bild) no-repeat center center;
padding: 12px 12px 12px 12px;
}

3. Där det står adressen till din bild så lägger du in adressen du kopierade i steg 4.

 

Simply Black

1. Leta upp följande kod:

#wrapper > header {
background: #000;
color: #fff;
text-align: center;
padding: 70px 0 45px 0;
margin: 0 0 50px 0; }

2. Ersätt ovanstående kod med följande kod:

#wrapper &amp;amp;amp;amp;amp;amp;amp;amp;gt; header {
background: #000 url(adressen till din bild) no-repeat center center;
color: #fff;
text-align: center;
padding: 70px 0 45px 0;
margin: 0 0 50px 0; }

3. Där det står adressen till din bild så lägger du in adressen till din bild som du kopierade i steg 4.

4. Klicka på Publicera ändringar.

Grundare av Designa Din Blogg. Drev den här sidan som ett hobbyprojekt under åtta år, numera har jag lämnat över ansvaret för DDB. Är pappa till Ludvig och make till Elin.

Läs mina andra inlägg

113 comments

  1. Svarajulia

    hej!
    oavsett hur nogrant jag gör så funkar det inte att lägga in en header på samma sätt! vad gör jag för fel??

      1. Sophie

        Har samma problem.
        Har inte glömt någon parantes,
        och har även upptaderat. ( F5 )

        vad gör jag? ingen ny header syns.. har ingen header alls nu!

  2. SvaraEngla

    Jag kan se headern när jag klickar på “spara ändringar” då öppnas bloggen och det är en förhandsgranskning (det står stäng föörhandsgranskning”) men sen när jag klckar på förhandsgranska så händer ingenting och man ser inte headern när man går in på ngn annan data!

  3. SvaraJohanna

    Inget fungerar på simple black, jag är hundra på att jag gör som det står. Jag kan inte ens sätta in någon header eller flytta datumet. Bajs!

  4. SvaraMejva

    Skulle du kunna göra en liten lätt tutorial på hur man ändrar i side på temat silentium? Hur jag än vrider och vänder på det lyckas jag ändå inte komma på hur man ändrar storlek på texten i side eller liknande. Skulle vara mycket uppskattat då det inte finns några andra tips eller tutorials på silentium än!

  5. SvaraJosefin

    Hej. När jag satte in headern så blev den så lite fast jag ändrade storleken. Den blev inte så stor som “rutan” där headern varit!!

  6. SvaraJulia

    Jag har bloggdesignern Dusty Rose och där bilden på löven är vill jag byta till en egen bild, hur gör jag då?

  7. SvaraElina

    Hej, asså finns det inget lättare sätt att sätta in en header? Det såg jättejobbigt ut det som du har berättat här, och det funkar heller inte. 🙁
    Kan man inte göra som på gamla blogg.se elr nåt?

  8. SvaraDonnii

    När jag försöker lägga in/ändra någonting så markerar piltangenten fel text jag tänker markera! Sedan när jag försökte klistra in något så hamnar det på fel ställe (då jag ändrar på background till wrappern).

  9. Svarastella

    Tack så jättemycket för att du tar dig tid att lära ut grunderna i design. Det är väldigt uppskattat och alla inlägg har hjälpt mig väldigt mycket 🙂

  10. SvaraEmmy

    Hej! Tack så hemskt mycket för att du gör sådana här kanon bra inlägg om design. Men jag har ett problem, jag vill jätte gärna byta ut min header, och jag har gjort som det står, men det fungerar inte alls. Det blir bara konstigt.

  11. SvaraAmanda

    Fixade det galant, gick jättebra, tack så mycket! Ni andra: Ni måste vara nogranna och verkligen läsa ordentligt, är ni slarviga så går det åt skogen!

  12. Svaralovejoy Mendoza

    min förra header försvann och blivit ersatt av en líten fyrkantig ruta med en ex i mitten…varför?? :O

  13. SvaraMelina

    Jag har lagt upp en header men när jag går till bloggen syns den inte, men när jag förhandsgranskar ser jag den förstår inte vad jag har gjor för fel.Har provat att trycka på F5 knappen.

  14. SvaraMimmi och Emma

    Hejsan!
    Har gjort som det står i designen (Simple Black) men man kan inte se hela vår header.Går det att fixa?

    Tacksam för svar!/Emma och Mimmi

  15. SvaraTina

    Asså, hela min header syns inte, den är täckt med en rand längst upp, hur ordnar jag så att hela syns?

    Tack på förhand

  16. SvaraLinda

    Hej! Jag hjälper en kompis att fixa sin header. Har fått lite ordning på den iaf. Men en fråga, hur får jag bort texten som kommer rakt över headern? Alltså där bloggnamnet står?

    Tack för en bra sida!

    1. SvaraFelix

      Hitta och ta bort följande från kodmallen:

      &lt;h1&gt;&lt;a href=&quot;{{ blog.url }}&quot;&gt;{{ blog.title }}&lt;/a&gt;&lt;/h1&gt;
      
  17. SvaraWilm

    Hej, skulle gärna vilja ha så man kan klicka på “Tidigare inlägg” på bloggen, så det är lättare att hitta ett inlägg.
    Gör gärna ett inlägg om det och jag har nya blogg.se

  18. SvaraPrivat

    Hej! Taaack så mycket för att du har tagit dig tid att göra detta, har tittat runt på jättemånga sidor för att se hur man gör.. men inget fukar. Men det hör funkar galant, och det var ju enkelt! Tyckte det var en sån bra sida så jag länkade till den från min blogg. Ifall det är någon annan som behöver hjälp med detta så hoppas jag verkligen att dom hittar hit! Tack!

  19. Svarahfjdkslö

    De spelar ingen roll om jag gör exakt som de står, preciiiis som de står. De funkar tamefan inte på de där jävla simply.

  20. SvaraJessica

    Jag har gjort allt under en hel dag men min bild som header kommer inte upp utan det kommer upp en liten ruta med ett kryss i och jag har prövat allt för att kunna ändra det så bilden kommer upp men funkar verkligen inte.
    Jag måste ha hjälp!!!
    Får förstår inte vad jag gjort för fel?

  21. Svaravonskareng

    jag försöker ordna med min systers blogg, med el classico, men “den nya koden” dyker inte upp efter att jag bytt ut hela stilmallen mot det som ska sättas in, och jag har publicerat ändringarna osv. 🙂 HJÄLP!

  22. SvaraSabina F

    Hej! Jag håller på och kodar enbloggomenryttare.blogg.se hon har orange city. Men headern jag vill lägga upp är längre, men inte bredare, än standard. Hur gör jag?

  23. SvaraCharlotte

    Asså det som visas på bilden funkar inte alls när jag gör det + mitt verkar ligga helt annorlunda :S. Jag har temat “dotty” men asså vill byta ut små bilderna men det funkar inte. Hur ska jag göra?

      1. Elin

        man kan inte bara byta ut dem eftersom det är ett collage som lagts in precis som en vanlig header. Du får göra ett eget collage som ser likadant ut och sedan lägga in den som Lari beskiver i inlägget! 🙂

  24. SvaraLinn

    Jag blir galen. jag har temat silentium och vill byta header och få bort den fula mattan. men när jag läser hur jag ska göra och ta bort en rad och ersätta så låter det lätt. men jag hittar inte raden. hjälp?!

  25. SvaraCajsa

    Har en fråga som du kanske kan visa hur man gör? 🙂
    Man kan ju nu ha en visningsbild på sin blogg och vissa har så att deras bild syns offentligt på andras bloggar i kommentarsfältet. hur gör man så att det funkar?

    Vet att du har mycket med din sjukdom just nu så jag önskar dig lycka till med det och du behöver ju inte visa hur man gör detta förrän du känner att du orkar. 🙂

    Kramar!
    Cajsa

  26. SvaraWildAlitha

    Hej! Är dessa koder för kodmallen eller? Den fria designen Pink Fusion har typ bara nån länk till var den kommer ifrån och lite tecken o så där i stilmallen, men inget med header, content, side osv. Bara kodmallen har dessa koder och tecken, så blir det den man ska anpassa sig ifrån då? Är väldigt newbie på den nya blogg.se 😛

  27. SvaraJosefine

    Hej!
    Jag har temat Simple Black på blogg.se men när jag har lagt in min nya header nu, så la sig den gamla överskriften ÖVER headern. Vad gör jag?? Tack 🙂

  28. SvaraLollo

    Jag har fått in min header men den blir lixom halv 🙁 Kolla: lollolindbergs.blogg.se
    Vore supertacksam för svar!!! 🙂

  29. SvaraNatasha

    Jag har ju en bloggdesign från dina gratisdesigner! Hur gör jag då?! Jag vågar inte förstöra något! :S Hur ska jag ändra header på den?

  30. SvaraLinda

    Jag har designen dusty rose och när jag bytte header så försvann den vita rutan som annars var runt inläggen? Det enda jag ändrade var alltså header, ngn som vet hur jag gör för att få tillbaka den vita rutan?

  31. SvaraYvonne

    Hej!
    Jag har problem med en testheader jag laddat upp på min blogg: den syns på alla sidor utom på startsidan.
    Jag får ingen hjälp av supporten på Blogg.se(de har inte tid, menar de vad man än behöver hjälp med och hänvisar hit).
    Jag har reggat mig på fixadinblogg.com men har ännu inte tillgång dit (måste godkännas av någon admin först, tror jag).

    Så, någon här som kan hjälpa mig med header-trasslet?
    / Yvonne

  32. SvaraYvonne

    Jag har en så’n där “skojig” header som syns på alla sidor utom på startsidan.
    Någon som har en idé om vad det kan bero på?

    Rådet jag fick från “supporten” på Blogg.se var att ta back-up på alla mallar och sedan återställa.

  33. SvaraJ

    Hej! Jag har simply black och jag klistrade in koden och allt fungerade jättebra, det enda problemet är att vissa rubriker blir mindre? Vad kan jag göra?

  34. SvaraMirja

    Hej! Jag har Simply black som bloggtema. Jag har fixat en snygg header men vill att den ska ta upp hela övre ytrymmet istället för de vit fälten som blir på var sida. Hur gör jag då? Tacksam för svar!

  35. SvaraHedvig

    Tack så jättemycket för hjälpen med det här! Nu har jag fått in en header på min retro blue! YES! Tack igen!
    ps. Kika gärna in och kolla @ hedvig.blo.gg

  36. SvaraJennifer

    Hej, när jag försöker göra som det står så snabbsöker jag på sidan, men koderna på blogg.se stämmer inte in med de som står i instruktionerna. Har de ändrat?

  37. SvaraMalin

    Jag använde första Silentium. Men headern hamnar åt vänster. Kan man göra så den hamnar mer i mitten och hur?

  38. SvaraEmma

    Hej! Jag har lagt in en header på Dusty rose, men hela headern kom inte med + att menyn blev jättekonstig!
    Jag vet inte vad jag har gjort för fel…
    Det är bara den nedre delen på hedern som fattas!
    Snälla hjälp

  39. SvaraEmma

    Men designen “Dotty” då? den har jag och det blir nåt konstigt fel när jag lägger in min header så jag skulle gärna vilja följa din mall.

  40. SvaraEmma

    Hej! Tack för inlägget, varit till stor hjälp!
    Har bara en fråga om hur man ändrar sin headers bredd samt höjd. Jag har temat silentium men tycker att höjden är för låg, hur ändrar man det?
    Tack!
    /Emma

    1. SvaraElin

      Ladda upp i större storlek, om du har laddat upp i tex. 800px, testa att ta 900px istället. Om headern är lagom åt ett håll men inte åt det andra, måste du ändra headern 🙂

      Var det så du menade?? Tror jag skrev rätt 🙂

      1. Clara

        Kära Elin, jag har också stilentium och istället för att ladda upp bilden på 700px så gör vi som har stilentium istället på 1000. c:
        Hoppas du fattar. 😛

      2. Elin

        Om bredden är för liten, laddar man upp i större storlek, ja. Och det är inte säkert att man vill ha den 1000 pixlar bred, faktiskt 🙂

      3. Elin

        Om man vill ha headern bredare ska man ladda upp bilden bredare. Inte säkert att man vill ha den 1000 pixlar bred, faktiskt 🙂

    2. SvaraElin

      Om man vill ha headern bredare ska man ladda upp bilden bredare. Inte säkert att man vill ha den 1000 pixlar bred, faktiskt 🙂

  41. SvaraKlara

    Jag har temat silentium men när jag ska försöka lägga in en egen header så blir den åt höger och väldigt liten.. vad gör jag för fel?

  42. SvaraValeria

    Jag har tema Cotton, men det står inget om den här. Och jag skulle vilja ändra en hel del i bloggdesign men på stilmall så finns det endast import url och headering. Kan ni berätta/skriva mera om tema cotton?

    1. SvaraElin

      Du har valt dem. Det är “teman”, och du kan ändra vid fliken “teman” som ligger bredvid fliken till stilmallen 🙂

  43. Svarasandra

    När jag har siletium ( stav) hittar jag img-header src saken men när jag tar tex bubbelgum eller love hittar jag ej den.HJÄÄLP

  44. SvaraMalin

    Jag har fått in en header, men får inte den storleken som behövs. Antingen blir den för liten eller för stor..
    HJÄLP?? HUR gör jag?

  45. SvaraMalin

    Jag har fått in en header, men får inte den storleken som behövs. Antingen blir den för liten eller för stor..
    HJÄLP?? HUR gör jag?

  46. SvaraStina

    Jag har följt instruktionerna hur noga som helst men nu är min header jätte liten, man ser bara halva bilden. Vad ska jag göra??

  47. SvaraEmma

    Ja, min blogg är förstörd. Skulle byta header och nu när jag lägger in header är det tomt. JAG PALLAR INTE, HJÄLP?!

  48. Svaraproblem

    Thanks for finally talking about >Bloggdesign | Designa Din Blogg –
    Lägg in en egen header på din blogg – Bloggdesign nya blogg.
    se <Loved it!

  49. SvaraLinnea

    Hej, i min kodmall för silentium finns inte koden med som man ska “leta upp” för att ändra sin header. Vad ska jag göra?

  50. SvaraLinda

    Jag har nyligen ändrat till “bokeh” temat men förstår inte alls koderna. Hur ändrar man tex storlek och typsnitt på rubrik och text i inläggen?

    Skulle vara så tacksam för svar!

  51. SvaraJulia

    Snääääääälla visa hur man lägger in en egen header på Tabula Rasa temat skulle vara så himla bra och snällt! 😀

  52. SvaraJosefin

    Jag blir vansinning. JAg får inte in en header i det här nya blogg möget och jag har aldrig haft problem med detta innan! Jag har hållt på nu i 3 dagar men lyckas inte 🙁 Vad gör jag för fel ?

  53. SvaraNathalie

    Hej!
    Koderna som du menar ska finnas till ”Simply Black” hittar jag varken i stilmall eller kodmall. Jag lyckas heller inte med att använda en gratisdesign. Allt blir bara bludder och tecken. Jag använder en MacBook. Kan det ha med saken å göra? I så fall, hur går jag tillväga?
    Tacksam för svar. Fantastiskt bra blogg!

    1. SvaraSanna Preifelt

      Jag ser att du lagt in plain white nu, om du har problem på din Mac att öppna dokumenten .txt som gratisdesignerna ofta är sparade i så beror det på att du inte har ställt in din textredigerare på att läsa HTML som den är, istället läser den HTML som kod och kodar upp det den förstår i ditt textdokument. Tryck på inställningar > spara & öppna (har jag för mig, fliken längst till höger i alla fall) och se till att översta rutan är bockad 🙂

      Koderna har ändrats en del sedan inlägget om hur man lägger in en egen header publicerades och vi jobbar på med den tid vi har att förnya inläggen till att stämma överens med både nya syntaxen och den gamla (i och med att de flesta gratisdesigner vi har här är gjord med gammal syntax).

  54. SvaraVenla

    Hej!
    Hur ändrar man den lilla bilden som ska vara en profilbild när kan kommer in på bloggen? Den som är ovan “info” texten om ens blogg.

  55. SvaraTherese Gustavsson

    Funderar på att byta till “Black&White” temat eftersom man kan ha panorama header på den. En sak jag inte förstår är varför det står att man kan ha högst 2000×2000 på själva headern och sen när man lägger in den kapas den ändå av på höjden och en del av headern förloras.

    1. SvaraTobbe Andersson

      Det står att man kan ha högst 2000*2000px stor bild för att om du sitter vid en dator som t.ex har större skärmupplösning så visas bilden i större format. Därav skalas den av eftersom du sitter vid en dator/enhet som är mindre än 2000*2000px 🙂

  56. SvaraTherese Gustavsson

    Såg längre ner att man kan välja att den ska vara max 350px hög men varför skriver dom då där uppe att den kan vara 2000? Inte för att man har en header som är så pass hög men man kanske har en som är 500? 🙂

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *