Zmiana wyglądu tytułów gadżetów za pomocą kodu CSS

29 kwietnia 2015


CSS jest wspaniały. Serio. Czasem może irytować, ale to zazwyczaj przez jakiś nasz błąd, którego nie dostrzegamy, ale bluzgać zaczniemy - jakże by inaczej. Dziś przedstawię wam prosty tutorial, mianowicie jak w prosty sposób za pomocą kodów CSS można zmienić wygląd tytułów gadżetów.
Kiedyś pojawił się post o tym jak dodać własne, graficzne tytuły gadżetów. Jednak potem zrobiłam się leniwa, a może określenie "bardziej wygodnicka" będzie tu trafne.
Oczywiście aby nasze tytuły gadżetów się zmieniły to potrzebujemy kodu, składającego się z selektoru i stylów. Tak naprawdę aby taki kod sobie stworzyć to za wiele nie potrzeba.

Musimy wiedzieć jak oznaczyć nasze kolumny boczne, albo chociaż jedną z nich. Do tego posłuży nam selektor .sidebar, pewnie każdy się zastanawia czym on się różni od selektora .column-right-inner lub .column-left-inner już wyjaśniam poniżej.

.sidebar - odpowiada za wszystkie kolumny, zarówno za lewą jak i prawą
.column-right-inner - jak sama nazwa wskazuje odpowiada  tylko za prawą kolumnę.
.column-left-inner - odpowiada tylko za lewą kolumnę

Nie ma dużej filozofii prawda? Kolejną rzeczą jaką musimy wiedzieć to to jaki selektor mają gadżety. Większość z was posiada smartphony, więc będzie wam łatwo skojarzyć jaki selektor mają gadżety czyli .widget, ale to jeszcze nie koniec. Niestety nie wystarczy nam znajomość .sidebar i .widget, musimy jeszcze wiedzieć jak oznaczyć nagłówki gadżetów. Wiecie, że każdy nagłówek ma jakieś h z cyferką jak np. h3 .post-title, nagłówki gadżetów mają h2 np. h2 .date-header. Nasze kody dotyczące nagłówków w kolumnach bocznych będą wyglądać następująco:

.sidebar .widget h2 - odpowiada za wszystkie nagłówki gadżetów, we wszystkich kolumnach bocznych.
.column-right-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów, tylko w kolumnie bocznej prawej.
.column-left-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów, tylko w kolumnie bocznej lewej.

Tak na marginesie to selektor .sidebar .widget h2 widnieje w spisie selektorów CSS na moim blogu.

Skoro mamy już selektor dla naszych tytułów gadżetów, to wypadałoby teraz dopisać kawałek jakiegoś stylu, żeby wyglądało to jakoś przyzwoicie. Tutaj mamy duże pole do popisu, a wiecie dlaczego? Bo możemy dopisać sobie wszystko co chcemy. Poniżej trzy przykłady jak to może wyglądać:

.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
background-image: url (LINK DO TŁA);
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:



.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
background: #4eacfa; - kolor tła
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:



.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
border-style: solid; - rodzaj ramki 
border-width: 2px; - grubość ramki
border-color: #4eacfa; - kolor ramki
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:





Czytaj dalej »

Tworzenie bokeh w GIMPie

22 kwietnia 2015


Na pewno każdy z was słyszał o efekcie bokeh jaki możemy uzyskać dzięki światłu na zdjęciach. Dokładnie nie wiem jak on powstaje na zdjęciach, bo na fotografii znam się jak świnia na gwiazdach, ale wiem jak zrobić taki efekt w programie graficznym GIMP. W dzisiejszym tutorialu dowiecie się jak sami możecie stworzyć taki efekt za pomocą paru kliknięć.

1. Otwieramy GIMPa i wybieramy plik - nowy. Ustalamy sobie wielkość naszego obrazu i klikamy ok. 




2. Wybieramy ikonkę kubełka i klikamy nim na nasz obraz. Dobrze wybrać sobie czarny kolor jako kolor bazowy. Jednak jeśli chcemy mieć inny kolor bazowy to klikamy na nasz prostokąt z czarnym kolorem i wybieramy inny.



3.  Teraz klikamy na "nową warstwę" i ustawiamy na "przezroczysta" 


4. Wybieramy "Gradient" i zmieniamy kolor na taki jaki nam odpowiada, a kolor drugi zmieniamy na kolor naszego tła (w tym przypadku czarny). Następnie zmieniamy nasz gradient na kolor pierwszoplanowy i ustawiamy go na "promienisty", następnie rozciągamy go na naszym obrazie.


