Zmiana wyglądu popularnych wpisów

poniedziałek, 28 września 2015


Każdy zna Bloggerowy gadżet "popularne posty" i każdy zapewne wie, jak on wygląda bez pomocy kodu. Swoim wyglądem nie przyciąga zbyt wielkiej uwagi, jest bardzo tradycyjny, ale w dzisiejszym wpisie pokażę Wam jak w prosty sposób możemy zmienić jego wygląd.

1. Pamiętaj, żeby popularne wpisy wyświetlały się poprawnie po zastosowaniu tego kodu, musisz ustawić je w ten sposób:


2. Przechodzimy do szablon - edytuj kod HTML 


3. Klikamy kursorem w dowolne miejsce w kodzie i wybieramy ctrl +f, a następnie w okno wyszukiwania, które nam się pojawi wpisujemy </body> i klikamy enter.

4. Nad </body> wklejamy kod:


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

5. Zapisujemy szablon. Teraz wyszukujemy ]]></b:skin> 

6. Nad ]]></b:skin> wklej kod:


.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0 0 0 -10px; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(255, 255, 255, 0.95); color: #95c6e8; font-family: Josefin Sans; font-size: 17px;  padding: 10px 0; position: absolute; right: 10px; text-align: center; top: 100px; width: 100%; }
.item-snippet {display: none;}
.item-content:hover img {
opacity: 0.70;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;}
.item-content {position: relative; }

Zapisz szablon.

7. Efekt końcowy:


Udostępnij ten wpis:
Czytaj dalej »

Przezroczysty napis na zdjęciu - GIMP

środa, 23 września 2015


W dzisiejszym wpisie będą dwie małe instrukcje, dotyczące zrobienia efektu przezroczystego napisu na zdjęciu lub teksturze w GIMPie. Będą to bardzo proste instrukcje, z którymi każdy powinien sobie poradzić. Nie przeciągając, zapraszam na zapoznanie się z instrukcjami.


Instrukcja pierwsza

1. Otwieramy zdjęcie/teksturę w GIMPie


2. Wybieramy opcje pisania tekstu, zaznaczamy miejsce gdzie ma nasz tekst powstać i wpisujemy w powstałe okienko. Pamiętajmy, że tekst MUSI być w kolorze czarnym.




3. Teraz wybieramy filtry - światło i cień - efekt xach. Pojawi nam się ramka, nic w niej nie zmieniamy, tylko klikamy ok.


4. Pozostajemy na warstwie z napisem i klikając prawym przyciskiem na nasz tekst wybieramy edycja - wyczyść.


5. Efekt końcowy:



Instrukcja druga

1. Otwieramy nasze zdjęcie/teksturę w GIMPie


2. Klikamy prawym przyciskiem myszki na naszą teksturę i wybieramy nowa warstwa.


Pojawi nam się drugie okno, w którym wybieramy białe i klikamy ok.


3. Nasza tekstura zostanie pokryta białą warstwą. Nie ma co panikować, tak ma być.


Klikając na białą warstwę, zmniejszamy jej krycie.


4. Znowu wybieramy tworzenie tekstu. Pamiętając o tym, żeby tekst był w kolorze czarnym.


5. Klikamy na warstwę z tekstem prawym przyciskiem myszki i wybieramy opcje kanał alfa na zaznaczanie.


6. Przejdź do białej warstwy i kliknij delete na klawiaturze.


7. Teraz przejdź na warstwę z tekstem, kliknij na nią prawym przyciskiem myszki i wybierz usuń warstwę.



Efekt końcowy:


Udostępnij ten wpis:
Czytaj dalej »

Efekty i zmiana wyglądu zdjęć we wpisie

poniedziałek, 7 września 2015


Dzisiaj nie będzie wielkiej instrukcji. Nie będzie trzeba kombinować, zmagać się z tym co nam przez przypadek nie wyszło. Dzisiaj będziemy pracować tylko w CSS, a Wasza praca będzie się ograniczać tylko do kopiuj - wklej. Nic w kodzie nie trzeba szukać. Wpis na pewno wielu osobom przypadnie do gustu, bo zauważyłam, że większość osób nie lubi bawić się w wyszukiwanie czegoś w kodzie, zmienianie kodu. Zawsze większą popularność mają tzw. gotowce, a ten wpis nie wątpliwie do takich gotowców należy.

Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS 

1. Wysunięcie zdjęcia po najechaniu na nie myszką.


.post img{ -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
.post img:hover { -o-transition: all 0.6s;
 -moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1); }
2. Zaokrąglone narożniki zdjęć we wpisie


.post img{
padding: 0px !important;
border-radius: 10px;
}

3. Obracające się zdjęcie po najechaniu na nie myszką


.post img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.post img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
4. Ścięte boki zdjęć


.post img{
padding: 0px !important;
border-radius: 0 15% 0 15%;
}

5. Czarno-białe zdjęcie po najechaniu na nie myszką


.post img
{ -webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }
.post img:hover { -webkit-filter:
grayscale(100%); }

6. Efekt zamglonego zdjęcia po najechaniu na nie myszką


.post img { opacity: 1;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
}
.post img:hover {
opacity: 0.70;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
}
Wszystkie zdjęcia użyte do zaprezentowania efektów są mojego autorstwa. Zostały wykonane aparatem FujiFilm FinePix S6500fd. 
Udostępnij ten wpis:
Czytaj dalej »

Lista zadań - 8 grafik do pobrania za darmo

środa, 2 września 2015


Ostatnio na blogu pojawił się wpis o planach lekcji do pobrania za darmo. Plany lekcji cieszyły się zainteresowaniem, ale jak dobrze dziewczyny zauważyły na studiach się nie przydają - niestety. Iza z bloga Fajna sprawa podała mi pewien pomysł, mianowicie wspomniała o liście zadań. Nie wątpliwie taka lista lepiej się sprawdzi na studiach niż plan lekcji. Jednak nie tylko na studiach można takiej listy używać, osobiście korzystałam z takiej listy jak chodziłam jeszcze do szkoły, łączyłam ją wtedy z planem lekcji. W pracy również taka lista się sprawdza. Dlatego dziś mam dla Was 8 list zadań do pobrania za darmo.





Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life