30 czerwca 2015

Ramka dookoła avatara w komentarzach

Cześć i czołem, dzisiaj chciałabym wam pokazać jak zrobić ładny efekt ramki (obrazkowej), w komentarzach wokół avatara komentującego. Kod mam od najlepszej i najwspanialszej rinne.

KOD:
.avatar-image-container {
padding:10px;
background-image: url('LINK OBRAZKA');
background-attachment:scroll;
background-position: center top;
background-repeat: no-repeat;;
}
PRZYKŁADOWY EFEKT: 

Możecie tworzyć własne obramowania, żeby wam to ułatwić przygotowałam szablon:
No to miłej i kreatywnej zabawy!

Przeniesienie napisu: autor, komentarze i daty w dowolne miejsce


Witam dzisiaj kod, którego ja osobiście używam bardzo często ponieważ go uwielbiam! Bez niego myślę, że nie ma takiego ładnego efektu. A mianowicie chodzi o zmienianie wyglądu napisu autora postu, komentarzy i daty. Oczywiście, każdy kod jest indywidualny, i nie trzeba używać ich wszystkich jednocześnie.
Może zacznijmy od napisu : AUTOR.
.post-author {
position: absolute;
width: 190px !important; /*szerokość ramki*/
height: 20px; /*wysokość ramki*/
top: -20px; /*przeniesienie do góry, może być na minusie*/
left: 380px; /*przeniesienie w bok, może być na minusie */
padding: 2px; /*marginesy*/
padding-left: 10px; /*marginesy z lewej strony*/
color: #fff; /*kolor czcionki*/
background: #C67263 !important; /*kolor tła*/
margin-bottom: 10px !important;
font: 10px calibri, serif !important; /*wysokość I rodzaj czcionki*/
text-align: center; /*przyleganie tekstu do lewej strony ramki*/
letter-spacing: 1px !important; /*przerwa między literami*/
text-transform: uppercase; /*drukowane litery*/
border-radius: 40px 40px 40px 40px;
padding-bottom: 3px; /*marginesy od dołu*/
transtion: all 0.7s; /*płynny powrót*/
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}
EFEKT:

Kod:
.post-author.vcard{
padding-right:10px;
}
.post-author.vcard:before {
content: url('http://funkyimg.com/i/212UJ.png');
padding-right:5px;
}
Efekt:

KOMENTARZE:
.comment-link {
position: absolute !important;
width: 170px !important;
height: 20px !important;
top: -20px;
left: 400px;
padding: 2px;
padding-left: 10px !important;
color: #000000 !important;
background: #ffffff !important;
box-shadow: 1px 1px 7px #ffffff;
font: 10px calibri, serif !important;
text-align: center;
letter-spacing: 1px !important;
text-transform: uppercase;
text-decoration: none; /*brak podkreślenia linka*/
font-weight: none !important; /*brak pogrubienia czcionki*/
padding-left: 2px;
transtion: all 0.7s;
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}
EFEKT: 

KOD:
.post-comment-link a{
display:block;
position:absolute;
right:10px;
top:-20px;
background-color:#444;
padding:8px 12px;
color:#fff;
transition:.7s;
font-size:80%;
}
.post-comment-link a:hover{
background-color:$(motyw2);
}
.post-comment-link a:before{
content:"";
background-color:#444;
display:block;
width:14px;
height:14px;
left:50%;
position:absolute;
top:-7px;
margin-left:-7px;
transform:rotate(45deg);
transition:.7s;
}
.post-comment-link a:hover:before{
background-color:$(motyw2);
}
EFEKT:

DATA:
.date-header  {
position: absolute !important;
width: 180px !important;
height: 24px !important;
top: -1px;
left: 400px;
padding: 2px;
padding-left: 10px !important;
color: #000000 !important;
background: #E0E082 !important;
box-shadow: 1px 1px 7px #E0E082;
font: 19px calibri, serif !important;
text-align: center;
letter-spacing: 1px !important;
border-radius: 0px 0px 40px 40px;
text-transform: uppercase;
text-decoration: none; /*brak podkreślenia linka*/
font-weight: none !important; /*brak pogrubienia czcionki*/
padding-left: 2px;
transtion: all 0.7s;
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}
EFEKT: 