4a. Kiedy już nasz gradient się pojawi na obrazie to zmieniamy jego krycie.


5. Powtarzamy krok z punktu 3 i zmieniamy nazwę naszej warstwy. Następnie klikamy na "Pędzel" i wybieramy rodzaj pędzla - koło i zmieniamy kolor pierwszoplanowy na biały. Następnie rysujemy kółka.



6. Zmieniamy krycie naszych kółeczek i przechodzimy do filtry - rozmycie - rozmycie Gaussa... rozmycie ustawiamy na 40,0 w jednym i drugim okienku, po ustawieniu klikamy ok. 




7. Powtarzamy punkty 3, 5 (rysowanie kółek) i 6. Jedyne co nam się tu zmieni to ustawienie rozmycia z 40,0 na 10,0. Oczywiście pamiętamy o tym, żeby nasza warstwa miała inną nazwę niż poprzednie.


8. Powtarzamy punkty 3, 5 (rysowanie kółek) i 6. Jedyne co nam się tu zmieni to ustawienie rozmycia z 10,0 na 1,0. Oczywiście pamiętamy o tym, żeby nasza warstwa miała inną nazwę niż poprzednie.


9. Tworzymy nową warstwę, zmieniamy nazwę i tym razem zmieniamy ustawienia z "przezroczyste" na "białe"


10. Wszystko zostanie pokryte białym kolorem, ale nie panikujemy. Tak właśnie ma być. Przechodzimy do filtry - renderowanie - chmury - różnica chmur... Wyskoczy nam okienko, w którym musimy ustawić parę rzeczy. Zaznaczamy "wylosuj", "kafelkowe" i zmieniamy rozmiar na 4,0. Klikamy ok.




11. Pojawi się nam biało-szare tło. Przechodzimy teraz do trybu i zmieniamy ze "zwykły" na "pokrywanie" 


12. Wykonujemy polecenie z punktu 3. Pamiętamy o zmianie nazwy dla warstwy. Wybieramy opcje gradient, ustawiamy  go na liniowy i wybieramy jeden z tęczowych gradientów.




13. Rozciągamy nasz gradient na obrazie, zmniejszamy krycie i wybieramy tryb "pokrywanie" 





14. Zaznaczamy sobie 2 warstwę z naszymi kółeczkami i wybieramy tryb "twarde światło". Teraz zaznaczamy sobie 3 warstwę z naszymi kółeczkami i wybieramy tryb  "połączenie ziarna". 





15. Teraz musimy tylko przełączyć w dół wszystkie warstwy zaczynając od dołu. Aby to wykonać musimy najpierw kliknąć prawym przyciskiem myszki na daną warstwę.



16. Zapisujemy. Plik - wyeksportuj jako... 


17. Efekt końcowy.






Czytaj dalej »

Doceń to!

20 kwietnia 2015


