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

✿✿✿


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

21 komentarzy:

  1. Te kody są cudowne. Z chęcią któryś kiedyś podkradnę. :3 Też mam pewną propozycję, a mianowicie odnośnie awatara w poście zamiast nazwy autora. Szukałam tego efektu ale jakoś wujek Google tak się rozleniwił, że nie chciał mi znaleźć to, co chciałam.

    OdpowiedzUsuń
    Odpowiedzi
    1. Heeej. Te awatarki przy postach podkradałyśmy stąd. Zachęcam do skorzystania z tej instrukcji. A jeśli będziesz miała z tym problem to zgłoś się do mnie na maila lub gg. :)
      Bardzo dziękuję Ci za komentarz. <3

      Usuń
  2. Kicia! A miałam właśnie pisać do Ciebie w sprawie daty na gg :)
    A patrzę, a tu pościk o tym. Koffany Kiciuś :*

    OdpowiedzUsuń
  3. Kocia, ty to tak fajnie wszystko zrozumiale piszesz c:
    Może kiedyś mi się to przyda, bo na razie nie mam czasu kodować xD
    Pozderki.

    OdpowiedzUsuń
    Odpowiedzi
    1. Staram się by instrukcje były proste w realizacji dla wszystkich. ;3
      Dziękuję za komentarz i liczę na to, że jak zaczniesz kodować to jeszcze tu zajrzysz.
      <3

      Usuń
  4. Dziękuję za instrukcję! Na pewno się przyda:)

    OdpowiedzUsuń
  5. Dobrze widzieć często używaną datę w wersji spolszczonej :D A gotowce są cudne, podkradam sobie dwójeczkę :3

    OdpowiedzUsuń
  6. Kradaj, kradaj. Niech Ci służy. ;3
    Dziękuję za komentarz. <3

    OdpowiedzUsuń
  7. Świetna instrukcja :D Podziwiam cię, że ci się chce :33

    OdpowiedzUsuń
    Odpowiedzi
    1. A chce mi się! I bardzo się cieszę, że do Was to przemawia i że komentujecie moje wysiłki. <3 Dziękuję!

      Usuń
  8. Świetna notka, super kody.
    Na pewno kiedyś z korzystam z tej instrukcji.

    OdpowiedzUsuń
  9. Hej, użyłam twojej instrukcji na ruchome menu. Mam nadzieję, że Ci to nie przeszkadza ;3
    http://hole-in-my-heart-gruvia.blogspot.com
    Blog tymczasowo nie dostępny, ale już za niedługo będziesz mogła zobaczyć efekt ;3

    OdpowiedzUsuń
    Odpowiedzi
    1. Hejka! :) Jasne, że mi nie przeszkadza. Prosiłabym jednak o zapoznanie się z regulaminem i wpisywanie info o pobraniach w odpowiedniej zakładce. :) Ułatwi mi to stworzenie galerii z Waszymi pracami. <3
      Pozdrawiam i czekam aż będę mogła zobaczyć co tam wymodziłaś. ;3

      Usuń
  10. Bardzo fajny, przydatny kod. Zawsze podobał mi się taki efekt dla daty. Do tego instrukcja napisana tak, że naprawdę łatwo pojąć, co do czego.
    Dziękuję, że dzielisz się swoją wiedzą.
    Nawiasem, mam pytanie: Czy znasz może sposób, by w takim przedstawieniu daty (ala kalendarz) uwzględnić też nazwę dnia tygodnia?

    OdpowiedzUsuń
    Odpowiedzi
    1. Wystarczy ustawić opcję z nazwą dnia tygodnia w ustawieniach posta i zadbać o to, by wyglądało estetycznie. ;D

      Usuń
  11. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
    Odpowiedzi
    1. Super kody! Jesteś mistrzem i moim guru xD Kradnę kod - podam link gdy już skończę szablon :)

      Usuń

statystyka

Archiwum bloga

Obserwatorzy