5 lutego 2017

Zrób ze mną szablon na bloga



Na grupach blogowych, głównie na facebooku, pojawiają się posty typu "Jak zrobić design" , "Jest tu ktoś kto wykonuje szablony na bloga?". Oczywiście ja je wykonuję, ale nie można dogodzić każdemu. Najlepiej jak nauczymy się samemu robić szablony, jednakże niektórzy sa chyba zbytnimi leniwcami, hihi. A więc ja przychodzę z pomocą!
Zacznijmy więc od początku. W google niestety nie da się znaleźć (a przynajmniej moim zdaniem) szablony, które będą satysfakcjonujące, dlatego najlepiej zrobić je samemu. If you know what I mean, bez zbędnego gadania, zaczynajmy.

Rozpoczynamy od najbardziej prostych i pomocnych kodów. 

NAGŁÓWEK:

Wyśrodkowanie nagłówka:
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

 Wysokość nagłówka:
.header { height:450px;}
 
Położenie nagłówka:
.header-inner .widget div, .header-inner img {
margin-left: auto px;
margin-right:auto;
}
Ja w tym szablonie wykorzystałam tło nagłowka. Wchodzimy w "Tytuł bloga" w narzędziach zaawansowanych i kolor ustawiamy na czarny. Aby nie był on za duży, wykorzystujemy wyżej podany kod "Wysokość nagłówka" a parametry - czyli height: xx px ustawiamy na liczbę jaką chcemy wysokość. Lecimy dalej kochani.
 POSTY:
 

Wyśrodkowanie tytułu notki:
 h3.post-title, .comments h4 {text-align: center;}
Wyśrodkowanie daty: 
 h2.date-header {text-align: center;}
Dostosowanie tytułu posta: 
 h3.post-title, h2.date-header span {
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase !important;
    margin-bottom: 10px;
}

Szary pasek pod tytułem posta:
h3.post-title a, h3.post-title a:visited {
    color: #000000;
    border-bottom: 1px solid #e3e3e3;
    padding: 2px 5px;
}
h3.post-title a {
   
    color: #141414;
}
a:link {
    text-decoration: none;
    color: #444444;
}
a:link {
    text-decoration: none;
    color: #444444;
}
a:link {
    text-decoration: none;
    color: #0a0a0a;
}
h3.post-title {
    text-transform: uppercase;
    letter-spacing: 2px;
}
h3.post-title {
    color: #000000;
   
    text-align: center;
    letter-spacing: 2px !important;
}
h3.post-title {
    text-align: center;
}
.widget {
    line-height: 1.4;
}
.content {
    word-wrap: break-word;
}

Data pod tytułem posta:
 h2.date-header span {
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: absolute;
    padding: 2px 6px !important;
    top: 48px;
    left: 266px;
    z-index: 100000;
}

Ustawienie wielkości zdjęć (pamiętajcie, aby zdjęcia były równe, należy ustawić je w kodzie css, ale również podczas pisania posta ustawiać je na "oryginalny rozmiar"):

.post img {max-width:106% !important}
.post-body img {padding: 0px ; margin: 0 0px;}
.post-body img {
    border: 0 !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 0px !important;
    background: none !important;
}
.post-body img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.post-body img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}
.column-right-inner img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Stopka posta:
 .jump-link {
margin: 0 auto;
text-align: center;
}
.jump-link a {

    color: #141412;
    display: block;
    font-weight: 600;
    font-family: Arial;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: right;
    padding: 12px;
    margin-top: 0px;
    font-style: normal;
  
}

a:link {
    text-decoration: none;
   
}
.post-footer {
    padding:5px 10px;
    color: #141412;
    display: block;
    font-weight: 600;
    font-family: Arial;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align:left;
    margin-top: -30px;
    font-style: normal;
}

Ustawienie lini tekstu posta:
 .post-body img {padding: 0px ; background: none ;}
.post-body {
    line-height: 31px;
}

Usunięcie paska u góry bloga:
 #Attribution1 {display: none;}
.navbar {   display:none; }

PASEK BOCZNY:
Wygląd archiwum (Najpierw ustawiamy je jako "menu"):
#BlogArchive1_ArchiveMenu {Width: 265px; height: 37px;padding:4px;
color:;
text-align:left;
font-family:Arial;
text-transform:uppercase;
letter-spacing: 2px;
font-size:11px;
}

.main-inner .widget #ArchiveList {
margin: 1px -4px 1px;
}