Robisz szablon, zdjęcia, grafikę lub nawet tworzysz muzykę czy jakieś ciekawe intro. Siedzisz nad tym godzinami, dniami, czasem nawet nocami. Piszesz teksty, jesteś dumny z tego, że został doceniony, ktoś go zauważył może nie są to tłumy ludzi, ale mimo wszystko urosłeś o te parę centymetrów. Cieszysz się kiedy to co piszesz jest dla innych przydatne i wiesz, że jest to tylko twoje. Nagle wszystko pęka jak bańka mydlana. Cała Twoja praca poszła na marne. Tracisz te centymetry, które uzyskałeś wcześniej, znowu jesteś mały, a ktoś inny zbiera pochwały. Szkoda, że twoim kosztem.
Jeśli znasz to uczucie, to uwierz, że ja też je znam. Doświadczyłam tego trzy razy. Jeśli nie poznałeś tego uczucia to zazdroszczę. Opowiem Ci mój drogi czytelniku te historie. Pewnego wieczoru siedzę sobie w łóżku z laptopem, popijając zieloną herbatę, przeglądając sobie ulubione blogi, gdzieś tam po między jednym wpisem, a drugim kartkuję książkę, wówczas jakaś lektura, chyba Zbrodnia i kara co nawet by się zgadzało, bo moje myśli po tym, co przeczytałam w komentarzu na swoim blogu zrobiły się nagle brutalne. Nie miałam już zamiaru zaglądać na swojego bloga, wpis napisany, komentarze zaakceptowane, odpowiedzi dodane, ale coś mnie tknęło, stwierdziłam, że sprawdzę czy na pewno komentarze pod ostatnim wpisem otrzymały odpowiedź ode mnie. Świeci się pomarańczowy link i informuje, że mam 2 komentarze. Jeden zwykły komentarz, opinia, drugi z linkiem, czytam, myślę sobie, że to jakiś żart, wchodzę i doznaje szoku - to niestety nie był żart. 13 letnia dziewczyna ukradła 15 moich wpisów razem ze zdjęciami. Tekst również nie był zmieniony, jedyne co to podmienione linki na jej tam gdzie było to konieczne. Złość, rozpacz, nie wiedziałam co mam z tym zrobić. Poradziłam się osób na grupie. Jeden chłopak nawet do mnie napisał i powiedział, że może mi pomóc. Pomógł, zgłosił jej bloga. Blog został usunięty, a ja do tej pory jestem wdzięczna temu chłopakowi. Po tej sytuacji myślałam, że to się już więcej nie zdarzy. Jak bardzo się myliłam! Miesiąc temu, wchodzę na jedną z najbardziej popularnych grup dla bloggerów, szukam jakiś ciekawych blogów, aż tu nagle widzę znajomy tytuł  "10 kroków do bycia super blogerem" ok, możecie uznać mnie za nienormalną, ale od razu włączyła mi się czerwona kontrolka, wchodzę, czytam, złość, mam ochotę krzyczeć. Mój wpis. Znowu, mój wpis na czyimś blogu. Załamałam się. Dziewczyna, która sobie przywłaszczyła mój wpis dodatkowo dała mi cios po niżej pasa. Jak jeszcze 10-14 latki jestem w stanie zrozumieć tak tutaj nie byłam. Dziewczyna 17 lat! Pierwszy cios, drugi cios dała w momencie kiedy przeczytałam jej kolejny wpis na temat tego czego nie lubi w blogosferze, pierwszy punkt jaki widniał w tym wpisie to "Kradzież wśród blogerów" jeśli myślicie, że w tym momencie wyszłam z siebie i stanęłam obok to macie racje. Trzeci cios jaki otrzymałam to w momencie kiedy przeczytałam jej rubrykę "O mnie" i 3 słowa, które tam widniały "[...] osoba z zasadami [...]". Na początku komentarze nie skutkowały, zarówno te na facebooku jak i te na jej blogu. Pod tym wpisem było ponad 20 komentarzy, które wychwalają wpis pod niebiosa i chwalą "autorkę" za dobre poczucie humoru. Nie uważam, żeby był to wpis nie wiadomo jak dobry, pisałam go na szarym początku mojej przygody z tym blogiem, ale było to moje. Czy byłam wtedy zazdrosna? Tak, byłam, bo ktoś zbierał pochwały za coś co nie należało do niego. Kolejny wpis na grupę. Nie wiedziałam - znowu - co robić. Uzyskałam pomoc od pana Arkadiusza, którego większość pewnie zna z forum blogowicz. Link do zgłoszenia. Wysłałam to zgłoszenie, dołączyłam zrzuty ekranu, po godzinie wpisu nie było. Trzecia sytuacja, mail, prośba o zrobienie szablonu, zrobiłam. Wszystko było ok do czasu, aż się dowiedziałam, że "koleżanka, która jest informatykiem szperała coś w szablonie i się popsuło" patrzę, bałagan w kodzie, wszystko pomieszane, kody jakieś takie jakby napisane do połowy. Poprawiam szablon, wszystko po kolei. Patrzę podpis zniknął. Między innymi przez to zrobił się bałagan, ktoś kombinował tak z usunięciem tego podpisu, że aż przekombinował. Dodałam podpis znowu do szablonu. Wszystko działa. Kolejna wiadomość, ta sama sytuacja. W końcu złość wzięła nade mnie górę pytam się po co usuwa podpis, usłyszałam odpowiedź, że ona już szablon zmieniła i to nie jest ten co ja robiłam tylko co ona. Owszem zmieniła, ale tylko kolory.

