Samstag, 1. Juni 2013

FREE BLOGDESIGN!!! ( Artikel verschwinden im Header)

Hallo!
Da in letzter Zeit ein paar gefragt haben, wie wir unser Design gemacht haben. Wir haben es von www.blogskins.com und dann überarbeitet. Und nun weil wir mal wieder etwas Abwechslung in diesen reinen Fotoblog bringen wollen gibt es heute ein gratis Design! Bittet beachtet das dieses Design auch von www.blogskins.com ist und nur überarbeitet ist! Wenn ihr dieses Design verwenden wollt müsst ihr zu den Alten Vorlagen wechseln. Falls hier welche dabei sind die nicht wissen wie das geht:
Auf Vorlage→ nach unten scrollen → auf alte Vorlagen wechseln klicken → Code löschen der dort steht → diesen Code einfügen:

<html>
<title>DEIN SEITEN TITEL</title>
<!- lostcase made this. do not edit. 2012 (c) -->
<style>
body{
background: #fff;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

::selection{
background: #f7f7f7;
color: #555555;
}

a, a:hover{
color: #1b1b1b;
text-decoration: none;
}

table, tr, td{
text-align: justify;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

#navbar-iframe{
display: none;
}

.header{
padding: 5px;
width: 952px;
background: rgba(255,255,255, .9);
border-bottom: 2px solid #e9e9e9;
height: 100px;
}

.header .title{
text-align: center;
font-family: Times New Roman;
font-size: 18px;
font-style: italic;
color: #333;
text-align: center;
}

.header a{
font-size: 9px;
color: #333;
text-transform: uppercase;
}

.floatl{
display: inline-block;
float: left;
}

.credits{
display: inline-block;
float: right;
color: #626262;
}

.credits light, .credits light a, .credits light a:hover{
text-transform: lowercase;
color: #d8d8d8;
}

.post img{
max-width: 940px;
padding: 5px;
background: #f7f7f7;
border: 1px solid #e5e5e5;
}

.post .top{
margin-bottom: 15px;
margin-top: 30px;
border-bottom: 1px solid #e5e5e5;
height: 1px;
}

.post .top .title{
margin-top: -5px;
font-size: 10px;
font-family: Arial;
color: #333;
text-transform: uppercase;
line-height: 10px;
padding: 1px 5px 1px 1px;
background: #fff;
float: left;
display: inline-block;
margin-right: 10px;
}

.post .top .date{
margin-top: -10px;
font-size: 10px;
font-family: Arial;
color: #333;
text-transform: uppercase;
line-height: 10px;
padding: 1px 5px;
background: #fff;
display: inline-block;
}

.post .top a.comment, .post .top a.comment:hover{
margin-top: -5px;
font-size: 10px;
font-family: Arial;
color: #333;
text-decoration: none;
text-transform: uppercase;
line-height: 10px;
padding: 1px 1px 1px 6px;
background: #fff;
float: right;
display: inline-block;
}

blockquote{
padding: 7px 5px;
background: #f7f7f7;
border: 1px solid #e5e5e5;
max-width: 4000px;
text-align: center;
}

.fixed{
position: fixed;
width: 100%;
top: -5px;
left: 0px;
}
</style>
<body>

<center>
<table width=850>
<tr>

<!-- this is top part. navis stuff -->
<td width=45550 vAlign=bottom height=90>
</td>
<!-- end of top part -->

</tr>
<tr>

<!-- this is bottom part. blog stuff -->
<td width=950 vAlign=top class=post>

<blogger>
<div class="top">
<div class="title"><$BlogItemSubject$></div>
<div class="date"><BlogDateHeader> <$BlogDateHeaderDate$> </BlogDateHeader> </div>
<BlogItemCommentsEnabled><a class="comment" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> +</a></BlogItemCommentsEnabled>
</div>
<$BlogItemBody$>
<!--  end of bottom part -->
</blogger>
<OlderPosts><font color="#9933ff"><a href="<$OlderPosts$>">Ältere Posts </a><font color="#9933ff"></OlderPosts>
<NewerPosts><a href="<$NewerPosts$>">Neuere Posts</a></NewerPosts>

</tr>
</table>

<div class="fixed">
<table width=855>
<tr>

<!-- this is top part. navis stuff -->
<td width=5557 vAlign=bottom class=header>
<!-- AB HIER KOMMT DER KLEINE HEADER, DU KANNST DAS BILD LÖSCHEN ODER ÄNDERN WENN DU WILLST -->
<img style="width:1160px;position: center; padding-top:20px;" src="http://i43.tinypic.com/mh81vk.png">
<div class="title">Wie heißt dein Blog?</div>
<div class="floatl">
<a href="/">home</a> | <a href="HIER DEN LINK">Seite1</a> | <a href="HIER DEN LINK" target=_blank>Seite2</a> | 
<a href="http://www.blogger.com/follow-blog.g?blogID=HIERDEINENBLOGID" target=_blank>+ follow</a>
</div>
<div class="credits">
<a href="http://www.blogskins.com/me/lostcase">CREDIT</a> <light>( <a href="http://like-m-v.blogspot.com" title="blog">1</a> | 
<a href="Willst du irgendwas verlinken dann hier den Link!" title="facebook">2</a> | <a href="Willst du irgendwas verlinken dann hier den Link!" title="tumblr">3</a> )</light>
</div>

</td>
<!-- end of top part -->

</tr>
</table>
</div>
</center>

</body>

</html>

Wenn ihr genau ließt  , steht meistens schon da was dort hin muss. 
Für ein Live Preview : heyhehyh.blogspot.com
Das kann dann so aussehen :

Was ihr noch beachten müsst: Die Kommentarfunktion funktioniert NICHT, wenn ihr bei Einstellungen/Posts und Kommentare/Kommentarposition was anderes als Pop-Up Fenster habt. Also bitte Pop-Up Fenster einstellen. 

Was uns besonders an dem Design gefällt das alles auf die Bilder gerichtet ist also auch sehr gut für Fotoblogs. Das verschwinden im Header gibt dem ganzen, dann noch so einen "Pepp" :D 

Wir hoffen es gefällt euch!
Alles liebe Martha und Vivi <3

Kommentare:

HelenaHazard hat gesagt…

Gute Idee von euch und ihr könnt das echt gut :*
Liebe Grüße
www.fashionworldstuff.blogspot.com

Anonym hat gesagt…

Wie bekomme ich den Header *live the way...* weg? der nevt voll und so heißt ja nicht mein Blog. Und wie ersetze ich das *Wie heißt dein Blog?* in meinen Blognamen?

Martha und Vivi hat gesagt…

Suche mal mit Strg + F nach : tinypic lösche den Bildlink der dort steht. Dann suche auch mit Strg + F nach: Wie heißt dein Blog? Und ersetzte dies durch den Text den du dort stehen haben willst ;)
alles liebe

Fanny and Lou hat gesagt…

schöner Blog und tolle bilder :)

Celine B hat gesagt…

Hey, ihr lieben bei mir klappt das alles nicht so mit html. Ich habe anfangs eure Vorgabe benutzt aber das hat leider nicht geklappt und ketzt habe ich diese gefunden http://www.blogskins.com/info/366129/
Nur leider habe ich auch dort Probleme, könnt ihr mir vielleicht helfen also was ich alles bedenken muss usw. Bin ein blutiger Anfänger bei den html/css Sachen :)
Liebste Grüße
Celine
http://takeariskforthis.blogspot.de/