9 stycznia 2016

Change your blog!



Hej misiaczki! Nie było mnie tu ponad tydzień, dlatego wracam dzisiaj do was z postem troszeczkę o kodach. Wiele osób nie wie od czego zacząć, skąd brać inspiracje. Zadają pytania innym blogerkom np na askach, które mają ładne szablony o kody, co może je delikatnie denerwować. Głównie dlatego postanowiłam napisać tego posta. Może najpierw zaczniemy od tego jak ma wyglądać nasz szablon. Szablony na bloga można kupić, ale nie polecam. Jeżeli wam się znudzi to parędziesiąt złotych pójdzie na marne. Najlepiej poszukać kodów na stronach z kodami css, ale też często są kody na takich blogach jak mój. Postanowiłam, że co parę miesięcy będzie pojawiał się taki post, aby ułatwić wam tworzenie designów. Wchodząc na stronę etsy.com w wyszukiwarkę wpisujecie "blog template" po czym wyszuka wam świetne szablony na bloga. Oczywiście są one do zakupienia, jednakże proponowałabym stworzyć to samemu. Ja robię to tak, że szukam szablonów, które mi się podobają i po prostu łączę ze sobą pojedyncze elementy (Dlatego tak często zmieniam design xD Po prostu nie mogę dojść do doskonałości). Zajmijmy się kodami!


.post-labels a {background-attachment: scroll;
background-clip: border-box;
background-color: #bda355;
background-image: none;
background-origin: padding-box;
background-size: auto;
color: #fff;
cursor: auto;
display: inline;
font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
font-size: 12.5px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
letter-spacing: 1px;
line-height: 20px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: auto;
word-wrap: break-word;
zoom: 1;}

.post-labels {
position: absolute;
padding: 10px 10px!important;
top: -35px;
left: 0px;
text-align: center;
width: 700px!important;
padding-right: -30px !important;}

