22 lutego 2017

Tytuł gadżetów na kilka sposobów


Tytuł gadżetów może nam bardzo ładnie nadać całego charakteru reszcie szablonu. Pewnie nigdy się nad tym zbytnio nie zastanawialiście! Ah! Przygotowałam wam kilka gotowców dzięki czemu będzie wam o wiele prościej.
0 Czytaj dalej »

Ikony społecznościowe w menu

0

Ikony społecznościowe w pasku MENU to coraz bardziej popularna rzecz w bogosferze. Możecie się z nimi spotkać praktycznie na każdym popularnym blogu. Jesteście ciekawi jakie to proste? 
Czytaj dalej »

13 lutego 2017

Wyśrodkowanie kart/stron

0

Wyśrodkowanie kart/stron to nic trudnego. Często się z tym męczyłam, ustawiając je paddingami czy marginami, nie zastanawiając się nad niczym innym. Kiedy natknęłam się na ten kod, uzmysłowiłam sobie, jak bardzo coś czasami je logiczne a my staramy się i kombinujemy - a to trzeba na chłopski rozum!

Czytaj dalej »

8 lutego 2017

Rozpikselowane zdjęcia

0

Dziś bardzo pomocny kod, którego sama szukałam dość długo a mianowicie rozpikselowane i niewyraźne zdjęcia np. w popularnych postach, znacie to? Jeśli tak to ten problem idzie w zapomnienie, ponieważ teraz nie będziecie mieć z tym problemu!

Czytaj dalej »

5 stycznia 2017

Etykiety bez przecinków

0

Witam, kod bardzo pomocniczy, kiedy chcemy pozbyć się przecinków.

1. Wchodzimy w kod HTML i wyszukujemy: data:label.isLast 



2. Usuwamy przecinek lub zmieniamy na np. "+"

Czytaj dalej »

30 grudnia 2016

Data inaczej

0

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:
Czytaj dalej »

28 grudnia 2016

Wygląd statystyk

0


EFEKT:


KOD:
.Stats .counter-wrapper {
background: #34a58a; /* kolor do tła */
padding: 10px 50px;
font-size: 26px; /* wielkość czcionki */
font-family: PT Sans Narrow; /* nazwa czcionki*/
letter-spacing: 1px; /* odległość między literami */
color: #ffffff; /* kolor tekstu */
text-shadow: 1px 1px 0px #000000; /* cienie tekstu */
border-radius: 60px ; /* zaokrąglenie rogów */
margin-left: 0px; /* lewy margines */
margin-right: 0px;} /* prawy margines */

(c) land-of-instructions
Czytaj dalej »