Wyjustowanie tekstu w kolumnie bocznej: 

#Text1 {
    text-align: justify;
    font-size: 12px;
    line-height: 2.3;
}

Wygląd nazw gadżetów:
 .sidebar h2 {
    padding: 3px 0px 5px;
}
.sidebar h2 {
    display: inline-block;
    margin: 4px 1px;
}
.sidebar h2 {
    text-decoration: none;
}

.sidebar {
    text-align: center;
}


.sidebar .widget h2 {
padding:5px;
Text-align:center;
font-family:;
text-transform:uppercase;
letter-spacing: 2px;
font-size:12px;
border-bottom: solid #191919;
border-width: 1px;
}

I voila! To tyle :D Jak wam spodobał sie poradnik? Skorzystacie z kodów, które podałam? W zakładce "design" oraz "contact" możecie do mnie pisać o szablon lub jeżeli czegoś nie wiecie, to mogę dać wam kod. W końcu jako blogerzy, pomagamy sobie.

37 komentarzy:

  1. Kody na pewno przydane, chociaż uważam, że da się znaleźć w Googlach jak to określiłaś szalony, ale samemu trzeba je trochę podretuszować. Przynajmniej ja tak zrobiłam
    Pozdrawiam,Madda
    blog ->klik

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak, jednakże w "skrajnych przypadkach" jest to dosyć trudne ;) Buziaki

      Usuń
  2. Post bardzo przydatny szczególnie, że właśnie zastanawiam się jak zmienić wygląd bloga:D
    http://xartday.blogspot.com/

    OdpowiedzUsuń
  3. Mega pomocny post,szczególnie dla początkujących!

    OdpowiedzUsuń
  4. Większość tych kodów mogłam zobaczyć już gdzie indziej ;)
    Tworzenie własnego szablonu to na pewno coś fajnego, jednak nie zgadzam się z tobą, że w internecie nie ma fajnych szablonów - doszukałam się naprawdę kilku interesujących.

    Pozdrawiam!
    Diamentowe myśli - klik

    OdpowiedzUsuń
  5. Bardzo ładny szablon :) Fajnie,że tutaj wszystko tak podałaś ;*

    OdpowiedzUsuń
  6. Bardzo ładny szablon :) Bardzo pomocny post :)

    Pozdrawiam i zapraszam do siebie :)
    Agaa
    lovetravelingreadingbooksandfilms.blogspot.com

    OdpowiedzUsuń
  7. Robienie szablonów to dla mnie czarna magia
    Super że potrafisz je robić tak trzymaj :)

    OdpowiedzUsuń
  8. Bardzo interesujący wpis. Dla mnie takie rzeczy to czarna magia i mam z szablonem dużo problemów.

    OdpowiedzUsuń
  9. Bardzo przydatny post i ciekawy pomysł. Pozdrawiam :)

    OdpowiedzUsuń
  10. Świetny post, przyda mi się. Zapisałam sobie! Bardzo podoba mi się design Twojego bloga, obserwuję i czekam na kolejne posty! shiny-mind.eu

    OdpowiedzUsuń
  11. Kody mega pomocne na pewno je wykorzystam !
    aniolek4.blogspot.com

    OdpowiedzUsuń
  12. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  13. Wow ! Na pewno wykorzystam :)

    OdpowiedzUsuń
  14. O kurde, ostatnio sama wstawiałam szablon na bloga! I wow akurat czegoś takiego potrzebowałam, zapiszę sobie w zakładkach :D

    OdpowiedzUsuń
  15. super na pewno komuś się przyda :)

    OdpowiedzUsuń
  16. przydatny post :) jak zaczynałam z blogowaniem, wielu rzeczy szukałam właśnie w internecie i tak jakoś mi się to pokulało, chociaż jeszcze kilka rzeczy chciałabym zmienić :) muszę się wziąc za to w wolnej chwili :)
    pozdrawiam i zapraszam do siebie, buziaki! tysiatestuje.blogspot.de

    OdpowiedzUsuń
  17. Na pewno wypróbuje, jednak zmieniałam niedawno szablon, więc ten post zapisałam i wypróbuje ten niedługo! ♥

    londonkidx.blogspot.com

    OdpowiedzUsuń
  18. Super post, chyba skorzystam z niektórych. Ja niestety w sprawach komputerowych jestem zielona :(

    http://livetourevel.blogspot.com/2017/02/liscie-manuka-ziaja.html

    OdpowiedzUsuń
  19. Wygląd twojego bloga jest na prawdę świetny! Ja nad swoim ciągle pracuję i staram się udoskonalać w wolnej chwili, więc te kody na pewno mi się przydadzą i post znajdzie się w zakładce :)
    www.all-of-madi.blogspot.com

    OdpowiedzUsuń
  20. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  21. Dla mnie CSS, JS i HTML to niezła zagadka, bo muszę nieźle pomyśleć zanim KOD stanie się logiczny, dlatego mimo że zaprojektowałem kilka layoutów WWW to nie ruszam się projektowania bloga, bo tylko bym namieszał. Jak będę chciał zrobić dobrą stronkę to jak będzie mnie stać to komuś zapłacę.

    Pozdrawiam Mateusz! :)

    Kliknij tutaj! aby wejść na mojego bloga.

    OdpowiedzUsuń
  22. Świetny post :) na pewno z niego skorzystam bo szukałam takiego :)

    OdpowiedzUsuń
  23. Super poradnik! Ja jednak wolę szukać gotowych, gdyż na zabawę w kodach źródłowych najzwyczajniej w świecie nie mam czasu :D

    pozdrawiam
    ifeelonlyapathy.blogspot.com

    OdpowiedzUsuń
  24. Świetnie wytłumaczone i chociaż trochę ułatwiłaś sprawę to sama chyba bym z tym nie podołała. Blog świetny, wydajesz się być bardzo sympatyczną dziewczyną więc chętnie zostanę na dłużej :)

    Obserwuję :)
    teyzz.blogspot.com

    OdpowiedzUsuń
  25. O, mam w sumie coś podobnego :)

    OdpowiedzUsuń
  26. świetne! na pewno mi się przyda pomoc bo jestem totalnie nie ogarnięta w tych sprawach :D jakbyś miała chęć na pomoc czy podanie jeszcze paru rad odezwij się! tacy ludzie są strasznie potrzebni i strasznie kochani, pozdrawiam HappyFatty

    OdpowiedzUsuń
  27. Ooo też zrobiłam taki post :) Są niezwykle przydatne!

    OdpowiedzUsuń
  28. Ja bardzo dobrze ogarniam robienie wyglądów, ale dobrze, że pokazujesz innym jak to robić :)
    www.mybloggingtravel.pl

    OdpowiedzUsuń
  29. Super, że zrobiłaś taki post, naprawdę. Wkrótce skorzystam! :))

    Obserwuję już od dłuższego czasu, zapraszam do mnie >> michalinm.blogspot.com <<

    OdpowiedzUsuń
  30. mega pomocny post! zostaję na dłużej :) niedługo mam w planach zmienić mój szablon, nie mogę już na niego patrzeć haha więc pewnie się odezwę jakoś na dniach :)
    mam takie pytanie, czy gotowe szablony, takie które się pobiera z google da się edytować?


    pozdrowionka,
    Mój BLOG

    OdpowiedzUsuń
  31. Mega pozytywny post i pomocny :D
    xoxoklaudia.blogspot.com
    Zapraszam <3 Jeśli Ci się spodoba - zaobserwuj :* Na pewno się odwdzięczę :)

    OdpowiedzUsuń
  32. O kurcze! Bardzo przydatny post! Od razu zapisałam go w zakładkach bo sama muszę coś zmienić w moim blogu. Może zajrzysz i doradzisz mi, co byłoby fajnie zmienić itp?
    ZAPRASZAM DO MNIE, KLIK

    OdpowiedzUsuń
  33. Przydatni wpis :)

    Zapraszam do mnie. Będzie mi bardzo miło, jeżeli zostawisz po sobie ślad w postaci obserwacji oraz komentarza. ☺ normalbutdidnot.blogspot.com (click)

    OdpowiedzUsuń
  34. Bardzo pomocny post, ostatnio siedziałam na wyglądem mojego bloga pół dnia i nadal mi się on nie podoba, czy ty robisz wygląd bloga? Chodzi mi o zaprojektowanie wszystkich zakładek, czy widgetów typu Instagram itd. Ogólnie całość, gdyż to co jest teraz na moim blogu mnie nie satysfakcjonuje :( Bardzo prosiłabym o pomoc :*
    http://victoriadoublefour.blogspot.com/?m=0

    OdpowiedzUsuń
  35. Super post bardzo mi on pomógł ;) Bardzo przydatny

    Mój blog: http://wikka-blog.blogspot.com

    OdpowiedzUsuń

Have a nice Day Sweety!♥