.post-labels a:hover {
background-color: #ccc;}
Wartość px trzeba pozmieniać na własne potrzeby. Efekt wygląda następująco:


Na pewno każdy zna kod na podkreślenie posta na całą jego szerokość, ale czy ktoś zna podkreślenie na szerokość tylko nazwy posta? Na pewno nieliczni! Też wiele czasu szukałam tego kodu, aż w końcu znalazłam :D Chciałabym się nim z wami podzielić, ponieważ niby to mały element, ale od razu poprawi wygląd waszego bloga! Wystarczy wpisać ten kod:


h3.post-title a, h3.post-title a:visited {
color:#000000;
border-bottom: 1px solid #e3e3e3;
padding: 2px 5px;
}
h3.post-title a:hover {color:#d1d1d1;}
.post-body {font-size:110%; line-height:1.4; position:relative;}
.post-body a {color: #000000 !important; font-weight:bold; text-decoration:underline;}
.post-body a:hover {color: #d1d1d1!important; text-decoration:underline;
}
.post-body .tr-caption-container {color: #000000;}
.post-header {margin: 0 0; line-height: 1.6;}
table.tr-caption-container {padding-left:0px!important;
padding-right:0px!important;
margin-left:auto!important;
margin-right:auto!important;
}

Kiedy zmenicie "border-bottom" na "border-top" podkreślenie pojawi się u góry, co jest równie bardzo ładne! Kolor podkreślenia zmieniacie na własne potrzeby.


No i na koniec parę przydatnych kodów css. Polecam wam również blogi: Don't be normal oraz Mypastelgarden, na których w zakładkach "design" znajduję się dużo świetnych poradników! A ja się już z wami żegnam. Do napisania! :*

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
} <- Usunięcie ramek w poście

h2.date-header {
position:relative;
top:65px;
} - Data na dole

letter-spacing:6px; - Odstępy między literami (Dodajemy do kodu np z gadżetami)

.post img {max-width:93% !important} <-- równe zdjęcia

div.widget > h2:after,
div.widget h2.title:after {
content: "";
display: block;
position: absolute;
border-top: 1px solid #000;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 0;
width: 30px;
height: 0;
} <- Kreska pod nazwami widgetów (Liczby jak np długość kreski ustalamy według własnych potrzeb)

.main-inner .widget #ArchiveList {
margin: -8px 70px 20px;
} <- wyśrodkowanie archiwum

Przydały wam się kody? Lubicie takie posty? /Obrazek z morzem pochodzi ze strony tumblr.com
+
Niedawno również przyszła do mnie paczka ze sklepu rosegal.com Pzyszła do mnie bluzeczka, która widnieje na dole. Mogę w 100% polecić wam ich. Ubrania przychodzą takie jakie widnieją na zdjęciach oraz w takim samym rozmiarze jaki wybierzecie! Jest to już moja 3 paczka, wiec jestem z nich bardzo zadowolona. Przyszła do mnie również spódniczka, którą zamówiłam na mój komers, który jest już w kwietniu! Pokażę ją wam dopiero wtedy, ponieważ teraz jest trochę za zimno, ale mogę wam ją polecić, ponieważ na mnie leży idealnie. Poniżej również dam wam linki. Niestety bluzeczkę mogę tylko tak wam pokazać, ponieważ podarowałam ją mojej przyjaciółce, której tak się spodobała, że nosi ją praktycznie cały czas! Także widzicie :D Niedługo również zobaczycie mój makeup routine ze szmineczką, która również jest przepiękna. Same pozytywy! ^^


15 komentarzy:

  1. Super pomocny post, spróbuje pobawić się z tymi etykietami! :)
    Może coś z tego wyjdzie i mi :D
    Mój Blog - zerknij! Zapraszam :)

    OdpowiedzUsuń
  2. przydały się oczywiście bo ostatnio własnie bawie się tymi kodami a tych nie znałam więc jeszcze wejde na tamte blogi co podałaś i dokonam pewnie paru zmian

    obserwuje i zapraszam http://magdawiglusz.blogspot.com/

    OdpowiedzUsuń
  3. tego mi było akurat na dzisiaj trzeba :D
    przydatne!
    mój blog

    OdpowiedzUsuń
  4. Wydaje mi się, że wiekszość blogerek zna już te kody i arkusze CSS, ale będzie to dobra pomoc dla początkujących :)
    Pozdrawiam i zapraszam na nową dawkę fotografii :)

    ----Poznaj mój świat fotografii----

    OdpowiedzUsuń
  5. Całkiem fajny poradnik, znam już te kody, ale dla osób, które dopiero zaczynają zmianę szablonu - bardzo pomocne! :))

    Pozdrawiam! ♡ ❥ mój blog, kliknij

    OdpowiedzUsuń
  6. Łoł... zdjęcia powalają zaobserwowałam i liczę na kolejne takie posty :D
    http://juliaobi.blogspot.com/2016/01/snow.html

    OdpowiedzUsuń
  7. Bardzo pomocny post, tym bardziej, że w przyszłości chce zmienić wygląd bloga :D. Pozdrawiam!

    lublins.blogspot.com

    OdpowiedzUsuń
  8. Na pewno mi się przyda i z nich skorzystam. Świetny pomysł na post ;D

    my-time-alessa.blogspot.com

    OdpowiedzUsuń
  9. Aaa kocham cię za te kody. Zawsze miałam z tym problem i mimo, że będę miała robiony design to do poprawienia pojedynczych rzeczy na pewno się przyda. ;)

    http://alexiachmiel.blogspot.com/

    OdpowiedzUsuń
  10. fajny pomysł na pościk:) oraz.. muszę to napisać - bardzo 'mądra' nazwa bloga :) Super!


    zapraszam na : twoimioczami.blogspot.com - nowy post:)

    OdpowiedzUsuń
  11. Świetnie że dałaś te kody :D
    http://malwinabeczek.blogspot.com/
    Blog się spodoba? Zaobserwuj!

    OdpowiedzUsuń
  12. Lubię takie posty z poradnikami, fajnie ;)

    U mnie nowy post, zapraszam!
    Obserwuję ;)
    MÓJ BLOG-KLIIK

    OdpowiedzUsuń
  13. Takie poradniki są bardzo fajne, akody css, które podałaś powyżej bardzo przydatne :).

    alastelmach.blogspot.com

    OdpowiedzUsuń
  14. Bardzo przydatne i z chęcią wypróbuję :)
    _________
    Pozdrawiam, minimalistkaxo :*

    OdpowiedzUsuń

Have a nice Day Sweety!♥