Oczywiście, zmieniajcie wszystkie parametry kolory, bawcie się tym! Tutaj podałam wam tylko przykłady jak może to wyglądać, ale jest o wiele więcej możliwości!

29 czerwca 2015

Komendy CSS


Hej wam, jak wam mijają wakacje, bo mi jak na razie bardzo sportowo, i aktywnie. Nie wiem ile to jeszcze potrwa, ale no miejmy nadzieję, że jak najdłużej. A więc dzisiaj przychodzę, z lekką notką, w której postanowiłam dodać bardzo pomocne i przydatne komendy. A więc do dzieła! (klikając na komendę zobaczysz obrazkowy efekt)

KOMENDY
{display: none} - wyłączenie czegoś
{text-align:center;}- tekst wyśrodkowany
{text-align:left;}- tekst wyrównany do lewej strony
{text-align:right;}- tekst wyrównany do prawej strony
{text-decoration:none;}- tekst bez 'dekoracji'
{text-decoration:overline;}- dodanie linii nad tekstem
{text-decoration:line-through;}- przekreślenie tekstu
{text-decoration:underline;}- podkreślenie tekstu
{text-transform:uppercase;}- duże ('drukowane') litery
{font-variant:small-caps;}- duże ('drukowane') litery przy czym pierwsza jest największa
{text-transform:lowercase;} - małe litery
{text-indent:50px;}- margines w tekście
{font-family:"Arial";}- zmiana czcionki
{font-style:normal;}- czcionka zwykła
{font-style:italic;}- kursywa
{font-size:16px;} - rozmiar czcionki
{letter-spacing: 3px;}- odstępy między literami
{text-shadow: 1px 1px 1px #ff0000;}- cień tekstu;
{background-color: #ff0000;}- kolor tła
{background-image: url('LINK');} - tło obrazkowe (powielające się w poziomie i pionie)
{background-repeat: repeat-y;} - powielanie tła w pionie
{background-repeat: repeat-x;}- powielanie tła w poziomie
{background-repeat: no-repeat;}- brak powielania
{background-position: left top;}- tło w lewym górnym rogu
{background-position: right top;}- tło w prawym górnym rogu
{background-position: left bottom;}- tło w lewym dolnym rogu
{background-position: right bottom;}- tło w prawym dolnym rogu
{background-position: center center;}- tło wyśrodkowane (w poziomie i w pionie)
{background-position: 50px 40px;} - tło przesunięte o 50px w prawo i o 40px w dół
{background-attachment: fixed;}- stałe tło (nie przesuwa się ze stroną)
{background-attachment: scroll;}- tło przewijające się ze stroną
{border-style: none;}- brak ramki
{border-style: dotted;}- ramka kropkowana
{border-style: dashed;}- ramka kreskowana
{border-style: solid;}- ramka ciągła
{border-style: double;}- ramka podwójna
{border-width: 3px;}- grubość ramki
{border-color: black;}- kolor ramki (nazwa koloru)
{border-color: #ff0000;}- kolor ramki (za pomocą kodu szesnastkowego)
{border-left-color: black;}- kolor lewego boku ramki ( można zmienić, to również na right - prawy, top - góra, bottom - dół)
{margin-top: 3px;} - margines górny
{margin-bottom: 5px;}- margines dolny
{margin-left: 8px;}- margines lewy
{margin-right: 10px;}- margines prawy 

Selektory


Buenos dias! Miło mi, że w tak piękny wakacyjny dzień mam tyle czasu i mogę pisać i pisać, oczywiście dla was. Nawet nie wiecie ile mi to sprawia przyjemności. A więc dzisiaj nie będzie nic skomplikowanego w dalszym ciągu mamy selektory, i jest to już ostatnia grupa, gadżetów i komentarzy.

GADŻETY



h2 - nagłówki wszystkich widżetów
.sidebar .widget h2 - nadanie stylu gadżetu
.widget-content - zawartość wszystkich widżetów
#Navbar1 - pasek nawigacyjny
#Header1 - nagłówek
#PageList1 - strony
#Blog1 - posty
#Attribution1 - napis Technologia Blogger i nazwa szablonu
#Profile1 - o mnie
#BloggerButton1 - button Bloggera
#Subscribe1 - subskrybuj
#Label1 - etykiety
#BlogArchive1 - archiwum bloga
#NewsBar1 - skrót wiadomości
#TextList1 - lista
#LinkList1 - lista linków
#BlogList1 - lista blogów
#Poll1 - ankieta
#VideoBar1 - pasek wideo
#Image1 - obrazek
#Text1 - tekst
#HTML - HTML/JavaScript
#Slideshow1 - pokaz slajdów
#PlusOne1 - przycisk polecenia w Google+
#CustomSearch1 - pasek wyszukiwania
#PopularPosts1 - popularne posty
#Stats1 - statystyka
#Translate1 - tłumaczenie
#Followers1 - gadżet z obserwatorami
KOMENTARZE

.comments - ramka ze wszystkimi komentarzami i liczbą komentarzy
.comments h4 - liczba komentarzy
#Blog1_comments-block-wrapper - ramka ze wszystkimi komentarzami bez liczby komentarzy
#comments-block,.comments-block - ramka komentarzy ale bez awatarów
.comment-author - podłużna belka, na której pojawia się imię autora komentarza ({nazwa autora} pisze...)
.avatar-image-container - awatary
.comment-body - tekst komentarza
.comment-footer - stopka komentarza, czyli to miejsce, gdzie jest data dodania komentarza, linki Odpowiedz itp.
.comment-timestamp - sama data dodania komentarza
.comment-delete - link do usunięcia komentarza
.comments .comment .comment-actions a, .comments .thread-toggle a - przyciski odpowiedz i usuń pod komentarzem
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń po najechaniu
.comment-header - nagłówek komentarza z jego autorem, datą i godziną
.comments-content lub #comment-holder- wszystkie komentarze razem wzięte. Jeśli chcemy dać tło lub ramkę dla właśnie obszaru komentarzy pod postem należałoby użyć tego selektora. Raczej wymagane jest znowu użycie komendy padding.
.comments .comments-content .user - efekt "dla" autora komentarza;
.comments .comments-content .datetime  - efekt "dla" daty komentarza;
.comment-replies - odpowiedzi do danego komentarza;
.continue a - kolejny napis "odpowiedz" lub "reply", jednak tym razem to napis tuż pod ostatnią odpowiedzią na komentarz. Bardzo ciekawe i inne użycie to dodanie do selektora float:right; 

OGÓLNE
body - cały blog
.content - cały blog (oprócz paska nawigacyjnego)
.navbar - pasek nawigacyjny
.column-center-inner - środkowa kolumna bloga
.column-right-inner - prawa kolumna bloga
#sidebar-right-2-1 - lewa kolumna w prawej kolumnie bloga
#sidebar-right-2-2 - prawa kolumna w prawej kolumnie bloga
.column-left-inner - lewa kolumna bloga
#sidebar-left-2-1 - lewa kolumna w lewej kolumnie bloga
#sidebar-left-2-2 - prawa kolumna w lewej kolumnie bloga
.main-inner - obszar wszystkich kolumn i pagera bloga
NAGŁÓWEK
.header-outer - nagłówek bloga (na całą szerokość okna)
.Header - nagłówek bloga (na szerokość bloga)
.description - opis bloga
.titlewrapper - nagłówek bloga
.descriptionwrapper - opis bloga 
STOPKA
.footer-outer - stopka (cała szerokość okna)
.footer-inner - stopka (szerokość bloga)
.foot - każdy widżet w stopce
.Attribution - napis Technologia Blogger i nazwa szablonu
.feed-links - napis Subskrybuj Post (Atom)
#Attribution1 - napis Technologia blogger
KARTY
.tabs-outer - cały pasek kart, na całą szerokość bloga
.tabs-inner - cały pasek kart, na szerokość bloga
.tabs-inner ul li - każdy osobny przycisk kart
.tabs-inner .widget li a - linki kart
.tabs-inner .widget li.selected a - karty które wcześniej odwiedziliśmy
.tabs-inner .widget li a:hover - karty po najechaniu myszką
POST
#Blog1 - cały post
.blog-posts - cały pasek z postami (oprócz napisów "starszy post", "strona główna", "nowszy post")
.post-outer - post bez daty
.date-header - sama data
.date-header span - całe pole z datą
.post - sam post z nagłówkiem i stopką, ale bez daty
.post-body - tylko to co napisaliśmy w poście, bez daty i nagłówka
.post-title - obszar tytułu posta
.post-title a - link tytułu posta
.post-header - miejsce między tytułem posta a notką
.post-footer - stopka posta
.post-author - napis Autor: (wasz nick), pod postem
.post-author span - sam wasz nick pod postem
.post-timestamp - godzina publikacji posta
.timestamp-link - sama godzina bez literki "o"
.post-comment-link - ramka wokół linku do komentarzy
.comment-link - link do komentarzy
.post-body img - obrazki, które umieściliśmy w poście
.post-icons - ikonki, które znajdują się pod postem
.post-labels - etykiety posta
.reactions-label-cell - napis "Reakcje"
.post-location - lokalizacja napisania notki
#blog-pager - ramka z linkami "starszy post", "strona główna", "nowszy post"
.blog-pager a - same linki starszy post, strona główna, "nowszy post"
.home-link - ramka z linkiem Strona główna
.blog-pager-newer-link - ramka z linkiem "nowszy post"
.blog-pager-older-link - ramka z linkiem "starszy post"
.feed-links - napis Subskrybuj Posty(Atom)
.jump-link - przycisk czytaj więcej w pościeblockquote - cytat w poście
(c) tajemniczy--ogrod, (c) Graphical Thoughts 

Jak dodać niestandardową czcionkę?

Hej i czołem kluski pod stołem, dzisiaj coś dla bardziej zaawansowanych blogerów, którym nie wystarczą już podstawowe kody CSS. A więc dziś chciałabym wytłumaczyć wam najprościej jak to możliwe, jak zmienić czcionkę na niestandardową, czyli taką której nie ma w wyborze na blogspocie.
A więc na początku, wchodzimy na Google Fonts i suwakiem szukamy sobie taką czcionkę, jaka nam się najbardziej podoba. Kiedy już znajdziecie odpowiednią dla siebie czcionkę klikacie na znaczek:


Następnie zjeżdżajcie na dół i macie dwa kody, które ponumerowałam, żeby było wam łatwiej:
Kopiujecie swój pierwszy kod, i wchodzicie w EDYTUJ KOD HTML. I teraz w kodzie wyszukujecie fragmentu: <head> , chociaż u większości jest on zaraz na samym początku. Nasz kod wklejacie nad fragmentem <head> . Teraz najważniejsze, bo kiedy będziecie chcieli zapisać szablon, będzie wam wyskakiwał komunikat z błędem dlatego musimy trochę zmodyfikować nasz kod. Nie jest to bardzo trudne wystarczy po prostu wkleić ukośnik:

Tak wygląda tekst przed modyfikacjami:
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
A tak po:
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'/>
Teraz wszystko powinno się ładnie zapisać. Ale to oczywiście nie koniec, kolejną rzeczą jaką wyszukujemy w naszym kodzie jest (np. h3.post-title - czyli tytuł posta) klikamy na klawiaturze CTRL + F i wyskakuje nam okienko, w którym wpisujemy h3.post-title h4, zazwyczaj za pierwszym razem nie wyszuka nam odpowiedniego fragmentu dlatego musimy kliknąć enter dwa lub trzy razy. Kiedy znajdziecie taki fragment:


To znaczy, że jesteście mistrzami i nikt się z wami nie równa. A tak an poważnie, to znaczy, że prawie skończyłaś zabawę z niestandardową czcionką.
Teraz należy trochę pousuwać i trochę powklejać, a mianowicie zamiast tekstu : font:$(post.title.font); wklejacie swój drugi kod. Oczywiście robicie to w dwóch miejscach, a w trzecim kodzie, po prostu wklejacie go zaraz na początku po nawiasie klamrowym. Czyli wygląda to mniej więcej tak:

Widzicie różnice? Dobrze, i teraz ostatni bardzo łatwy krok, żeby dopełnić tej wspaniałości, wchodzimy na PROJEKT→DOSTOSUJ→ZAAWANSOWANE→DODAJ ARKUSZ CSS.
I wklejamy taki kod:
h3.post-title {font-family: 'Dancing Script', cursive;}
Oczywiście w nawiasie wklejacie swój drugi kod. Zapisujemy i włala!  

27 czerwca 2015

Dla początkujących: na czym to polega?

Witam! Dzisiaj dosyć krótka notka, dla tych którzy dopiero zaczynają z blogspotem. Zaczęły się wakacje, dlatego notki będą tutaj częściej umieszczane. Miałam zacząć czymś kompletnie innym, ale powiedziałam sobie, że najpierw kilka objaśnień a potem to co już przyjemniejsze.

A więc, kody CSS to nic innego jak proste rozkazy jakie ma wykonać dana przeglądarka bądź strona. A w jeszcze prostszym wytłumaczeniu, są to proste treści (w języku angielskim), które powodują, że strona lub w naszym przypadku blog, zmieniają, ustawiają, kolorują i co tylko się nam zapragnie.

Gdzie wpisać dany kod?
Należy wejść, w PROJEKT → DOSTOSUJ → ZAAWANSOWANE → DODAJ ARKUSZ CSS.

Następnie to jaki kod napiszemy, zależy tylko od nas. 

Z czego składa się taki kod?
Na początku należy podać selektor, czyli nazwę danej "rzeczy", którą chcemy zmienić. Każda, kolumna czy napis ma swoją oddzielną nazwę, więcej o selektorach TU.
Po selektorze, należy otworzyć nawias klamrowy "{" następnie wpisujemy cechę, czyli zmianę jakiej chcemy dokonać. Kolejną rzeczą jest wartość, jaką nadajemy temu wszystkiemu i na koniec stawiamy średnik i zamykamy nawiasem klamrowym. Dla przykładu, żeby bardziej wam to objaśnić.
.post {background: #000000;}
Czerwonym kolorem zaznaczyłam nasz selektor, w tym przypadku jest to po prostu nasz post, otworzyłam nawias i wpisałam cechę, background - czyli z angielskiego tło, a następnie wartość czyli kolor i zamknęłam nawias.
h3.post-title {font-size: 24px;}
W kolejnym przykładzie mamy taką samą sytuację, tylko tutaj selektorem jest tytuł posta, za nawiasem mamy font-size - czyli rozmiar czcionki, i następnie wartość czyli 24px. Pamiętajcie, gdy piszecie rozmiar czegokolwiek to za liczbą zawsze musi znajdować się px.

Mam nadzieję, że chociaż trochę objaśniłam wam na czym to wszystko polega. Od tego zaczynajcie, stwórzcie próbnego bloga i bawcie się kodami, sprawdzając je i testując bo głównym sposobem na obcykanie się w tej kwestii jest po prostu próbowanie. Także powodzenia!