piątek, 13 maja 2016

Poradnik Designu #5 Jak zrobić ramki w poście?

Hej! W dzisiejszym poście przedstawię wam kilka prostych kodów do posta robiących ramki. Zapraszam!
Pierwsza ramka:
Kod wklejamy w HTML posta. Wpisujemy tekst i zakańczamy znacznikiem </div>.

<div style="border: 5px double #cdcdcd; font-family: calibri; height: 120px; margin: 0 auto; overflow-y: scroll; width: 500px;">

grubość ramki
rodzaj ramki
kolor
czcionka
wysokość
margines
dodanie scrollowania
szerokość

Druga ramka:
Kod wklejamy w HTML posta. Wpisujemy tekst w wyznaczone pole.
TEKST
TEKST


<div style="margin: 0 auto; width: 430px;">
<div style="border: 5px double #cdcdcd; float: left; width: 200px;">
<div style="text-align: center;">
TEKST</div>
</div>
<div style="border: 5px double #cdcdcd; float: right; width: 200px;">
<div style="text-align: center;">
TEKST</div>
</div>

szerokość obu ramek
szerokość jednej ramki

Trzecia ramka:
To tej najczęściej używam. Kod wklejamy w HTML posta. Wpisujemy tekst i zakańczamy znacznikiem </div>.
<div style="border: 5px double #cdcdcd; margin: 0 auto; width: 200px;">
Wartości musice sami ustalić. Oczywiście według uznania i gustu.

Mam nadzieję, że ten krótki post Wam się spodobał! Obecnie jestem w Londynie, w sumie z niego wracam, ale piszę do Was z domu post opublikował się automatycznie. Zapraszam do obserwowania, komentowania i udostępniania. Do zobaczenia już za tydzień!

21 komentarzy:

  1. Bardzo przydatne ;) może kiedyś cosik takiego zrobię na blogu ;)
    http://konieckropka-bookgirl.blogspot.com/

    OdpowiedzUsuń
  2. Przydatny post! Założę się że pomoże niejednej osobie, która nie zna się na tym aż tak dobrze :)
    cosska-life.blogspot.com/

    OdpowiedzUsuń
  3. Przydatne dla początkujących :)
    http://paulan-official-blog.blogspot.com/

    OdpowiedzUsuń
  4. Idealnie przyda się osobą początkującym, którzy zaczynają przygodę z HTML. :)
    Pozdrawiam !

    OdpowiedzUsuń
  5. Na pewno skorzystamy

    Zapraszamy do nas
    http://ppinkcats.blogspot.com/?m=1

    OdpowiedzUsuń
  6. Bardzo przydatne te ramki, najbardziej chyba ta pierwsza będzie wykorzystywana przeze mnie.
    Pozdrawiam,
    Klaudia

    OdpowiedzUsuń
  7. Przydatny post, myślę, że kiedyś skorzystam :D

    Nowy post c:
    http://to-survive-every-day-blog.blogspot.com/

    OdpowiedzUsuń
  8. przydatne :) skorzystam pewnie z niego ^^

    http://alaska-pisze.blogspot.com/

    OdpowiedzUsuń
  9. Bardzo przydatne :)

    witchhearted.blogspot.com

    OdpowiedzUsuń
  10. bardzo przydatne i bardzo ładnie wygląda :)

    M V R C E L I A (click) zapraszam na nowy post :)

    OdpowiedzUsuń
  11. Przydatne, dodam od razu do zakładek :)


    http://nonstopyou.blogspot.com/

    OdpowiedzUsuń
  12. Wow mega przydatny post i może wypróbuję! Mam pytanie skąd bierzesz te wszystkie pomysły i instrukcje?
    Śliczny design bloga <3 Obserwuję!

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję! Pomysły na posty po prostu wchodzą mi do głowy, ale jeśli chodzi o ten to wyglądało trochę inaczej. Wchodząc na blogi coraz częściej widziałam takie ramki i zastanawiałam się jak je zrobić. Z pomocą przyszedł mi mój brat i pomógł mi to trochę ogarnąć. Teraz już znam podstawy na tej ciemnej mocy HTMLa i CSSa i trochę kombinuję :)

      Usuń
  13. Nie za trudna metoda, a z pewnością wyróżniająca blog :)
    >FOXYDIET<

    OdpowiedzUsuń
  14. Bardzo przydatne :) CSS i HTML to dla mnie świetna zabawa, z chęcią przetestuje te ramki!
    Na pewno zostanę tu dłużej! I muszę pochwalić za design bloga - jest prześliczny ^^

    Singo Blog

    OdpowiedzUsuń
  15. Hej!
    Nominowałam cię do LBA ;) Więcej informacji znajdziesz o tutaj: https://zdjeciapelneinspiracji.blogspot.com/2016/05/liebster-blog-award-2.html?
    Pozdrawiam :)
    FotoReporterka

    OdpowiedzUsuń
  16. Świetne!Może w końcu się nauczę!

    OdpowiedzUsuń

♥ Dziękuję za każdy komentarz ♥
♥ Napisz coś wartościowego ♥
♥ Nie ma nic złego w krytyce, o ile jest konstruktywna ♥
♥ Nie komentuj samych zdjęć, pamiętaj że oprócz nich jest też tekst ♥
♥ Każdy obserwator ma miejsce w moim serduszku ♥