Rund ums Bloggen

date header / Datum verschönern

27. Mai 2013

Heute gibt es mal wieder ein kleines Tutorial in Sachen Blogdesign. Ich habe vor ein paar Wochen mein Datum etwas geändert. Irgendwie hat es mir nicht mehr so richtig gefallen und daher habe ich mich etwas informiert wie man das Datum seitlich an den Blogrand machen kann und das auch noch mit einer schönen Form. Zunächst wollte ich einen Kreis, aber der grüne "Fleck" passt momentan besser zum Blogdesign.

Ich habe mir den Code natürlich nicht selbst ausgedacht, sondern bei Google nachgeschaut. Ich bin übrigens den einfacheren Weg gegangen und habe den Hintergrund des Datums als Bild eingefügt. Man kann den Hintergrund in bestimmten Formen auch mit einen Code generieren. Wer daran Interesse hat, der findet bei copypastelove.org eine gute Anleitung.

Nach dem Vorgeschwafel nun das Eigentliche :-).

1. Schritt: Datums Format ändern

Als erstes solltet ihr das Format des Datums unter Einstellungen -> Sprache und Formatierung -> Datums Header Format auf das Format mit dem Tag, dem ausgeschriebenen Monat und dem Jahr ändern. Es sollte das Format ohne Punkte sein.


2. Schritt: Code für den Date Header suchen

Als nächstes müsste ihr die Vorlage öffnen unter Vorlage -> HTML bearbeiten. Jetzt werdet ihr den neuen Editor sehen. Ich persönlich finde ihn etwas gewöhnungsbedürftig. Aber egal. Ihr sucht jetzt nach folgendem Code:


<h2 class='date-header'>
<span>
<data:post.dateHeader/>
</span>
</h2>


Nachdem ihr den Code gefunden habt ersetzt ihr ihn durch den folgenden Code:

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>


Falls ihr den gesuchten Code zweimal findet, dann solltet ihr ihn auch zweimal mit dem genannten Code ersetzen.

3. Schritt: Header Skript einfügen

Nachdem ihr den Code für das Datum ausgetauscht habt, müsst ihr nun noch das entsprechende Skript einfügen. Dazu sucht ihr einfach nach dieser Zeile

</head>


Genau vor diese Zeile fügt ihr nun den folgenden Code ein

    <script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(HIER EURE BILD URL EINFÜGEN) no-repeat;
display: block;
width:72px;
height:72px;
float: left;
margin-left:-74px;
margin-top: -47px;
padding: 10px 0 0 0;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 12px;
font-weight:bold;
margin-top:4px;
text-align:center;
font-family: &#39;Verdana&#39;;
color:#000000; /* Month&#39;s color */
}
.date_day {
display: block;
font-size: 14px;
font-weight:bold;
margin-top:1px;
text-align:center;
font-family: &#39;Verdana&#39;;
color:#000000; /* Day&#39;s color */
}
.date_year {
display: block;
font-size: 13px;
margin-top:18px;
text-align:center;
font-family: &#39;Verdana&#39;;
color:#ffffff; /* Year&#39;s color */
}
</style>
</b:if>


Ihr könnt nun an die gekennzeichnete Stelle einfach eure Bild URL einfügen. Was ihr für eine Form bzw. für ein Bild nutzt ist dabei egal. Die Größe könnt ihr euch auch selbst aussuchen. Ich habe ein Quadrat von 72x72 Pixeln genommen (siehe width: 72px und heigh: 72px). Falls ihr es größer oder kleiner wollt, einfach die Pixelzahl verändern. Mein Bild habe ich einfach in Photoshop auf einem transparenten Hintergrund mit einem Brush erstellt.

Die Schrift könnt ihr auch beliebig verändern, indem ihr einfach an die Stelle von Verdana (siehe font-family) eine andere Schriftart einfügt. Außerdem könnt ihr sowohl für den Tag, als auch den Monat und das Jahr eine andere Schriftart, Schriftfarbe (siehe color) und auch eine unterschiedliche Schriftgröße wählen (siehe font-size).

Wer, so wie ich, das Jahr nicht mit in dem Bild haben möchte, der verschiebt das Jahr einfach etwas nach unten (siehe unter .date_year { margin-top:18px). Margin top ist dabei der Abstand von oben, das kann bei jedem von euch unterschiedlich sein, also einfach die Pixel ausprobieren. Für die Farbe des Jahres habe ich weiß gewählt und da mein Blog einen weißen Hintergrund hat, sieht man es nun nicht mehr :-).

Den Abstand zwischen dem Tag und dem Monat könnt ihr wieder durch die Pixelzahlen hinter margin-top verändern.

Die Position des Bildes könnt ihr verändern, indem ihr unter der Zeile

#Date {

margin-top und margin-left verändert. Falls ihr das Bild in der Mitte oder auch am rechten Rand haben möchtet, dann ändert hinter dem Wörtchen float einfach left in center (mittig) oder in right (rechts).

So, ich hoffe, dass ich alles verständlich erläutert habe. Falls es noch Fragen gibt, ihr wisst ja wo sich die Kommentarfunktion befindet :-).

You Might Also Like

9 Comments

  • Reply wmw style 28. Mai 2013 at 16:14

    voll gut! 🙂 liebst die twins

  • Reply Buntspechte 29. August 2013 at 10:33

    🙂
    Dankeschön!

    • Reply Buntspechte 29. August 2013 at 11:46

      Hab da mal ne Frage… irgendwie funktioniert es nicht bei mir…:
      Muss meine Bild URL in die Klammern einfügen, oder muss ich die Kammern mit ersetzen?
      Dank Dir!

    • Reply Clarabour 29. August 2013 at 15:20

      Die Bild URL muss in die Klammern. Einfach nur die URL ohne Anführungszeichen oder sonstiges.

      Liebe Grüße

  • Reply Pia 7. Mai 2014 at 21:15

    Hei,
    Ich würde super gerne mein Datum ändern aber finde leider die passenden stellen in dem html-code nicht…
    kannst du mir dort weiterhelfen?
    liebste Grüße Pia

  • Reply Anonymous 25. März 2016 at 22:35

    Hallo,

    schade, dass hier das Ergebnis nicht mehr ersichtlich ist. Scheinbar hast du dein Datumsformat wieder geändert?!

    Liebe Grüße
    Ela

    • Reply clarabour 26. März 2016 at 8:40

      Ich bin 2013 wieder zu WordPress gewechselt und nutze daher Blogspot nicht mehr. Ich kann aber einmal schauen, ob ich noch einen Screenshot oder den alten HTML Code finde. Dann füge ich es als Beispiel noch mit in den Beitrag ein.

  • Reply Sylvia 30. Oktober 2016 at 13:05

    Halli hallo,
    ich habe mein Datum jetzt auch geändert, nur bekomme ich das Bild, das ich als Rahmen nutzen möchte, nicht um das Datum…Vielleicht kannst du mir ja helfen. 🙂
    http://www.itsbooklove.blogspot.de
    Liebe Grüße,
    Sylvi

    • Reply clarabour 30. Oktober 2016 at 13:54

      An welche Stelle möchtest du das Bild denn verschieben?
      Liebe Grüße

    Leave a Reply