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

CSS HTML Tutorial wpis

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

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? ;) 

Czytaj dalej

Plany lekcji do pobrania za darmo - edycja 2016

grafika grafika do pobrania plany lekcji wpis

Plany lekcji do pobrania za darmo - edycja 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

Czytaj dalej

Jak zrobić numerowany pager bloga

CSS HTML Tutorial wpis

Jak zrobić numerowany pager bloga

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: 

Czytaj dalej