Takie sytuacje mogą spotkać każdego z nas i wiem, że parę osób się spotkało z sytuacjami bardzo podobnymi. Nie lekceważcie tego, jak tylko zauważycie, że ktoś ukradł waszą własność, róbcie zrzuty ekranu, zgłaszajcie. Trzeba dbać o swoje nawet jeśli dany tekst czy zdjęcie nie jest rewelacyjne, jest to mimo wszystko WASZE. Każdy nasz wpis, zdjęcie, grafika czy cokolwiek innego jest objęte prawami autorskimi. Jeśli ktokolwiek bez naszej wiedzy czy bez podania źródła użyczy sobie danego materiału z naszej strony, może ponieść odpowiedzialność karną. Nie zawsze kara jest w postaci finansowej, ale również może być to pozbawienie wolności do lat 3. Jeśli ktoś nie poniesie konsekwencji, nigdy się nie nauczy i oprócz was mogą zostać okradzeni inni blogerzy, bo nasz złodziej będzie myślał, że mu wolno. Od miesiąca jeszcze z większą uwagą przeglądam blogi, bez wyjątku. Może to już jest paranoja, ale nie chce po raz kolejny zobaczyć mojego wpisu na czyimś blogu, gdzie nawet nie ma podanego źródła. Po tych sytuacjach zaczęłam się zastanawiać ile tak naprawdę jest osób, które szczerze doceniają czyjąś pracę. Uwierzcie mi, nie raz i nie dwa siedzę po nocach, kładę się spać nawet po 1 w nocy, jak robię dla kogoś szablon lub pisze tekst. Kombinuje, rozrysowuje sobie jak ma wyglądać zdjęcie do danego wpisu. Planuje, moje wpisy mam rozpisane w kalendarzu (obecnie) do czerwca, biorąc pod uwagę to, że pisze 3 razy w tygodniu to wcale nie jest tak mało jakby się wydawało. Siłą rzeczy taka kradzież boli jeszcze bardziej niż by się to wydawało. Pracujesz nad daną rzeczą, poświęcasz swój czas, a ktoś inny wchodzi i bezkarnie używa myszki i opcji kopiuj - wklej. Gotowe, wpis napisany. Nikt się przecież nie dowie, że to nie ja napisałem/am. Nie ważne, że ktoś siedział nad tym długo i musiał się skupić nad tym jak to wszystko ładnie ubrać w słowa, ważne, że ja mam wpis, a to, że taki sam jak na tym czy tamtym blogu to nie ważne, przecież ja mam więcej obserwacji niż ona. Wydaje mi się, że właśnie takie myślenie jest u większości osób, które podejmują się blogowej kradzieży. Nie wiem czy to jest efekt tego, że takie osoby wynoszą takie zachowanie z domu, bo wszystko mają na wyciągnięcie ręki, bo rodzice dadzą, bo przecież muszą i nigdy nie usłyszeli słowa nie. Nie wiem czy jest to spowodowane brakiem pomysłów na wpisy. Jednak mimo wszystko, takiego zachowania nie da się wytłumaczyć. Chcesz być doceniany, chcesz żeby każdy się o tobie dobrze wyrażał, to bądź tak miły i zacznij doceniać prace innych zanim zaczniesz wymagać tego od swoich czytelników. Nie ważne czy obecnych czy przyszłych. Zacznij doceniać czyjąś pracę. Podoba ci się dany wpis czy zdjęcie? Skomentuj, udostępnij link, tak bardziej wyrazisz swoją aprobatę dla danego wpisu, zdjęcia czy grafiki. Kradzież to nie jest dobry pomysł na to aby pokazać, że dana rzecz nam się podoba. Kradzieżą pokazujesz, że nie szanujesz autora, że nie doceniasz jego pracy. Uważasz wtedy taką osobę nie jak autor danej rzeczy, a jako kogoś kto robi coś dla ciebie udostępniając np. swój tekst. Owszem, to jest dla ciebie. Dla ciebie i innych, ale do poczytania czy pooglądania, a nie po to abyś po najmniejszej linii oporu umieścił to na swoim blogu i podpisał jako swoje. Uwierz mi, autor zawsze się dowie o tym, że jego praca wylądowała na innej stronie, jako np. Zosi, a nie Józka, który to stworzył.
Czytaj dalej »

Jak przenieść stopkę wpisu na bok

15 kwietnia 2015


