Jak zrobić datę w stylu kalendarza?

Dzisiaj pora na kolejny post dotyczący instrukcji blogowo-technicznych. W wyglądzie bloga często dużą rolę grają detale, które wychwytuje nasze oko. Ostatnio popularność w blogowych designach zyskała data w stylu kalendarza. W jaki sposób może ona znaleźć się na waszych stronach? Czytając post dowiecie się tego - krok po kroku! 

Zrób kopię zapasową szablonu przed rozpoczęciem!

Na wstępie nie może zabraknąć oczywiście właściwego formatu daty. Najlepiej by była ustawiona tak jak na zdjęciu poniżej.

Wchodzimy teraz w edytor szablonów

Wyszukujemy w kodzie wszystkie linijki (pamiętajcie by nie robić tego ręcznie tylko wyszukiwarką, która pojawia się po połączeniu klawiszy Ctrl + F):

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

...i zastępujemy je tym:

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

Następnym krokiem jest wyszukanie znacznika </head> i wklejenie nad nim kodu poniżej:

<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><style type='text/css'>/* Calendar style date----------------------------------------------- */

	#Date {
	background: transparent url(LINK DO IKONKI KALENDARZA) no-repeat;
	display: block;
	width:60px;
	height:60px;
	float: right;
	margin: -10px 0px -40px 60px;
	padding: 3px 15px 3px 5px;
	border: 0;
	text-transform: uppercase;
	margin-right: -80px;
	}
	.date_month {
	display: block;
	font-size: 13px;
	font: PT Sans;
	font-weight:normal;
	margin-top:-1px;
	text-align:center;
	color:#CCCCCC;
	}
	.date_day {
	display: block;
	font-size: 24px;
	font-weight:bold;
	font: PT Sans;
	margin-top:-8px;
	text-align:center;
	color:#FF0066;
	}
	.date_year {
	display: block;
	font-size: 13px;
	font-weight:normal;
	font: PT Sans;
	margin-top:-10px;
	text-align:center;
	color:#CCCCCC;
	}

LINK DO IKONY KALENDARZA - w tym miejscu można (nie trzeba) wkleić link do małego obrazka kalendarza, który będzie służył jako tło.

To już wszystko, jeśli chodzi o tą instrukcję. Mam nadzieję, że instrukcja jest przydatna i dzięki niej data na waszych blogach będzie wyglądała, tak jak chcecie. Jeśli coś nie jest do końca zrozumiałe, zapraszam na mój email turkusove@gmail.com. Możecie również napisać w komentarzach o poszczególnym problemach. 

Do następnego, 

Nishka