Ikonki społecznościowe ułożone w plaster miodu

poniedziałek, 22 sierpnia 2016

Ikonki społecznościowe - każdy doskonale wie, że są one potrzebne na blogu, aby odesłać naszych czytelników do naszych portali społecznościowych, aby mieć z nimi najlepszy kontakt. Niektórzy na swoich blogach umieszczają ikonki w kształcie kwiatków lub w łatki, kotki, pieski i czego jeszcze dusza zapragnie. Inni stawiają na tradycyjny prosty wygląd, a co byście powiedzieli na to, aby ułożyć ikonki w plaster miodu? Czy nie byłaby to miła odmiana? Coś innego, coś co przykułoby dużą uwagę czytelników, bo przecież nie wiele blogów ma ikonki ułożone w plaster miodu.

W dzisiejszym wpisie pokażę Wam jak zrobić ułożenie takich ikonek + będziecie mieli do pobrania pakiety ikonek społecznościowych, które umożliwią Wam takie ułożenie. Zaczynamy.

1. Pobierz pakiet ikonek.


Pakiet pomarańczowy



Pobierz pakiet

Pakiet czerwony



Pobierz pakiet

Pakiet różowy



Pobierz pakiet

Pakiet fioletowy



Pobierz pakiet

Pakiet chabrowy



Pobierz pakiet

Pakiet niebieski



Pobierz pakiet

Pakiet turkusowy



Pobierz pakiet

Pakiet morski



Pobierz pakiet

Pakiet miętowy 



Pobierz pakiet

Pakiet zielony



Pobierz pakiet

Pakiet limonkowy




Pobierz pakiet

Pakiet żółty



Pobierz pakiet

Pakiet szary



Pobierz pakiet

2. Jeśli już mamy pobrany wybrany pakiet ikonek, to przechodzimy teraz do układ - dodaj gadżet - HTML/JavaScript i wrzucamy tam taki kod:

<!--początek kod blonparia-->
<div class='facebook'><a href='#'><img alt='facebook' src='LINK DO IKONKI'/></a></div>
<div class='instagram'><a href='#'><img alt='instagram' src='LINK DO IKONKI'/></a></div>
<div class='pinterest'><a href='#'><img alt='pinterest' src='LINK DO IKONKI'/></a></div>
<div class='youtube'><a href='#'><img alt='youtube' src='LINK DO IKONKI'/></a></div>
<div class='googleplus'><a href='#'><img alt='googleplus' src='LINK DO IKONKI'/></a></div>
<div class='twitter'><a href='#'><img alt='twitter' src='LINK DO IKONKI'/></a></div>
<div class='tumblr'><a href='#'><img alt='tumblr' src='LINK DO IKONKI'/></a></div>
<!--koniec kod blonparia-->

# - link do naszego profilu
LINK DO IKONKI - musimy wrzucić ikonkę na jakiś hosting i pobrać do niej link. Uwaga IKONKĘ, a nie cały folder - żeby nie było tak jak ostatnio, ktoś napisał, że wrzucił folder na hosting, a grafiki mu się nie pojawiły.


Po zapisaniu i bez CSSa nasze ikonki będą wyglądać tak:

3. Jeśli już uzupełniliśmy powyższy kod linkami do ikon to teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy tam taki kod:

.facebook {margin: 90px;}
.facebook:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.instagram {margin: -199px 0 5px 90px;}
.instagram:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.pinterest {margin: -34px 0 5px 50px;}
.pinterest:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.youtube {margin: -9px 0 5px 50px;}
.youtube:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.googleplus {margin: -34px 0 5px 90px;}
.googleplus:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.twitter {margin: -88px 0 5px 130px;}
.twitter:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.tumblr {margin: -112px 0 99px 130px;}
.tumblr:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}


Analiza kodu: 


.facebook {margin: 90px;}
.facebook:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.instagram {margin: -199px 0 5px 90px;}
.instagram:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.pinterest {margin: -34px 0 5px 50px;}
.pinterest:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.youtube {margin: -9px 0 5px 50px;}
.youtube:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.googleplus {margin: -34px 0 5px 90px;}
.googleplus:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.twitter {margin: -88px 0 5px 130px;}
.twitter:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.tumblr {margin: -112px 0 99px 130px;}
.tumblr:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}

