30 lipca 2014

Jak zoptymalizować obrazki na blogu pod kątem wyszukiwania? [TUTORIAL]


Zastanawiałeś się, w jaki sposób wyszukiwarka znajduje obrazki? Przecież nie ma oczu i nie widzi, co się na nich znajduje. To tylko robot... A dlaczego, jeśli wpisujesz "kocurek", oprócz obrazków kotów, wyskakuje również "drapieżna" dziewczyna? Wszystko zależy od nazwy obrazka. Jeżeli ilustrację samochodu podpiszesz "koń", to po tej frazie zostanie ona wyszukana i wyświetlona. Staraj się zmieniać nazwy obrazków na takie, które faktycznie je opisują. Poprzez grafiki więcej ludzi trafi na twojego bloga. Tag alt służy do oznaczenia tekstem twojego obrazka. Jeśli nie zostanie on z jakiegoś powodu wyświetlony, internauta, zamiast białego okienka zobaczy jego nazwę.




Kod HTML wygląda tak:
<img src="kot.jpg" alt="kot" />




Jeśli zastosowałeś 3 opisane wyżej kroki, twoje obrazki zostały zoptymalizowane i wkrótce powinieneś zaobserwować wzrost odwiedzin na swoim blogu!

27 lipca 2014

Jak dodać autora na Bloggerze? [TUTORIAL]


By dodać nowego autora do swojego bloga na Bloggerze wejdź w panel admina i postępuj zgodnie z obrazkiem poniżej:

Autor otrzyma zaproszenie drogą mailową, które powinien otworzyć i zaakceptować poprzez kliknięcie w link w wiadomości.

Jak zmienić wygląd postów na oś czasu na Bloggerze? [TUTORIAL]


Demo

Z tego poradnika dowiesz się, jak samodzielnie zmienić wygląd postów na stronie głównej Bloggera, by przypominały oś czasu. Jest to trudny tutorial, także cierpliwości! Zaczynamy!


