Jak zrobić "o autorze" w stopce wpisu z ikonkami

18.07.2015


Często na blogach można zauważyć tzw. wizytówki, które są umieszczane na końcu wpisu. Możemy w niej umieścić krótką informacje o nas, podlinkować strony, przekazać jakąś inną informacje naszym czytelnikom. Taka wizytówka, ostatnio stała się bardzo popularna, coraz częściej można ją zauważyć na blogach. Czy jest skuteczna? Osobiście uważam, że tak. Wizytówkę, o której jest tu mowa, można zobaczyć u mnie na dole wpisu, ale dodam zdjęcie również i tutaj, abyście nie musieli przewijać strony.


UWAGA! ZRÓB KOPIĘ ZAPASOWĄ SZABLONU! 

1. Zaczynamy od HTMLa. Szablon - edytuj kod HTML.


2. Klikamy kursorem w obojętnie jakie miejsce w kodzie i wywołujemy okno wyszukiwania za pomocą CTRL + F. W okno wyszukiwania wpisujemy authorAboutMe i klikamy enter.


3. Wyszukana została taka cześć kodu: <b:if cond='data:post.authorAboutMe'> tuż nad nią wklejamy (uzupełniony według własnych potrzeb) kod:

<article class='about-author'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='about-author-inner'>
<h2><span> </span></h2>
<img alt='author' src='LINK DO ZDJĘCIA'/>
<a href='LINK DO STRONY O MNIE'>TUTAJ WPISZ SWOJE IMIĘ</a>
<p>MIEJSCE NA TEKST</p>
<span class='author-share'>
<div class='social'><a href='LINK DO STRONY'><img alt='facebook' src='LINK DO IKONKI'/></a></div>
<div class='social'><a href='LINK DO STRONY'><img alt='instagram' src='LINK DO IKONKI'/></a></div>
<div class='social'><a href='LINK DO STRONY'><img alt='ask' src='LINK DO IKONKI'/></a></div>
<div class='social'><a href='LINK DO STRONY'><img alt='pinterest' src='LINK DO IKONKI'/></a></div>
<div class='social'><a href='LINK DO STRONY'><img alt='youtube' src='LINK DO IKONKI'/></a></div>
</span>
</div>
</b:if>
</article>

Jeśli chcemy, aby w miejscu gdzie znajduje się tekst było podlinkowane jakieś słowo, to musimy zamieścić w nim taki kod: <a href='LINK'>SŁOWO DO PODLINKOWANIA</a> Przykład:

Jeśli spodobał Ci się jakiś wpis/chcesz podyskutować na dany temat zostaw komentarz. Jeśli większa ilośc wpisów przyciągnęła Twoją uwagę, zaobserwuj bloga, możesz również śledzić Blonparię na <a href='https://www.facebook.com/blonparia'>Facebooku</a>, z którego możesz dowiedzieć się, że właśnie na blogu zawitał nowy wpis i wiele więcej rzeczy, które nie są publikowane na blogu.

Jeśli chcemy mieć więcej ikonek społecznościowych to po ostatnim </a></div> przed </span> wklejamy:

<div class='social'><a href='LINK DO STRONY'><img alt='youtube' src='LINK DO IKONKI'/></a></div>


Zapisujemy szablon.

4. Przechodzimy teraz do szablon - dostosuj


5. Przechodzimy do zaawansowane - dodaj gadżet CSS i wklejamy kod:


.about-author-inner {text-align:justify; width:80%; height:150px;}
.about-author {color:#000; background: transparent; width:100%; margin-top:-20px;}
.about-author-inner {background:transparent; padding:20px;}
.about-author img{float:left; margin-right:2.828854%}
.about-author a{font-size:14px; color:#ff8d8e; margin-bottom:5px; text-transform:uppercase;}
.about-author a:hover{color:#000;}
.about-author p {font-size:14px;width:115%;}
.post-author .author-share {
float: left;
line-height:32px;
display:inline-block;
}
.social:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.social {
float: left;
margin: -4px 10px 15px 10px;
}
.social img {
width: 32px;
height: 32px;
}

Wszystkie pogrubione i kolorowe wartości są zmienne. 
Wyrównanie tekstu
Kolor tekstu 
Wielkość linków
Kolor linków 
Kolor po najechaniu myszą
Wielkość tekstu
Czytaj dalej »

Jak zrobić wielokolorowe menu

15.07.2015


Na blogu My Pink Plum możemy (mogliśmy) zaobserwować proste, ale przyciągające wzrok menu. Wielokolorowe - każda strona ma swój kolor, zarówno przed jak i po najechaniu kursorem na nią. Dostałam od Was dużo maili na temat tego jak zrobić takie menu, a ja z chęcią taką instrukcję dla Was przygotowałam :)



1. Na początek, (jeśli mamy) musimy usunąć standardowe strony bloggera, które widnieją na naszym blogu. Przechodzimy do układ - strony - edytuj - usuń. 




2. Teraz w tym samym miejscu klikamy "dodaj gadżet" i szukamy gadżetu HTML/JavaScript, a następnie wklejamy kod.







Marginesy - (margin-left) można je dostosować według własnych potrzeb
Linki i nazwa strony - tutaj nie muszę nic tłumaczyć.

Aby dodać kolejną stronę po ostatnim </a> przed </div> wklejamy



Pojawił nam się nowy kolor. "TUTAJ WPISZ SWÓJ SELEKTOR" - tutaj musimy wpisać selektor dla kolejnej naszej strony, czyli jak w poprzednich linijkach było st, str, strr, sttr, ssttr to tu może być np. kot, pies czy co tam jeszcze chcecie.

Zapisujemy nasz gadżet.

3. Dodanie kodu CSS. Jak widzimy na poniższym zdjęciu nasze strony nie wyglądają tak, jakbyś tego oczekiwali. Dlatego, musimy dodać kod CSS.



Motyw - dostosuj-  zaawansowane - dodaj arkusz CSS 



W arkuszu wklejamy kod:

.menu{
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
height: 30px;
width: 840px;
font-family: Verdana;
font-size:14px;
text-align:center;
background-color: transparent;
margin:0 auto;
}
a.st {
clear: both;
display: inline;
text-decoration:none;
color: #f63373;
background: transparent;
padding:10px;
}
a.st:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f63373;
padding: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.str {
clear: both;
display: inline;
text-decoration:none;
color: #526fe5;
background: transparent;
padding:10px;}
a.str:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#526fe5;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.strr{
clear: both;
display: inline;
text-decoration:none;
color:#8a2eaa;
background: transparent;
padding:10px;}
a.strr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background: #8a2eaa;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.sttr {
clear: both;
display: inline;
text-decoration:none;
color: #8abb33;
background: transparent;
padding:10px;
}
a.sttr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background: #8abb33;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.ssttr {
clear: both;
display: inline;
text-decoration:none;
color:#f8a43e;
background: transparent;
padding:10px;
}
a.ssttr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f8a43e;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Wszystkie pogrubione wartości są zmienne.