Manipulacja ikonkami góra-dół
Manipulacja ikonkami prawo-lewo
TYLKO PRZY OSTATNIEJ IKONCE - margines dolny ( odstęp między ikonkami, a innymi gadżetami) 

Wszystkie pogrubione i kolorowe wartości są zmienne. 

Efekt końcowy: 




Podoba Wam się ta instrukcja? ;) 
Udostępnij ten wpis:
Czytaj dalej »

Plany lekcji do pobrania za darmo - edycja 2016

sobota, 20 sierpnia 2016


Jak każdy z pewnością wie, rok szkolny zbliża się wielkimi krokami, więc wypadałoby zadbać o wszystkie potrzebne nam przybory oraz plany lekcji - gdzieś trzeba przecież zapisywać jakie zajęcia w danym dniu będziemy mieć. Przygotowałam dla Was w tym roku 6 planów lekcji do pobrania za darmo, a jeśli jeszcze Wam mało, to zapraszam do edycji 2015 - tam również znajdziecie 6 planów do pobrania, a więc macie w czym wybierać :)

Motyw watercolor


Pobierz plan

Motyw geometryczny


Pobierz plan

Motyw z garbusem


Pobierz plan
Motyw flora


Pobierz plan

Motyw flora 2


Pobierz plan

Motyw flora + geometryczny


Pobierz plan

Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić numerowany pager bloga

wtorek, 9 sierpnia 2016


Każdy zna tradycyjny pager Bloggera, ale czemu mamy się ograniczać tylko do tych napisów "strona główna/ starsze posty/ nowsze posty"? Przecież można go jakoś urozmaicić. O jednym takim urozmaiceniu pisałam we wpisie, jak zamienić pager bloga na grafikę, teraz przyszedł czas na numerowany pager bloga, a możemy to osiągnąć w dwóch krokach. Za pomocą HTML i CSS. 


Wersja pierwotna




HTML


Przechodzimy do szablon - edytuj kod HTML - klikamy kursorem w dowolne miejsce w kodzie i wybieramy ctrl+f/cmd+f  i wyszukujemy </body>. NAD </body> wklejamy kod:


<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Poprzednia&#39;;
var downPageWord =&#39;Następna&#39;;
</script>
<script src='https://mirocine.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
Analiza kodu: 

Nazwa strony (poprzedni wpis) 
Nazwa strony (następny wpis) 

CSS


Teraz wyszukujemy ]]></b:skin> i NAD wklejamy kod: 

#blog-pager {background: transparent;}
.showpageOf {
display: none;
}
.showpageNum a {
background: #ea9999;
padding: 3px;
margin-right: 3px;
font-weight: bold;
}
.showpage a {
background: #e06666;
padding: 3px;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float:  center;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
background: #d5a6bd;
color: #fff;
font-weight: bold;
float: center;
font-size: 15px;
padding: 3px;
margin-right: 3px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

Analiza kodu: 

#blog-pager {background: transparent;}
.showpageOf {
display: none;
}
.showpageNum a {
background: #ea9999;
padding: 3px;
margin-right: 3px;
font-weight: bold;
}
.showpage a {
background: #e06666;
padding: 3px;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: center;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
background: #d5a6bd;
color: #fff;
font-weight: bold;
float: center;
font-size: 15px;
padding: 3px;
margin-right: 3px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

Tło nieaktywnych przycisków z numerami 
Wewnętrzne marginesy przycisków z numerami 
Prawy margines przycisków z numerami 
Pogrubienie cyfr
Tło przycisków następny/poprzedni
Wewnętrzne marginesy przycisków następny/poprzedni
Pogrubienie przycisków następny/poprzedni
Wielkość cyfr i przycisku następna/poprzednia strona
Kolor cyfr i przycisków 
Margines wewnętrzny lewy przycisków
Margines wewnętrzny prawy przycisków
Tło aktywnego przycisku (pierwszego) 
Kolor cyfry aktywnego przycisku
Pogrubienie cyfry aktywnego przycisku
Wielkość cyfry aktywnego przycisku
Wewnętrzne marginesy aktywnego przycisku 
Prawy margines aktywnego przycisku 
Wewnętrzny lewy margines aktywnego przycisku 
Wewnętrzny prawy margines aktywnego przycisku 

Wszystkie pogrubione i kolorowe wartości są zmienne.

Efekt: 


Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life