Kliknij w edytor i wciśnij skrót CTRL + F


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <style type='text/css'>
            .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
                padding: 0px;
                border: 0px;
            }
            .post-footer {
                display: none;
            }
            .post {
                margin-bottom: 50px;
                padding-bottom: 0px;
                background: none;
                border: none;
            }
            .jump-link a {
                display: none;
            }
            h3.post-title a {
                display: none;
            }
            .date-header {
                display: none;
            }
            *, .timeline:after, .timeline:before {
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
            .timeline {
                position: relative;
                padding: 30px 0 50px 0;
                font-family: Arial, sans-serif;
            }
            .timeline:before {
                content: &#39;
                &#39;
                ;
                position: absolute;
                width: 5px;
                height: 100%;
                margin:0px;
                top: 0;
                left: 200px;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
            }
            .event {
                position: relative;
                margin-bottom: 80px;
                padding-right: 40px;
            }
            .thumb {
                position: absolute;
                width: 90px;
                height: 90px;
                box-shadow: 0 0 0 8px #87939E, 0 1px 1px rgba(255, 255, 255, 0.5);
                background-repeat: no-repeat;
                border-radius: 50%;
                -webkit-transform: scale(0.8) translateX(24px);
                -moz-transform: scale(0.8) translateX(24px);
                -o-transform: scale(0.8) translateX(24px);
                -ms-transform: scale(0.8) translateX(24px);
                transform: scale(0.8) translateX(24px);
            }
            .thumb:before {
                content: &#39;
                &#39;
                ;
                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);
                position: absolute;
                height: 8px;
                z-index: -1;
                width: 50px;
                top: 42px;
                left: 100%;
                margin-left: 8px;
            }
            .thumb span {
                color: #87939E;
                width: 100%;
                text-align: center;
                font-weight: 700;
                font-size: 15px;
                text-transform: uppercase;
                position: absolute;
                bottom: -30px;
            }
            .event label, .event input[type=&quot;
            radio&quot;
            ] {
                width: 24px;
                height: 24px;
                left: 158px;
                top: 36px;
                position: absolute;
                display: block;
            }
            .event input[type=&quot;
            radio&quot;
            ] {
                opacity: 0;
                z-index: 10;
                cursor: pointer;
            }
            .event label:after {
                content: &quot;
                \2713&quot;
                ;
                background: #8995A1;
                border-radius: 50%;
                color: #fff;
                font-size: 20px;
                height: 100%;
                width: 100%;
                font-weight: bold;
                left: -2px;
                top: -3px;
                line-height: 24px;
                position: absolute;
                text-align: center;
            }
            .content-perspective {
                margin-left: 230px;
                position: relative;
                perspective: 600px;
                -webkit-perspective: 600px;
                -moz-perspective: 600px;
                -o-perspective: 600px;
                -ms-perspective: 600px;
            }
            .content-perspective:before {
                content: &#39;
                &#39;
                ;
                width: 34px;
                left: -44px;
                top: 48px;
                position: absolute;
                height: 1px;
                z-index: -2;
                background: #fff;
            }
            .post-content {
                transform: rotateY(10deg);
                transform-origin: 0 0;
                transform-style: preserve-3d;
            }
            .blog-post-body {
                position: relative;
                padding: 20px;
                color: #333;
                border-left: 5px solid #8995A1;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                background: #F9F9F9;
            }
            .blog-post-body h3 {
                border: none;
                margin: 0px;
            }
            .blog-post-body h3 a {
                font-size: 21px;
                padding: 5px 0 5px 0;
                color: #86919D;
                margin: 0px;
                text-decoration: none;
                border: none;
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .content-perspective .blog-post-body h3 a {
                color: #ff4c47;
            }
            .blog-post-body p, .thumb span, .event label {
                -webkit-backface-visibility: hidden;
            }
            .blog-post-body p {
                font-size: 15px;
                max-height: 0px;
                overflow: hidden;
                color: rgba(0, 0, 0, 0);
                text-align: left;
            }
            .blog-post-body:before {
                content: &#39;
                \25c2&#39;
                ;
                font-weight: normal;
                line-height: 86px;
                font-size: 86px;
                position: absolute;
                color: #8995A1;
                left: -41px;
                width: 100%;
                height: 100%;
                top: 3px;
                z-index: -1;
            }
            .thumb, .thumb span, .blog-post-body h3 {
                transition: all 0.6s ease-in-out 0.2s;
                -webkit-transition: all 0.6s ease-in-out 0.2s;
                -moz-transition: all 0.6s ease-in-out 0.2s;
                -o-transition: all 0.6s ease-in-out 0.2s;
                -ms-transition: all 0.6s ease-in-out 0.2s;
                transition: all 0.6s ease-in-out 0.2s;
            }
            .blog-post-body {
                transition: box-shadow 0.8s linear 0.2s;
                -webkit-transition: box-shadow 0.8s linear 0.2s;
                -moz-transition: box-shadow 0.8s linear 0.2s;
                -o-transition: box-shadow 0.8s linear 0.2s;
                -ms-transition: box-shadow 0.8s linear 0.2s;
            }
            .post-content {
                transition: transform 0.8s cubic-bezier(.59, 1.45, .69, .98) 0.2s;
                -webkit-transition: -webkit-transform 0.8s cubic-bezier(.59, 1.45, .69, .98) 0.2s;
                -moz-transition: -moz-transform 0.8s cubic-bezier(.59, 1.45, .69, .98) 0.2s;
                -o-transition: -o-transform 0.8s cubic-bezier(.59, 1.45, .69, .98) 0.2s;
                -ms-transition: -ms-transform 0.8s cubic-bezier(.59, 1.45, .69, .98) 0.2s;
            }
            .blog-post-body p {
                transition: max-height 0.5s linear, color 0.3s linear;
                -webkit-transition: max-height 0.5s linear, color 0.3s linear;
                -moz-transition: max-height 0.5s linear, color 0.3s linear;
                -o-transition: max-height 0.5s linear, color 0.3s linear;
                -ms-transition: max-height 0.5s linear, color 0.3s linear;
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked + label:after {
                content: &#39;
                \2714&#39;
                ;
                color: #fff;
                background: #ff4c47;
                box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .content-perspective:before {
                background: #ff4c47;
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .content-perspective .blog-post-body h3 {
                color: #ff4c47;
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .content-perspective .post-content {
                transform: rotateY(-5deg);
                -webkit-transform: rotateY(-5deg);
                -moz-transform: rotateY(-5deg);
                -o-transform: rotateY(-5deg);
                -ms-transform: rotateY(-5deg);
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .content-perspective .blog-post-body {
                border-color: #ff4c47;
                box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .content-perspective .blog-post-body p {
                max-height: 460px;
                color: rgba(0, 0, 0, 0.6);
                transition-delay: 0s, 0.6s;
                -webkit-transition-delay: 0s, 0.6s;
                -moz-transition-delay: 0s, 0.6s;
                -o-transition-delay: 0s, 0.6s;
                -ms-transition-delay: 0s, 0.6s;
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .content-perspective .blog-post-body:before {
                color: #ff4c47;
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .thumb {
                transform: scale(1);
                box-shadow: 0 0 0 8px rgba(242, 99, 40, 1), 0 1px 1px rgba(255, 255, 255, 0.5);
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -o-transform: scale(1);
                -ms-transform: scale(1);
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .thumb span {
                color: #ff4c47;
            }
            .event input[type=&quot;
            radio&quot;
            ]:checked ~ .thumb:before {
                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);
            }
            @media screen and (max-width: 850px) {
                .blog-post-body h3 {
                    font-size: 20px;
                }
                .blog-post-body p {
                    font-size: 14px;
                    text-align: justify;
                }
                .event input[type=&quot;
                radio&quot;
                ]:checked ~ .content-perspective .blog-post-body p {
                    max-height: 500px;
                }
            }
            @media screen and (max-width: 540px) {
                .timeline:before {
                    left: 50px;
                }
                .event {
                    padding-right: 0px;
                    margin-bottom: 100px;
                }
                .thumb {
                    transform: scale(0.8);
                    -webkit-transform: scale(0.8);
                    -moz-transform: scale(0.8);
                    -o-transform: scale(0.8);
                    -ms-transform: scale(0.8);
                }
                .event input[type=&quot;
                radio&quot;
                ] {
                    width: 100px;
                    height: 100px;
                    left: 0px;
                    top: 0px;
                }
                .thumb:before, .event input[type=&quot;
                radio&quot;
                ]:checked ~ .thumb:before {
                    background: none;
                    width: 0;
                }
                .event label {
                    display: none;
                }
                .content-perspective {
                    margin-left: 0px;
                    top: 80px;
                }
                .content-perspective:before {
                    height: 0px;
                }
                .post-content {
                    transform: rotateX(-10deg);
                    -webkit-transform: rotateX(-10deg);
                    -moz-transform: rotateX(-10deg);
                    -o-transform: rotateX(-10deg);
                    -ms-transform: rotateX(-10deg);
                }
                .event input[type=&quot;
                radio&quot;
                ]:checked ~ .content-perspective .post-content {
                    transform: rotateX(10deg);
                    -webkit-transform: rotateX(10deg);
                    -moz-transform: rotateX(10deg);
                    -o-transform: rotateX(10deg);
                    -ms-transform: rotateX(10deg);
                }
                .blog-post-body {
                    border-left: none;
                    border-top: 5px solid #8995A1;
                }
                .event input[type=&quot;
                radio&quot;
                ]:checked ~ .content-perspective .blog-post-body {
                    border-color: #ff4c47;
                    box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);
                }
                .blog-post-body:before {
                    content: &#39;
                    \25b4&#39;
                    ;
                    left: 33px;
                    top: -32px;
                }
                .event input[type=&quot;
                radio&quot;
                ]:checked ~ .content-perspective .blog-post-body p {
                    max-height:300px;
                }
            }
            ul.timeline {
                list-style-type: none;
            }
        </style>
    </b:if>
</b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <ul class='timeline'>
            <li class='event'>
                <input checked='checked' name='tl-group' type='radio' />
                <label/>
                <b:if cond='data:post.thumbnailUrl'>
                    <img class='thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' />
                </b:if>
                <div class='thumb'>
                    <b:if cond='data:post.dateHeader'><span><data:post.dateHeader/></span>
                    </b:if>
                </div>
                <div class='content-perspective'>
                    <div class='post-content'>
                        <div class='blog-post-body'>
                            <h3><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3>
                            <p>
                                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                                    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                                        <data:post.snippet/>
                                    </b:if>
                                </b:if>
                            </p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if>

Jeśli mimo prób nie udało ci się dokonać zmian, możesz pobrać gotowy szablon Prosty (simple) już z wprowadzonym kodem.

Pobierz


By data postów wyświetlała się prawidłowo zastosuj ustawienia takie, jak na poniższym obrazku:

25 lipca 2014

Jak zainstalować program Photoscape do obróbki zdjęć? [TUTORIAL]


Dlaczego warto używać programu Photoscape? Ponieważ jest darmowy oraz posiada wiele funkcji obróbki zdjęć oraz tworzenia własnych ilustracji. Co prawda nie jest tak zaawansowany jak Photoshop, jednak początkującym użytkownikom z pewnością wystarczy. 

W tym poradniku pokażemy, jak zainstalować Photoscape na swoim komputerze. 

1. Wejdź na stronę http://www.photoscape.org/ps/main/download.php, po czym kliknij w wybrany jeden z 3 buttonów.


2. Zapisz instalkę na dysku.


3. Następnie wykonaj po kolei kroki opisane na obrazku poniżej.


Gotowe! Program zainstalowany! Jeśli chodzi o spolszczenie, to nie martw się, gdyż Photoscape je posiada. Po uruchomieniu program automatycznie wykryje język systemu i dostosuje się do niego - także nie musisz nic więcej robić, tylko cieszyć się z polskiego interfejsu :)

24 lipca 2014

Jak podpiąć własną domenę na Bloggerze? [Tutorial]


Na początku tego poradnika warto stwierdzić, że ustawianie domeny niestandardowej na Bloggerze jest dość skomplikowane. Bez pewnych danych, wręcz niemożliwe. Jednak dzięki tutorialowi krok po kroku, bez większych problemów powinieneś poradzić sobie z tym zadaniem. My posłużymy się panelem administracyjnym domeny założonej na OVH, jednak wszelkie pola analogicznie możesz znaleźć również w panelach innych dostawców. Wystarczy poszukać.

Na początku musisz zarejestrować domenę. Jest to złożony proces, gdyż trzeba uzupełnić trochę danych. Nie będziemy zajmować się tym tematem, gdyż formularze rejestracji u każdego dostawcy są inne.Skupmy się na samej konfiguracji.

W przypadku OVH po uzupełnieniu formalności i wysłaniu zgłoszenia, powinieneś otrzymać 3 maile. Fakturę, identyfikator klienta oraz informację o wprowadzeniu danych do rejestru domeny. Teraz domena działa i jest gotowa na podpięcie pod twojego bloga. Zaczynamy!

I. Zaloguj się do panelu OVH i z lewego menu wybierz domenę, którą chcesz podpiąć pod bloga.


II. Kliknij Domeny & DNS z lewego menu lub ikonkę poniżej.


III. Kliknij Strefa DNS.


IV. Kliknij w symbol ołówka (opcja zmień) przy pierwszym na liście CNAME.


V. Z rozwijanej listy Subdomena wybierz www, w polu Adres docelowy wklej ghs.google.com i kliknij Zatwierdź.


VI. Rekord CNAME gotowy. Teraz czas na ustawienie 4 pól A z następującymi adresami IP:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

VII. Pierwszy wpis A edytuj, a 3 następne dodaj. Kliknij symbol ołówka przy A na liście.


VIII. Z rozwijanej listy Subdomena wybierz A, z listy Wybierz adres IP wybierz Inny adres docelowy, w polu Adres docelowy wklej 216.239.32.21 i kliknij Zatwierdź.

 
IX. Następne 3 adresy IP konfigurujesz analogicznie, ale zaczynasz od kliknięcia w Pole A.


X. Pole Subdomena pozostaw puste, a w Adres docelowy wpisz 216.239.34.21. Kliknij Zatwierdź.


XI. Znów kliknij pole A.


XII. Pole Subdomena pozostaw puste, a w Adres docelowy wpisz 216.239.36.21. Kliknij Zatwierdź.
 

XIII. Znów kliknij pole A.


XIV. Pole Subdomena pozostaw puste, a w Adres docelowy wpisz 216.239.38.21. Kliknij Zatwierdź.


XV. Sprawdź dobrze, czy nie pomyliłeś adresów IP, gdyż są do siebie bardzo podobne! Nie zamykaj jeszcze panelu administracji domeną, gdyż za chwilę tu wrócisz!

XVI. Kolejny etap to konfiguracja ustawień Bloggera. Zaloguj się na swoim koncie, wybierz Ustawienia => Podstawowe i w polu Publikowanie kliknij +Ustaw dla swojego bloga URL uzyskany od innej firmy.


XVII. Wpisz/wklej adres zakupionej domeny razem z www i kliknij Zapisz.


XVIII. Teraz wyskoczy błąd 12, co jest prawidłowym następstwem weryfikacji, czy podpinana domena jest twoja. Blogger wyświetli 2 ważne dla ciebie kody: jeden krótszy, drugi dłuższy (dla każdego użytkownika jest on inny!). Pojawi się coś podobnego do:

katw3ay3q74m                     gv-2yf3imvfenpnh6.dv.googlehosted.com 


XIX. Wejdź znowu do panelu administracji domeną do menu Strefa DNS i kliknij w pole CNAME.


XX. W miejsce Subdomena wpisz krótszy kod, który wyświetlił ci Blogger: katw3ay3q74m (oczywiście w twoim przypadku będzie inny), a w miejsce Adres docelowy wpisz: gv-2yf3imvfenpnh6.dv.googlehosted.com (ten też będzie w twoim przypadku inny). Na koniec Zatwiedź zmiany.


XXI. Wróć do ustawień Bloggera i jeszcze raz kliknij Zapisz. Teraz nie powinien już pojawić się żaden błąd.


XXII. Przy adresie z nową domeną kliknij Edytuj.


XXIII. Zaznacz pole Przekierowanie z domeny.... i kliknij Zapisz. Kiedy ktoś wejdzie na twój stary adres, automatycznie zostanie przeniesiony na nowy.


Gratulacje! Twoja nowa domena została połączona z blogiem!

Szablony dla Bloggera