Zmiana wyglądu popularnych wpisów

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() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</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:

Czytaj dalej

Przezroczysty napis na zdjęciu - GIMP

Przezroczysty napis na zdjęciu - GIMP

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:

Czytaj dalej

Efekty i zmiana wyglądu zdjęć we wpisie

CSS Tutorial

Efekty i zmiana wyglądu zdjęć we wpisie

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.

Czytaj dalej

Zmiana wyglądu popularnych wpisów