Blogger bez tajemnic: 2014

Separatory - Wilki

Czas na parę separatorów. Co to jest? Otóż to mały, wąski obrazek mogący służyć jako przerywnik w postach lub (zalecane) podpis na forum. Wystarczy wkleić kod obrazka :)
Zaczniemy od wilków na prośbę mojej znajomej.

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwu7hzr57K5ABdaTxrJ_i_XhyVjN7TR3KmA_wlsAsB0NIysSkXLfAk3oYtWfT12RSXn2edZSkuzH-11x1J80ZZDd8HFyzXlvVD3mmHgAYDYKyDjQs3t2fssiM107uDJQOra45_EIWgklC/s1600/i+remember+black+sky.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwu7hzr57K5ABdaTxrJ_i_XhyVjN7TR3KmA_wlsAsB0NIysSkXLfAk3oYtWfT12RSXn2edZSkuzH-11x1J80ZZDd8HFyzXlvVD3mmHgAYDYKyDjQs3t2fssiM107uDJQOra45_EIWgklC/s1600/i+remember+black+sky.png" /></a></td></tr>

Jeśli wam się podobają takie separatorki piszcie w komentarzach lub na pocztę a dodam ich więcej. Niestety zbanowano mi bezprawnie konto na howrse i najprawdopodobniej będę zmuszona je usunąć. Dlatego mam już nowe. Tym razem nazywam się...

...NyanCat^._.^~

Banner dla Kryształowej Watahy

I znowu ja i znowu dla tej samej watahy xD. Tym razem zrobiłam banner czyli reklamę bloga. Szczerze to nie wiem czemu akurat mnie coś natchnęło na smoka. To chyba dlatego, że nie mogłam znaleźć więcej motywów kryształowo wilczych. Mam nadzieję, że bannerek się podoba i przypominam, że mogę robić więcej takich cacuszek.

NyanCat~

Nagłówek dla Kryształowej Watahy

Oto nagłówek dla Kryształowej Watahy do której jeszcze nie należę ale kto wie, może się przekonam. Pozdrawiam graczkę wilczyca2678 :)

NyanCat~

Nagłówek dla watahy

Tak wygląda przykładowy nagłówek dla watahy. Ta akurat jest moja ;) Jak chcecie podobny to piszcie

Dodatek - Pole tekstowe z suwakiem

Oto macie tu kod do najzwyklejszego pola tekstowego. Może ono posłużyć jako tablica ogłoszeń na blogu albo zwykła prezentacja. Możliwości są nieskończone. Jest to dopiero testowa wersja. Tekst na szczęście można edytować normalnie bez trybu html. Wszystko wymaga jeszcze poprawek. Poćwiczę się jeszcze w tych polach i jak uda mi się coś poprawić to dodam nową wersję :)

Tutaj wpisujesz swój tekst.

Kursory - Konie

Czas na parę kursorów z końmi. Przypominam, że jeśli żaden z tych kursorów ci nie pasuje możesz zamówić sobie inny. Podglądu kursorów na razie nie ma (sorki ale coś mi nawaliło) i daję tylko kody i krótkie opisy.

Koń czysto siwy (w galopie)

Koń kary (stojący)

Uzupełniam ten post kodami do kursorów na bieżąco (zależy to również od mojego humoru i chęci do pracy) więc jeśli lubisz koniowate kursory pisz w kometarzu i udostępniaj ten post. To mnie na pewno zmotywuje ;)

Gotowe kody CSS - Wygląd posta

Czas na zabawę z kodami CSS. W rzeczywistości nie jest to jakoś strasznie skomplikowane jak się wydaje a naprawdę dodaje blogowi oryginalny charakter. Edycja w bloggerze jest bardzo prosta. Wystarczy wejść w Szablon>Dostosuj>Zaawansowane. Na dole listy jest "Dodaj arkusz CSS" czy coś w tym stylu. Tam wklejacie kody i modyfikujecie je według własnego pomysłu.
Na początek podstawa czyli posty. Wyjaśnię wam w punktach jak przerobić tło posta na własne widzimisie.

