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.

Ikony społecznościowe w menu


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? 

13 lutego 2017

Wyśrodkowanie kart/stron


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!

8 lutego 2017

Rozpikselowane zdjęcia


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!

5 stycznia 2017

Etykiety bez przecinków


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. "+"

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:

28 grudnia 2016

Wygląd statystyk



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

23 grudnia 2016

Loader na blogu


Instrukcja jak wstawić loader na blogspota.

1. Wchodzimy w nasz kod HTML i szukamy za pomocą CTRL + F </body> i tuż NAD nim wklejamy:
<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
2. Następnie POD </body> wklejamy:
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>
3. Wyszukujemy </head>  i POD nim wklejamy:
<!-- Preloader -->
<div id="preloader">
<div id="status"></div>
</div>
4. Następnie wyszukujemy ]]></b:skin> i tuż nad nim wklejamy:
/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(LINK DO GIFA);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}
Czerwonym zaznaczyłam miejsce gdzie możemy wstawić dowolny loader a marginami zmieniamy jego położenie.

(c) blokotek 

22 grudnia 2016

ANATOMIA - Popularne posty


.popular-posts ul - całe popularne posty
.popular-posts ul li .item-content-  posty blogów
.item-title - tytuł posta
.item-snippet - fragment postu

29 listopada 2016

Avatar autora przy poście


Witam, avatar w poście to super pomysł na urozmaicenie wyglądu bloga :) Szczególnie jeśli na blogu jest więcej autorów.

INSTRUKCJA

1. Wchodzimy w "Edytuj kod HTML" i wyszukujemy:

<span class='post-author vcard'>
Powinna pojawić się następująca fraza:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span> 
Usuwamy ją! I ponownie wyszukujemy tego samego, ponieważ w kodzie zazwyczaj pojawia się dwa razy. Drugi taki sam kod, również usuwamy!

2. Następnie wyszukujemy:

<div class='post-header-line-1'/>

Również tym razem w kodzie pojawi się ten sam kod, ale przechodzimy do tego drugiego i zastępujemy go:

<div class='post-header-line-1'>
<div class='autorzy'>
<b:if cond='data:post.author == "NICK AUTORA"'>
<span class='autor'><a href='WKLEJ LINK DO PROFILU AUTORA '><img src='LINK AVATARA'/><span class='nick' itemprop='name'><data:post.author/></span></a></span>
</b:if>
</div>
</div> 
Jeśli chcemy dodać kolejnego autora pod </b:if> wklejamy dalszą część kodu:

<b:if cond='data:post.author == "NICK KOLEJNEGO AUTORA"'>
<span class='autor'><a href='LINKD DO PROFILU'><img src='LINK DO AVATARA'/><span class='nick' itemprop='name'><data:post.author/></span></a></span>
</b:if>  

3. Wchodzimy w Arkusz CSS i wklejamy:

.autorzy img {
width: 80px;
height: 80px;
}
.autorzy span {
display: block;


(c) Za kod dziękuję! MRUwisko

30 sierpnia 2016

Pomysł na oryginalne strony, etykiety i wiele więcej..


Witam, dziś na prawdę dobra instrukcja na fajny i oryginalny efekt, który możecie zastosować do kart/stron, etykiet czy czego sobie tak zapragniecie :)

Przedstawię kilka efektów, a to już wy sami zdecydujecie, którego użyjecie:

Efekt 1:


Instrukcja:
1. Dodajecie gadżet HTML/JAVA SCRIPT i wklejacie to:
<div id="menu"><div class="strony">
<a href="link strony">Karta 1</a>
<a href="link strony">Karta 2</a>
<a href="link strony">Karta 3</a>
<a href="link strony">Karta 4</a>
<a href="link strony">Karta 5</a>
<a href="link strony">Karta 6</a>
<a href="link strony">Karta 7</a>
<a href="link strony">Karta 8</a>
</div><div id="menu-m"></div><br /></div>
2. Przechodzimy do arkusza CSS i wklejamy to:
#menu{
  z-index:100;
  line-height: 15pt;
  width:240px;
  top:0px;
  right: 0px;
  padding:0px;
  position:relative;}