W poniedziałek przedstawiłam Wam proste DIY, a dziś zaprezentuje jak w prosty sposób możemy przenieść stopkę naszego wpisu (pole, na którym znajduje się autor, komentarze itd.) na bok - obojętnie lewy czy prawy. Nie musimy grzebać w HTML, a jedyne co musimy zrobić to pobawić się trochę CSSem. 
Przechodzimy: szablon - dostosuj - zaawansowane - dodaj arkusz CSS. teraz zaczyna się nasza zabawa. Musimy stworzyć sobie kod, a do tego będą potrzebne nam selektory, która znajdziecie tutaj. Ja stwierdziłam, że całej stopki nie będę przenosić. Przenosić będę tylko autora i komentarze.

Selektor dla autora to .post-author, a komentarzy to .comment-link. Musimy pamiętać o tym, że każdy element naszej stopki musimy zakodować oddzielnie, jeśli zrobimy wszystko na raz, to wszystkie pozycje będą jedna na drugiej. Kiedy mamy już nasze selektory to trzeba coś z nimi zrobić - no niestety sam selektor nie wystarczy więc najprościej jest zacząć od pozycjonowania 
.post-author {
position: absolute; - nie wpisujcie tu fixed czy innej pozycji, bo one się wam najzwyczajniej w świecie nie sprawdzą - nie będzie oczekiwanego efektu, a po mailach, które do mnie wysyłacie "bo kod mi nie działa" widzę, że duża część osób zmienia to, dlatego kod nie działa. 
Następnie pod spodem możemy (ale nie musimy) ustawić sobie szerokość, ja zawsze wolę tą szerokość dodać aby lepiej sobie wszystko dopasować. 
szerokość to width: 0px; - 0px jest wartością zmienną. Czyli nasz kod obecnie prezentuje się tak: 
.post-author {
position: absolute;
width: 0px;
Na razie nic się nie dzieje, oprócz tego, że autor nam się trochę w stopce przesuną, ale spokojnie, zaraz do wszystkiego dojdziemy. Następnie pod width możemy dodać top - odpowiada nam to za dany element w pionie, jest to przydatne, bo dzięki temu możemy ustalić sobie położenie danego elementu - nie musi on być np. na wysokości tytułu wpisu, możemy ustawić go na wysokości daty wpisu. 
Kod prezentuje się obecnie tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
Pamiętajmy o tym, że przy top, również mamy wartość zmienną. Tutaj akurat poruszyło nam się znacznie więcej, bo nasz autor poszedł w górę i jest w okolicach tytułu wpisu, ale to nadal nie jest to o co nam chodziło, bo nasz autor znajduje się gdzieś na środku po między wpisem a tytułem wpisu, lub zlewa się z tekstem. Następnie co musimy zrobić to ustalić, z której strony ma nasz autor być z lewej czy prawej. Ja sobie wybrałam lewą stronę, a więc pod top: 10px; dopisuje left: -100px; Oczywiście pamiętamy o tym, że wartość jest zmienna. Kod prezentuje się tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
left: -100px;
Już jesteśmy blisko końca, nasz autor powinien być już po lewej stronie, ale żeby to jeszcze jakoś lepiej wyglądało to możemy dodać sobie wyśrodkowanie tekstu. Pod left -100px; wpisujemy text-align: center; Kod prezentuje się tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
left: -100px;
text-align: center;
Kolejny element jaki jest dla nas istotny to wielkość czcionki w tym celu pod text-align: center; piszemy font-size: 7px - wartość zmienna. Nasz kod prezentuje się tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
left: -100px;
text-align: center;
font-size: 7px;
W tym momencie możemy zakończyć nasz kod, ale żeby nie było nudno, to pobawimy się jeszcze trochę. Do naszego kodu dodamy rodzaj czcionki czyli pod font-size: 7px; dopiszemy sobie font-family: Verdana; - oczywiście rodzaj czcionki możemy zmienić. Nasz kod będzie wyglądał teraz tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
left: -100px;
text-align: center;
font-size: 7px;
font-family: Verdana;
Do tego kodu dodałam jeszcze kolor czcionki color: #000 !important; - kolor oczywiście też możemy zmienić, następnie dodałam ozdobny paseczek z lewej strony za pomocą border-left: solid 4px #3a717d; - możemy ustawić ten paseczek również z prawej, zamieniając border-left na border-right oraz dodałam położenie dla tego ozdobnego paseczka padding-left: -10px; Teraz mój kod wygląda tak: 
.post-author {position: absolute;
width: 100px; 
top: 10px;
left: -100px;
text-align: center;
font-size:10px; 
font-family: Verdana;
color: #000 !important;  
border-left: solid 4px #3a717d; 
padding-left: -10px;}

A wygląda to tak: 


Pomyliłam się jeśli chodzi o podanie wyników dotyczących konkursu. Wyniki pojawią się nie 16.04 (jutro) tylko 17.04 (piątek) Przypominam również o ankiecie, którą znajdziecie w kolumnie bocznej. 
Czytaj dalej »

Jak dodać przycisk pin it do zdjęcia

8 kwietnia 2015


Pewnie większość z was wie co to jest Pinterest, a jak nie to już wszystko tłumaczę. Pinterest to jest wirtualna tablica korkowa. Tworzymy różne albumy, do których dodajemy np. zdjęcia naszych prac plastycznych, inspiracji i wiele więcej. Możemy również "przypinać pinezki" naszym ulubionym zdjęciom. Na moim profilu obecnie znajdują się zdjęcia z wykonanych dotychczas zadań z ZTD oraz TNK. W skrócie wytłumaczyłam o co chodzi z Pinterest, a teraz postaram się krótko i zwięźle wytłumaczyć o co chodzi z buttonem pin it.
Button pin it to nic innego jak wirtualna pinezka. Wstawiając taki button na swojego bloga inni po najechaniu myszką na zdjęcie mogą "przypiąć pinezkę", wtedy zdjęcie z danego bloga znajdzie się w waszych ulubionych. Button ten ułatwia to o tyle, że nie musimy kopiować zdjęć z danej strony (co nie zawsze nam wolno ponieważ na większości blogach, każdy autor wspomina o tym, że treść na blogu jest objęta prawami autorskimi) aby dodać je na do swojej tablicy, tylko od razu dajemy pinezkę i możemy cieszyć się naszą inspiracją w ulubionych.
Poniżej przedstawiam wam instrukcje jak możemy dodać nasz button pin it na bloga.

UWAGA! Przed dokonaniem jakichkolwiek zmian w edytorze kodu HTML, zrób kopię zapasową szablonu. 

1. Przechodzimy szablon - edytuj kod HTML

2. Wstawiamy kursor w obojętnie jakim miejscu w kodzie i klikamy ctrl + f. Otworzy nam się panel wyszukiwania, w który wpisujemy </body> 


3. Kiedy już wyszukamy danego elementu w kodzie to NAD </body> wklejamy kod


<script>
//<![CDATA[
var bs_pinButtonURL = "URL BUTTONU";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

Mała analiza kodu:

<script>
//<![CDATA[
var bs_pinButtonURL = "URL BUTTONU"; - URL BUTTONU zamieniamy na link naszego buttonu 
var bs_pinButtonPos = "center"; - pozycja naszego buttonu, możemy zmienić na left lub right. 
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>

Mój kod wygląda tak: 

<script>
//<![CDATA[
var bs_pinButtonURL = "http://i1291.photobucket.com/albums/b555/parma9/pin6_zpsy0buepei.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

4. Efekt końcowy




Na koniec, przygotowałam dla was 20 buttonów pin it do pobrania. Możecie je pobrać TUTAJ. Są one zapisane w pliku ZIP, a to oznacza, że po pobraniu trzeba będzie je rozpakować. Instrukcja poniżej.

Jak rozpakować plik ZIP

Nie ma tu wielkiej filozofii, po prostu klikamy na niego jak na każdy inny folder. Pojawiają nam się pliki, które musimy wyciąć i wkleić do innego folderu. Jednak jeśli ta metoda nie pomoże to wtedy musimy pobrać program WinRAR wtedy rozpakowywanie pliku ZIP wygląda tak:

1. Tworzymy nowy folder, do którego będziemy mogli przenieść nasze pliki.


2. Następnie klikamy na nasz plik ZIP (czyli folder z zamkiem) prawym przyciskiem myszki i wybieramy: Open with WinRAR


3. Nasze pliki otworzą nam się w WinRAR, zjeżdżamy na sam dół i wszystko zaznaczamy


4. Następnie klikamy na Extract To 



5. Pojawi nam się drugie okno, w którym szukamy naszego folderu, wybieramy go, a następnie klikamy OK


6. Nasze buttony są już rozpakowane i gotowe do użycia


W tym tutorialu znowu trzeba będzie wgrywać nasze buttony na stronę typu tinypic, tutorial do tego pojawił się we wpisie o personalizacji zakładki o mnie

Przypominam o wiosennym konkursie, w którym do wygrania jest design bloga. Wszelkie informacje dotyczące konkursu znajdziecie TUTAJ
Czytaj dalej »