UWAGA! Zanim ustalisz tło posta musisz skasować standardowe tło które wybrał blogger tzn. wchodzisz w "Zaawansowane" i znajdujesz opcję post. Tam wybierasz tło posta transparentne (kliknij w kolorowy kwadracik, otworzy ci się paleta kolorów, tam wybierz opcję "Przezroczyste"). To samo z obramowaniem.

Zajmijmy się tymi kodami. Teksty pogrubione można dostosowywać.

1. Tło

a) kolor

.post {background-color: #5a5555;}

Kliknij tutaj aby zobaczyć paletę kolorów z potrzebnymi kodami html

b) obrazek w tle
.post {background-image: url(adres do obrazka);}

Przezroczystość tła
.post {opacity: 0.7;}

Podpowiedź: Najładniej wygląda przezroczystość 0.5, post wtedy jest półprzezroczysty, ale każdy może zmieniać według własnej woli. Post nie przezroczysty ma jednostkę liczbową 1.0

2. Cienie

a) tekstu

.post {text-shadow: 2px 2px 5px #5a5555 }

Podpowiedź: Zmieniając pogrubione liczby zmieniasz rozmiar i kierunek padającego cienia (w lewo/prawo/w dół). Możesz też bez problemu zmieniać kolor cienia.

b) obramowania posta
.post {box-shadow:0px 0px 2px black}

Tu tak samo zmieniasz kąt padania cienia i kolor, ale tym razem nie potrzebujesz kodu html tylko znajomości języka angielskiego ;)

3. Zaokrąglone rogi posta

.post {border-radius: 90px 90px 5px 5px;}

Parametry odpowiadają wszystkim czterem rogom. Tu możesz troszkę pobawić się z liczbami. Polecam zaokrąglenia od 0 do 90.

4. Marginesy (żeby tekst nie przyklejał się do ramek)

.post {padding: 10px;}

5. Obramowanie posta

a) linia ciągła

.post {border-style: solid;}

b) linia przerywana

.post {border-style: dashed;}

c) linia kropkowana

.post {border-style: dotted;}

d) linia podwójna

.post {border-style: dotted;}

6. Grubość obramowania

a) cienkie:
.post {border-width: thin;}

b) średnie:
.post {border-width: medium;}

c) grube:
.post {border-width: thick;}

Podobają się wam takie instrukcje? Jeśli wam się spodobało nie zapomnijcie wspomóc mnie udostępnieniami ^^

_Loren_ / NyanCat~

Prezentacja dla roksia01230 - Pies, liście, jesień

Oto pierwszy szablon prezentacji na zamówienie (*le podjarka ^^). Oczywiście możecie go wykorzystywać do swoich prezentacji na howrse.pl bądź doggi-game.pl. Pozdrawiam graczkę roksia01230. Niżej dam miniaturkę z podglądem.

<div style="background-image: url(http://fc09.deviantart.net/fs70/f/2014/133/1/a/untitled_drawing_by_sawrae-d7i793c.png); height: 441px; margin-left: 0px; margin-top: 0px; width: 664px;">
</div>
<div style="height: 270px; margin-left: 420px; margin-top: -325px; overflow: auto; width: 190px;">
<div>
<span style="font-family: Arial; text-shadow: 0px 0px 1px;"> <span style="color: black;"><span style="font-size: x-small;">Tutaj wpisujesz swój tekst... </span></span></span></div>
</div>
<div align="left" style="height: 54px; margin-left: 80px; margin-top: -320px; overflow: auto; width: 389px;">
<div>
<span style="font-family: Georgia; text-shadow: 0px 0px 1px;"> <span style="font-size: large;"><i>Twój nick...</i></span></span></div>
</div>

Screen nie najlepszej jakości, ale nie jestem najlepszą graficzką :P