Jak zainstalować Disqusa i importować komentarze - Blogger

25 stycznia 2016


System komentarzy Disqus, jest wszystkim znany. Jedni go uwielbiają, drudzy nie chcą na niego patrzeć. Mimo wszystko ma więcej zwolenników niż przeciwników. Świadczy to o tym, że co raz więcej osób pisze do mnie maile z pytaniem "Jak zainstalować Disqusa? Jak importować komentarze?". Odpowiadanie każdemu z osobna na te pytania mijało się z celem, bo skoro więcej osób chce znać odpowiedzi na to pytanie, to chyba warto napisać o tym wpis. Nie będę ukrywać tego, że w internecie jest sporo tego typu wpisów, ale jak komuś się ten wpis przyda to nie będę ukrywała swojego szczęścia :)

1. Oczywiście, jak nie mamy konta na Disqus, to musimy sobie je założyć.


po założeniu konta Disqus, pojawi nam się strona, na której musimy zaobserwować 3 profile, aby przejść dalej




2. Kiedy mamy już założone konto, to możemy zabrać się za dodawanie Disqusa do naszego bloga


3. Ustawienia. Cały czas jesteśmy na swoim profilu Disqus, żeby zmienić ustawienia wystarczy przejść z zakładki "Community" do "Settings"



Czytaj dalej »

Kilka przydatnych kodów CSS, które pomogą Ci odmienić bloga w parę minut

18 stycznia 2016


Czasem wystarczy kilka chwil, aby poprawić coś na naszym blogu i to wcale nie musi być trudne - naprawdę. Wiem, że niektóre osoby przeraża kombinowanie coś z szablonem, ale ja Wam dziś przedstawię kilka kodów, które pozwolą Wam zmienić dany gadżet/wygląd bloga w bardzo prosty sposób za pomocą kodów CSS, bez grzebania w HTML. To jak gotowi? :)

Oczywiście żeby dodać kod CSS musimy przejść do szablon - dostosuj - zaawansowane - dodaj arkusz CSS

1. Zmiana wyglądu popularnych wpisów

.item-thumbnail img{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}


.item-thumbnail img{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

2. Ukrycie stopki wpisu 

.post-footer {display: none;}
.item .post-footer {display: block;}

3. Zmiana wypunktowania i numeracji we wpisie

.post-body li {
list-style: none;
list-style-image: url('LINK DO OBRAZKA');
}


4. Wyjustowanie tekstu we wpisie 
.column-center-inner {text-align: justify;}

5. Brak podkreślenia linków

a:hover {text-decoration: none;}

6. Usunięcie tytułów gadżetów 
.column-right-outer h2 { 
display:none; 
}

7. Zmiana wyglądu polecanego wpisu
#FeaturedPost1 {background: #fafafa;
text-align: justify;
color: #444;
line-height: 15px;
padding: 20px;}
#FeaturedPost1 a:link {font-size: 20px; padding: 0px;
font: normal bold 13px 'Open Sans', serif;
letter-spacing: 1px;}

Efekt przed i po: 


8. Wyśrodkowanie nagłówka
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

9. Wyśrodkowanie stopki wpisu

.post-footer {text-align: center; }

10. Podkreślenie tytułów gadżetów

.sidebar .widget h2 {
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #000;
margin-left: 0px;
margin-right: 0px;
padding: 5px 0px 0px 0px !important;
margin-bottom: 5px;
}
Czytaj dalej »

Jak zmienić wygląd formularza kontaktowego

15 stycznia 2016


Pewnie każdy z Was zna Bloggerowy formularz kontaktowy, kiedyś pojawiła się jedna instrukcja na temat tego gadżetu. Pokazywałam Wam w niej, jak wstawić formularz kontaktowy w podstronie. Teraz nadszedł czas na to, aby poprawić wygląd naszego gadżetu. Przyznacie chyba sami, że pierwotny wygląd tego gadżetu nie zachwyca.


To teraz czas na zmiany.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy poniższy kod:


.contact-form-widget {max-width:100%; width:auto;}
.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
.contact-form-button-submit {background: #e3cad1; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 310px; cursor: pointer; line-height:45px; font-size: 14px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;}
.contact-form-button-submit:hover {background: #f5e9e2; border: none;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;}
.contact-form-email, .contact-form-name {margin-bottom:10px;}

Analiza kodu: 

.contact-form-widget {max-width:100%; width:auto;}
.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
.contact-form-button-submit {background: #e3cad1; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 310px; cursor: pointer; line-height:45px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;}
.contact-form-button-submit:hover {background: #f5e9e2; border: none;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;}
.contact-form-email, .contact-form-name {margin-bottom:10px;}

Kolor tła ramek imię, e-mail, wiadomość 
Styl obramowania ramek imię, e-mail, wiadomość 
Kolor obramowania ramek imię, e-mail, wiadomość 
Wysokość ramek imię, e-mail, wiadomość 
Rozmiar czcionki (chodzi o rozmiar czcionki, którą uzupełniamy nasze ramki)
Marginesy wewnętrzne 
Kolor tła, przycisku "wyślij" 
Wysokość przycisku "wyślij"
Szerokość przycisku "wyślij"
Wielkość i rodzaj czcionki przycisku "wyślij" 
Zaokrąglone rogi przycisku "wyślij"
Tło przycisku "wyślij" po najechaniu myszką 

To już wszystko. Szybko, łatwo i przyjemnie. Mam nadzieję, że komuś się ten kod przyda :) 
Czytaj dalej »

Jak zrobić i wstawić ruchome banery na bloga

8 stycznia 2016


Ostatnio bardzo dużo osób pytało się jak zrobić i wstawić ruchome banery na bloga. Nie wiem skąd nagle takie duże zainteresowanie, ale nie ważny jest powód. Najważniejsze jest to, że ta instrukcja pomoże nam zrobić porządek z dużą ilością banerów na naszym blogu, które tylko zajmują miejsce w kolumnie bocznej, przez co blog, potrafi ciągnąć się w nieskończoność. Między nami mówiąc, miałam nie publikować tej instrukcji z paru powodów, ale nie wnikajmy w to teraz. Mam nadzieję, że komuś się przyda ta instrukcja.

Instrukcja jest bardzo prosta i opierać się będzie tylko i wyłącznie na kodzie HTML/JavaScript i wrzuceniu zdjęć na hosting, więc nie ma opcji, abyśmy coś popsuli

1. Przygotowujemy sobie banery, które mają nam się wyświetlać + linki, aby po kliknięciu w baner odsyłało nas na daną stronę.

2. Przechodzimy do strony TinyPic, która umożliwia nam hosting zdjęć/plików graficznych i wklejamy po kolei nasze banery.

Zaznaczamy opcje "Dodaj plik ze swojego dysku", a następnie wybieramy "Wybierz plik".  Po wybraniu pliku wybierz "Prześlij".




Jest opcja wybrania wielu plików na raz (dokładnie to 2), ale u mnie to nie przeszło, możecie jednak próbować, może akurat Wam się uda :)

3. Kiedy nasze pliki już się pojawią, to pod obrazkiem będziemy mieli link, który będzie nam potrzebny. Musimy go skopiować i wkleić na chwilę do notatnika, aby się "nie zgubił".


4. Przechodzimy teraz do układ - dodaj gadżet - HTML/JavaScript i dodajemy poniższy kod:

<marquee behavior="scroll">
<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA" />
</a>
<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA" />
</a>
<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA" />
</a>
</marquee>

Zdania pogrubione, odpowiednio podmieniamy. Jeśli chcemy mieć więcej niż 3 banery to po ostatnim </a>, a przed </marquee> wstawiamy:

<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA" />
</a>
Czytaj dalej »

Efekt dla linków w podstronach

4 stycznia 2016


Jakiś czas temu dostałam mnóstwo pytań o to, jak zmieniłam linki w podstronie z instrukcjami blogowymi i graficznymi. Po dłuższym namyśle postanowiłam, że zrobię instrukcję na ten temat i może akurat kogoś to poratuje. Jeśli ktoś nie wie o co konkretnie chodzi, bo nigdy nie zapuścił się zbytnio w zakamarki mojego bloga to poniżej macie demo:

Skoro już wiemy jak to się wszystko prezentuje, to teraz czas na instrukcje. Od razu mówię, że nic nie będziemy musieli kombinować z kodem szablonu, a wszystko odbędzie się za pomocą kodu HTML, który wkleimy w edytor wpisu oraz kodu CSS, który wkleimy w kreator szablonu.
Musimy również pamiętać o tym, że jeśli chcemy nasze linki wyróżnić, to za każdym razem w edytorze wpisu - zakładka HTML, będziemy musieli wklejać kod, ale to o tym za chwilę.

1. Wybieramy posty lub strony, następnie wybieramy nowy post/strona lub edytujemy istniejący już post/stronę.


2. Kiedy już się znajdziemy w edytorze wpisu, wybieramy zakładkę HTML



3. Po przejściu w tryb HTML, nasza strona powinna prezentować się mniej więcej tak:



Oczywiście, jeśli będzie to nowa strona, to w zakładce HTML będzie pusto, więc proszę nie panikować, tak jak to miało miejsce przy jednej instrukcji :)

Jeśli mamy jakiś tekst lub zdjęcie w podstronie, to po < br /> wklejamy poniższy kod:
<div class="plinks">
<div style="text-align: left;">
<a href="LINK DO STRONY">TEKST LINKU</a>
<a href="LINK DO STRONY">TEKST LINKU</a>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
</div>

Powyższy kod daje nam możliwość umieszczenia dwóch linków. Jednak jeśli chcemy dodać ich więcej to po ostatnim </a>, a przed pierwszym </div> wstawiamy:

<a href="LINK DO STRONY">TEKST LINKU</a>

Tą część kodu <a href="LINK DO STRONY">TEKST LINKU</a> musimy wklejać za każdym razem, kiedy chcemy wstawić nowy link do danej listy. Jeśli jednak chcemy mieć listę w innym miejscu musimy znowu posłużyć się tym kodem:
<div class="plinks">
<div style="text-align: left;">
<a href="LINK DO STRONY">TEKST LINKU</a>
<a href="LINK DO STRONY">TEKST LINKU</a>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
</div>

I kolejne linki dodajemy tak samo jak powyżej to opisałam. Jeśli chcemy mieć tylko jeden link wyróżniony, no to oczywiście musimy usunąć z powyższego kodu jedną linijkę kodu. Tą linijką kodu do usunięcia jest:

<a href="LINK DO STRONY">TEKST LINKU</a>

Na koniec nasze linki po przejściu do zakładki nowy post, będą prezentować się tak:



Tak to ma wyglądać, nasze linki dopiero nabiorą wyglądu po dodaniu kodu CSS, jednak w edytorze wpisu wyglądają cały czas tak jak na powyższym zdjęciu.

4. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS


W arkuszu CSS wklejamy poniższy kod:

.plinks a:link, .tutlink a:visited { color:#fff; display:block; margin-bottom:2px; background:#f4cccc; font-size:14px; text-transform:uppercase; font-family:Open Sans; padding:5px; padding-left:14px; letter-spacing:0px; border-left: 8px solid #e06666; border-right: 8px solid #e06666; }
.plinks a:hover {background:#e06666; color: #fff; border-left: 8px solid #f4cccc; border-right: 8px solid #f4cccc;}

Wszystkie pogrubione i kolorowe wartości są zmienne. Analiza kodu:

Kolor czcionki 
Kolor tła
Wielkość czcionki 
Styl tekstu 
Rodzaj czcionki 
Marginesy wewnętrzne 
Odległość miedzy literami 
Lewe obramowanie
Prawe obramowanie
Kolor tła po najechaniu myszą
Kolor czcionki po najechaniu myszą 
Kolor lewego obramowania po najechaniu myszą 
Kolor prawego obramowania po najechaniu myszą

Linki z tym kodem CSS będą prezentować się tak:


Dostałam parę wiadomości, aby dokładniej wszystko wyjaśniać w instrukcjach, bo nie raz macie problem/obawy przed usunięciem danego elementu, tak aby dostosować go pod siebie/"panikujecie", że coś jest nie tak, jak na zrzutach ekranu umieszczonych w instrukcji. W tej starałam się jak mogłam i naprawdę nie wiem jak prościej mogę Wam to wytłumaczyć. Pamiętajcie, że jeśli macie w czymś problem to możecie śmiało napisać, a ja Wam pomogę - zawsze to lepiej napisać do kogoś indywidualnie, rozpisać się w mailu niż rozwiązywać wszystkie problemy w jednym wpisie, gdzie tylko np. może to pomóc 3 osobom. Ja nie gryzę i odpowiadam na wszystkie maile, no chyba, że jakiś mi nie dojdzie, ale jeśli nie odpiszę w ciągu 1 dnia to wyślijcie maila jeszcze raz :) 
Czytaj dalej »