Zmiana wyglądu popularnych wpisów

28.09.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:


Czytaj dalej »

Przezroczysty napis na zdjęciu - GIMP

23.09.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:


Czytaj dalej »

Rozwijane menu na podstawie profilki.pl

16.09.2015


Jak pewnie zauważyliście na większości blogów można zobaczyć drop down menu czyli menu rozwijane. Nikogo nie dziwi czemu taka forma menu staje się popularna - wiadomo, można zmieścić więcej kategorii, bez tworzenia 20 statycznych stron. Dzięki rozwijanemu menu wszystko wygląda bardziej estetycznie.

Nie każdy zna HTML oraz CSS. Nie każdy wie gdzie jaki kod wkleić i co zrobić aby dostosować dane menu pod siebie. Nie każdy lubi grzebać w kodzie. Strona profilki.pl wychodzi takim osobom na przeciw, ponieważ daje nam możliwość stworzenia takiego menu za pomocą paru kliknięć. W dzisiejszej instrukcji pokaże Wam jak takie menu zrobić.

1. Wchodzimy na profilki.pl i szukamy "menu rozwijane", klikamy w dany kwadracik.

2. Przeszliśmy na stronę tworzenia menu. Mamy już pokazane gdzie zacząć, a na dole mamy poszczególne style, kolory, opcje zaawansowane i położenie.



3. Po kliknięciu na "+" pojawi nam się drugie okno, które musimy uzupełnić.



4. Stworzyliśmy stronę rozwijaną, więc teraz będziemy dodawać do niej podkategorie.




W ten sam sposób dodajemy każdą następną podkategorię.

4a. Rozwijana podkategoria. Generator menu daje nam możliwość, aby podkategoria również się rozwijała. Efekt będzie tak jak u mnie w menu kategorie - instrukcje - blogowe, graficzne.




5. Kolory.


I - Tło menu
II - Kolor ramki
III - Kolor tekstu
IV - Kolor tekstu po najechaniu myszką
V - Tło po najechaniu myszką
VI - Tło rozwijanej części menu
VII - Kolor ramki, rozwijanej części menu
VIII - Kolor tekstu, rozwijanej części menu
IX -  Kolor tekstu, rozwijanej części menu po najechaniu myszką
X - Tło, rozwijanej części menu po najechaniu myszką

6. Opcje zaawansowane.











7.  Na koniec wybieramy położenie, jeśli nie chcemy aby na dole naszego menu widniał napis "profilki.pl", to odhaczamy "pozostawić podpis?", a na koniec klikamy "zrobione".


Po kliknięciu "zrobione" pokażą nam się dwa małe okienka, które umożliwiają wstawienie menu na bloga. Klikamy "weź kod" lub "dodaj na blogspot". Wybierając pierwszą opcje, instalacja gadżetu będzie wyglądać tak:  układ - dodaj gadżet - HTML/JavaScript. Wybierając drugą opcje, zostaniemy od razu przeniesieni do układu bloggera wcześniej wybierając z listy blog, na którym ma być umieszczony nasz gadżet.


PS. Cały czas możecie zadawać pytania do FAQ
Czytaj dalej »

Copyright © Szablon wykonany przez Blonparia