30 grudnia 2016

Data inaczej


Zawsze zadziwiały mnie daty, które wyglądały jak mini kalendarzyki albo same w sobie tworzyły piękny dodatek, który upiększał wygląd nie tylko posta ale też i bloga. Dzisiaj data trochę inaczej. Kod zaczerpnięty z bloga (c) MRUwisko oraz blogowego forum.

1. Wchodzimy w ustawienia i zmieniamy formę daty na taką (23 grudnia 2016).
2. Wchodzimy w nasz kod HTML i za pomocą CTRL + F wyszukujemy to:

<h2 class='date-header'>
 <span>
<data:post.dateHeader/>
</span>
</h2>
i zmieniamy go na ten:
<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div> 

3. Szukamy w kodzie </head> i nad nim wklejamy to:
 <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>

4. Ostatnim krokiem jest dodanie kodu CSS w Arkuszu CSS:

#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*/
}

I gotowe. A tutaj znajdziecie przykładowe gotowce:

Brak komentarzy:

Prześlij komentarz