#menu a:link{
  display: inline-block !important;
  background: #804070;
  color: #eee;
  font-family: verdana;
  font-size: 6pt;
  width: 125px;
  height: 19px;
  text-align: center;
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;
}
#menu a:hover{
  background: #80A0A0;
  color: #eee;
  font-family: verdana;
  font-size: 6pt;
  text-align: center;
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;
 -moz-transition:all 2s;
 -webkit-transition:all 2s;
 -o-transition:all 2s;}
#menu-m {visibility:hidden;} 
Efekt 2:


Instrukcja:
1. Dodajecie gadżet HTML/JAVA SCRIPT i wklejacie to:
<div id="menu"><div class="strony">
<a href="link strony">Karta 1</a>
<a href="link strony">Karta 2</a>
<a href="link strony">Karta 3</a>
<a href="link strony">Karta 4</a>
<a href="link strony">Karta 5</a>
<a href="link strony">Karta 6</a>
<a href="link strony">Karta 7</a>
<a href="link strony">Karta 8</a>
</div>
2. Przechodzimy do arkusza CSS i wklejamy to:
#menu{
  z-index:100;
  line-height: 15pt;
  width:240px;
  top:0px;
  right: 0px;
  padding:0px;
  position:relative;}
#menu a:link{
  display: inline-block !important;
  background: #0080E0; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  width: 125px; /*Szerokość*/
  height: 19px; /*Długość*/
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 0px 20px 20px 0px; }
#menu a:nth-child(odd) {
  width: 165px;
  background: #FF8040; }
#menu a:hover{
  color: #fff; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  text-align: center; /*Wyśrodkowanie*/
  width: 145px; /*Szerokość*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
 -moz-transition:all 2s;
 -webkit-transition:all 2s;
 -o-transition:all 2s;}
#menu a:nth-child(odd):hover {width: 145px; } 

Efekt 3:


Instrukcja:
1. Dodajecie gadżet HTML/JAVA SCRIPT i wklejacie to:
<div id="menu"><div class="strony">
<a href="link strony">Karta 1</a>
<a href="link strony">Karta 2</a>
<a href="link strony">Karta 3</a>
<a href="link strony">Karta 4</a>
<a href="link strony">Karta 5</a>
<a href="link strony">Karta 6</a>
<a href="link strony">Karta 7</a>
<a href="link strony">Karta 8</a>
</div>
2. Przechodzimy do arkusza CSS i wklejamy to:
#menu{
  z-index:100;
  line-height: 15pt;
  width:340px;
  top:0px;
  right: 0px;
  padding:0px;
  position:relative;}
#menu a:link{
  display: inline-block !important;
  background: #FF2070; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  width: 125px; /*Szerokość*/
  height: 19px; /*Długość*/
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;}
#menu a:hover{
  background: #FF8040; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;
 -moz-transition:all 2s;
 -webkit-transition:all 2s;
 -o-transition:all 2s;}

Efekt 4:

 Instrukcja:
1. Dodajecie gadżet HTML/JAVA SCRIPT i wklejacie to:
<div id="menu"><div class="strony">
<a href="link strony">Karta 1</a>
<a href="link strony">Karta 2</a>
<a href="link strony">Karta 3</a>
<a href="link strony">Karta 4</a>
<a href="link strony">Karta 5</a>
<a href="link strony">Karta 6</a>
<a href="link strony">Karta 7</a>
<a href="link strony">Karta 8</a>
</div>

2. Przechodzimy do arkusza CSS i wklejamy to:
#menu{
  z-index:100;
  line-height: 15pt;
  width:340px;
  top:0px;
  right: 0px;
  padding:0px;
 position:relative;}
#menu a:link{
  display: inline-block !important;
  background: #C0A090; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  width: 125px; /*Szerokość*/
  height: 19px; /*Długość*/
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;}
#menu a:nth-child(1), #menu a:nth-child(4), #menu a:nth-child(5), #menu a:nth-child(8) {background:#80A0B0;}
#menu a:hover{
  background: #80C0FF; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;
 -moz-transition:all 2s;
 -webkit-transition:all 2s;
 -o-transition:all 2s;
transform:perspective(400px) rotateY(360deg);}
#menu a:nth-child(1):hover, #menu a:nth-child(4):hover, #menu a:nth-child(5):hover, #menu a:nth-child(8):hover {
  background: #2b667f;
  -moz-transition:all 2s;
  -webkit-transition:all 2s;
  -o-transition:all 2s;}