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 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 »

MałgoLINKI - podsumowanie czerwca

01.07.2015


Z ankiety, którą przeprowadziłam jakiś czas temu wynikało, że większość z Was potrzebuje luźniejszej formy wpisów. Dlatego przełamałam się i stworzyłam serie MałgoLINKI, które będą podsumowaniem każdego miesiąca. Kategorie jakie postanowiłam zamieścić w podsumowaniu poznacie za chwilę i mam nadzieję, że przypadnie Wam taka forma podsumowania do gustu.

Najciekawszy artykuł/wpis miesiąca

Ostatnio trafiłam na bardzo ciekawego bloga, prowadzonego przez Pana Bartosza Pussaka, który jest autorem Cały Ja. Nie sądziłam, że w tym punkcie moja pozycja się zmieni - a jednak. Na bloga Cały Ja trafiłam zupełnie przypadkiem i od razu trafiłam na wpis "Pierwsze miesiące rozwoju dziecka, oczami taty". Dzieci nie lubię, przerażają mnie, ale byłam ciekawa jak wygląda to wszystko oczami ojca. Mój ojciec nigdy nie był jakiś wylewny, więc za wiele nie wiedziałam co on czuł zostając ojcem w wieku 22 lat i jak to wyglądało jego oczami. Mama, to co innego - wiadomo, kobieta. Szczerze mówiąc, zaskoczyłam samą siebie, ponieważ ten wpis zauroczył mnie w takim stopniu, że zaczęłam się zastanawiać czy to na pewno pisze mężczyzna. Wszystko jest opisane w tak ciekawy sposób. że aż czułam pewien niedosyt po przeczytaniu tego jednego artykułu .

Blog miesiąca

Zastanawiałam się nad tym czy nie umieścić tu bloga Cały Ja, ale stwierdziłam, że za krótko znam tą stronę i poświęcę miesiąc lub dwa na dalsze poznawanie tego bloga. Zresztą będzie to dla mnie sama przyjemność. Blogiem miesiąca zostaje blog, prowadzony przez siostry bliźniczki Monikę i Angelikę  Candy Pandas. Bloga śledzę od jakiegoś czasu - dokładnie od pierwszego komentarza jaki dziewczyny pozostawiły u mnie na blogu - i jest dla mnie idealnym miejscem, szczególnie po zmianach w diecie, które dwa miesiące temu zmieniły się o 180 stopni. Jeśli ktoś ceni sobie zdrową żywność, albo tak jak ja jest alergikiem to zapraszam na ich bloga.

Rysunek miesiąca

Z rysunkami mam coś wspólnego, dlatego uwielbiam je oglądać - mogę to robić godzinami i nigdy mi się nie nudzi. Rysunek, który znajduje się w dzisiejszym podsumowaniu, pochodzi ze strony Najpiękniejsze rysunki świata. Ma coś w sobie ten rysunek co przykuło moja uwagę, chodź na pierwszy rzut oka może wydawać nam się zwyczajny.


Zdjęcie miesiąca

Zdjęciem (a właściwie zdjęciami) miesiąca są te ze strony Jest Rudo. Natalia zawsze zaskakuje mnie swoimi pomysłami, a zdjęcia z wpisu "Do kwadratu", spodobały mi się w takim stopniu, że aż niektóre wydrukowałabym sobie jako plakat, najlepiej w formacie A2.

Mój instagram w czerwcu


W czerwcu nie poszalałam z instagramem, dodałam tylko 16 zdjęć, ale może w tym miesiącu coś się zmieni? Instagram w czerwcu za ciekawy to nie był. Prezentowałam zdjęcia, jedzenia, co by sobie poradzić z pierwszym miesiącem diety. Projekt logo, który miał być w portfolio, moja królica, która nie zachowuje się jak królik, a jak kot. Zdjęcie przed ścięciem włosów i po. Kuce ze stajni, współpraca z  #PELE-MELE i wczorajszy wypad nad Zalew.

Instagram


Mój blog w czerwcu

W czerwcu zostało opublikowane: 13 wpisów.
Najczęściej komentowanym wpisem był: Jak zrobić nagłówek ze stronami.
Najpopularniejszy wpis: Jak zrobić nagłówek ze stronami.
W czerwcu odwiedziliście bloga: 5,728 razy 
Zmiany:

  • Współpraca z wydawnictwem MOLE
  • Za namową paru osób i z ich niewielką pomocą powstała zakładka "współpraca". Zamieszczona została propozycja współpracy dla firm oraz blogerów. Jeśli jesteś blogerem mającym 18 lat (nawet rocznikowo) to śmiało możesz zajrzeć i przeczytać o współpracy. 
  • Za namową tych samych osób co przy współpracy powstał profil bloga na Facebooku, który możecie zaobserwować. Jest to opcja wygodna dla mnie i dla Was, ponieważ w każdej chwili możecie do mnie napisać, a ja znacznie szybciej odpisze niż na maile. Z profilu dowiecie się również o nowych wpisach i wiele więcej.

Czytaj dalej »

Copyright © Szablon wykonany przez Blonparia