9# Przepis na datę [instrukcja]

Hej!

W nawiązaniu do licznych propozycji zdecydowałam się w końcu z jednej z nich skorzystać. Dziś przedstawię wam instrukcję na datę, którą znalazłam na xomisse.com. Prosiły o nią martyna11105 i prudence.. Postanowiłam, że ją przetłumaczę, a także dorzucę od siebie kilka pomysłów na modyfikację sposobu wyświetlania daty. Na końcu posta znajdziecie gotowce, które mam nadzieję okażą się dla was inspiracją w tworzeniu własnych kodów. ;3
Efekt, który uzyskamy prezentuje się następująco:

mar132016

Krok 1. Konfiguracja daty

Zaczynamy od odwiedzenia zakładki układ w panelu administracyjnym naszego bloga. Klikamy na Edytuj w prawym dolnym rogu ramki Posty na blogu. Musimy skonfigurować datę, tak, by prezentowała się w formie dzień miesiąc rok (16 marca 2016). Tak jak na >>tym obrazku<<.

Krok 2. Edycja kodu HTML

Następnie przechodzimy w panelu naszego bloga do sekcji Szablon, w której klikamy na przycisk Edytuj kod HTML. Klikamy CTRL i F na klawiaturze, a w okienku wyszukiwania wpisujemy następujący kod:

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

Zastępujemy go tym, który podałam poniżej.

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

Krok 3. JavaScript 

Gdy już to zrobimy musimy wyszukać w naszym kodzie </head> i tuż nad nim wkleić poniższy kod:

   <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>

Nasza data w tym momencie będzie prezentowała się w następujący sposób: mar132016. Niezbyt zachęcająco, prawda? :) Po dodaniu kodu CSS będziemy jednak mogli pochwalić się naprawdę śliczną datą na blogu!

Krok 4. Dodajemy CSS!

Mamy dwie możliwości - w bloggerze standardowo data nie wyświetla się po wejściu w post. Jeśli chcemy, by nasza data była wyświetlana jedynie na stronie głównej dodajemy kod CSS pod </head> uprzednio jeszcze wpisując kod:

  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <style type='text/css'>
tu dodaj kod CSS     </style>
</b:if>

Ja jednak lubię, gdy data wyświetla się również, gdy wejdę w posta. Jeśli również się na to zdecydujecie przejdźmy po prostu do sekcji Szablon, by kliknąć przycisk Dostosuj i wejść w Zaawansowane, gdzie mamy możliwość Dodania arkuszu CSS.
Postępując zgodnie z krokami opisanymi poniżej będziemy mogli dostosować wygląd naszej nowej daty.

#Date /*karton, w którym zawiera się data*/
{
 font-family: Arial; /*czcionka w dacie*/
background:#ffc0cb; /*tło*
width:70px; /*szerokość*/
margin-left:-90px; /*margin pozwala nam na ustawienie pozycji daty,
tu użyłam margin-left i margin bottom, tak by data znajdowała
się po lewej stronie posta na równi z tytułem*/
margin-bottom:-60px;
border-radius:100%; /*dzięki border-radius ustawionym na 100% stworzyłam koło.*/
border:3px groove #216802; /*ramka*/
box-shadow:0 0 4px grey; /*cień*/
}
.date_month /*ustawienia dla miesiąca*/
{
display:block; /*zablokowanie miesiąca w linijce*/
text-align:center; /*wyśrodkowanie tekstu*/
padding-top:7px; /*odległość tekstu od górnej ramki*/
font-size:14px; /*rozmiar czcionki*/
color:silver; /*kolor tekstu*/
}
.date_day /*ustawienia dla dnia*/
{
display:block; /*zablokowanie dnia w linijce*/
text-align:center; /*wyśrodkowanie tekstu*/
font-size:20px;  /*rozmiar czcionki*/
margin-top:-5px; /*zmniejszenie odległości między dniem, a miesiącem*/
color:#88bf3b; /*kolor tekstu*/
}
.date_year /*ustawienia dla roku*/
{
display:block; /*zablokowanie roku w linijce*/
text-align:center; /*wyśrodkowanie tekstu*/
padding-bottom:8px; /*odległość tekstu od dolnej ramki*/
margin-top:-5px; /*zmniejszenie odległości między rokiem, a miesiącem*/
font-size:11px; /*rozmiar czcionki*/
color:silver; /*kolor*/
}

GOTOWCE

Tak jak obiecałam - poniżej zamieszczam kilka gotowców, które mam nadzieję, zainspirują was do eksperymentowania. Gotowce zawierają jedynie CSS, w związku z czym aby uzyskać oczekiwany efekt, musicie przejść przez kroki od 1 do 3 powyższej instrukcji. :)

mar132016 #Date { width:50px; background:#01b888; border:1px solid #038160; height:71px; font-weight:400!important; font-family:Arial } .date_month { display:block; text-align:center; margin-top:10px; font-size:16px; color:#0d2935; text-transform:uppercase; text-shadow:0 0 10px #38f4bf } .date_day { text-shadow:0 0 10px #38f4bf; display:block; text-align:center; font-size:30px; margin-top:-10px; color:#0d2935 } .date_year { display:block; text-align:center; font-size:11px; font-weight:700; color:#01b888; padding-top:2px; background:#163e50; border:1px solid #0e2a36; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); width:70px; position:relative; margin-left:24px; margin-top:-38px }	mar132016 #Date { width:50px; font-family:Georgia } .date_month { display:block; text-align:center; margin-top:9px; font-size:12px; color:#ededed; text-transform:uppercase; background:#555; margin-left:-31px; font-weight:400; width:80px; transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -o-transform:rotate(-30deg) } .date_day { margin-top:-6px; display:block; text-align:center; font-size:22px; color:#0d2935; background:#4b7492; margin-right:-10px; color:#fff; border-radius:100%; padding-top:10px; padding-bottom:15px } .date_year { display:block; text-align:center; font-size:12px; background:#555; color:#ededed; margin-right:-20px; margin-left:10px; font-weight:400; width:80px; transform:rotate(30deg); -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -o-transform:rotate(-30deg); margin-top:-6px }	mar132016 #Date { width:50px; font-family:Verdana; background:grey; padding:3px; font-weight:400!important; border:3px solid #dbdbdf; font-size:11px; text-transform:uppercase } .date_month { display:block; text-align:center; background:#eee; color:grey; font-size:13px } .date_day { margin-top:0; display:block; text-align:center; background:#dbdbdf; color:#000; margin-top:3px; font-size:24px } .date_year { display:block; text-align:center; background:#eee; color:grey; margin-top:3px }

✿✿✿

Dziękuję wszystkim za uwagę. Czekam na Wasze komentarze! :)