Szerokość 
Rodzaj czcionki
Wielkość czcionki
Położenie menu 
Kolor tekstu danej strony 
Kolor tekstu strony po najechaniu na nią myszą 
Kolor tła po najechaniu myszą 
Zaokrąglenie narożników 

Wspomniałam o tym, że można dopisać swoją własną stronę, ale musimy pamiętać, że dla niej też musimy stworzyć kod CSS.

a.TUTAJ NASZ SELEKTOR Z DODANEJ STRONY {
clear: both;
display: inline;
text-decoration:none;
color:#f8a43e;
background: transparent;
padding:10px;
}
a.TUTAJ NASZ SELEKTOR Z DODANEJ STRONY:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f8a43e;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Oczywiście wszystko musimy pozmieniać, a konkretnie to kolor tekstu i tła. Jeśli zmieniliśmy zaokrąglenia narożników, to również i tu musimy dokonać zmian.

Efekt końcowy:






Przyda Wam się taka instrukcja?
Czytaj dalej »

Jak zainstalować pędzle do GIMPa + pędzle do pobrania

06.07.2015


Pędzli do GIMPa używamy przy robieniu nagłówków, banerów, używamy różnych kształtów, aby dodać urozmaicenia. Ostatnio dużo osób do mnie pisze maile z prośba o pomoc. Maile nie dotyczą tylko pomocy blogowej, ale również pomocy związanej z GIMPem. Ostatnio dostałam 3 maile, w których tłumaczyłam jak zainstalować pędzle do GIMPa i pomyślałam, że zrobię taką instrukcje na blogu, bo może się okazać, że więcej osób nie wie jak to zrobić, a jest to bardzo prosta sprawa. Zaczynamy!

1. Otwieramy folder z naszym pędzlem



2. Prawym przyciskiem klikamy na nasz pędzel i wybieramy opcja wytnij


3. Przechodzimy do dysku C: - Program Files - GIMP 2 - share - gimp - 2.0 - brushes i wklejamy nasz pędzel.










Pędzle do pobrania:





Pędzle do pobrania



Ruszyła akcja - blogowe lato!


Akcja blogowe lato trwa od dnia dzisiejszego do dnia 06.08. 2015 - czyli cały miesiąc. Jaki jest cel tej akcji? Dużo osób pisze do mnie z prośbą o poradę zarówno blogową oraz tą dotycząca wyglądu bloga. Pytacie się co zmienić, ulepszyć. Dużo osób nie wie, że można do mnie ot tak napisać i się o coś zapytać. Przyznaje się bez bicia, że nie każdemu odpowiadałam na takie maile z powodu braku czasu, jednak teraz kiedy są wakacje, tego czasu mam znacznie więcej. Możecie do mnie pisać z każdym problemem, a ja postaram się Wam w miarę moich możliwości pomóc.

Co trzeba zrobić aby wziąć udział w akcji? 

  1. Polubić Blonparia na FACEBOOKU
  2. Wstawić poniższy baner (kod) u siebie na blogu. 
  3. Napisz wiadomość w formie poniższego formularza:
Imię
Adres bloga
Opisz swój problem
Dodaj podpis: Akcja - blogowe lato

Baner do wstawienia: 


<a href="http://blonparia.blogspot.com/"/><img src="http://i1291.photobucket.com/albums/b555/parma9/baner_zpssi1qzw5l.png"/></a>

Wszytko będzie sprawdzane, więc jeśli ominąłeś jakiś punkt, a napiszesz zgłoszenie - zostanie ono odrzucone. Bądź uczciwy wobec mnie i innych
Czytaj dalej »

Copyright © Szablon wykonany przez Blonparia