Zrób szablon bloga - instrukcja

Dodane przez - 26 kwietnia

Design bloga bywa ciężkim kawałkiem chleba. Czasami jest też nazywany przez niektórych "czarną magią". Jestem pewna, że każdy bloger chce, aby jego strona wyglądała jak najlepiej. Mam nadzieję, że z dniem dzisiejszym dzięki Galantyce będzie to prostsze do zrealizowania. 



 Przygotowałam szablon, do którego wykonania potrzebne są jedynie chęci oraz podlinkowany nagłówek w formie graficznej. Moja instrukcja zawiera kilka niestandardowych kodów, które warto wykorzystać, bądź zapamiętać na przyszłość. 
Efekt pracy
Are you ready? Let`s go!

Naszą pracę zaczynamy od wybrania czarnego szablonu rewelacji. Wybrałam akurat ten kolor by zaoszczędzić pracy w usuwaniu cieniów z większości gadżetów.
Pierwszym podstawowym krokiem jest wgranie tła, dostosowanie szerokości kolumn (u mnie szerokość wynosi 1190px, a pasek boczny 350px) oraz układu treści. Ja wybrałam pasek boczny po lewej stronie. Gdy już zadbamy o szkielet bloga, w podstronie 'Zaawansowane' zmieniamy kolory na interesujące nas. Ja na wstępie zrobiłam wersję czarno-białą, a resztę zrobię przez CSS.
Z takim o to szablonem rozpoczynam kodowanie.


Nagłówek
.header-outer {background-color : #ff7272; width: 100%;
margin: 0; padding: 0;
padding-bottom: 10px !important; text-align: center;}		Tło nagłówka
.Header {background-image: url(LINK DO NAGŁÓWKA);
background-position: center !important; width: 100% !important;
background-repeat: no-repeat;padding-top: 130px;}		Zdjęcie nagłówka

Strony
.tabs-outer {padding: 7px;}Wysokość stron
.tabs-outer{text-align:center;position:relative;}
.PageList li {display:inline !important; float:none !important;}		Wyśrodkowanie stron

Tytuł Posta
h3.post-title {border-bottom: 3px #877a7a dashed;}Podkreślenie tytułu wpisu
h3.post-title { text-align:center;}Wyśrodkowanie
h3.post-title { padding:3px;}Wysokość
h3.post-title {text-transform:uppercase;}Wszystkie litery wielkie

Data
.date-header span {width: 50px; height: 30px;}Szerokość/Wysokość daty.
.date-header span {border-top: #ff7272 3px solid;border-bottom: #ff7272 5px solid;}Obramowanie na górze/dole.
.date-header span {border-radius: 30px 30px 30px 40px;}Zaokrąglenia
.date-header span{ margin: -0px -100px -90px 820px;}Pozycja
.date-header span {background-color:  #fff ;}Kolor tła daty
.date-header span {text-align: center ;}Wyśrodkowanie tekstu

Usunięcie tła z gadżetów
Jeśli chcemy usunąć tło z danego gadżetu (w mojej instrukcji jest podany na Zdjęcie i text) musimy wyszukać ID gadżetu, które zasłuży nam jako selektor.
#Image1 {background: none; border: none;}Spod zdjęcia
#Text1 {background: none; border: none;}Spod tekstu

Pasek boczny
.column-left-inner {text-align:center;}Wyśrodkowanie zawartości
.column-left-inner .widget {border-top: #ff7272 5px solid;}Podkreślenie na górze gadżetu

Czytaj więcej
.jump-link a {background:#ff7272;}Tło
.jump-link a {font-size: 18px;color: #fff;}Wielkość/kolor czcionki
.jump-link a {text-align:center;}Wyśrodkowanie czcionki
.jump-link a {padding: 8px;}Wysokość
.jump-link a {display: block;}Wyświetlanie w bloku (z góry do dołu)


Stopka bloga
.footer-outer {border-top: 4px solid #ff7272;}Pozioma kreska u góry stopki

 Jeśli doszedłeś do tego momentu, to wiedz, że jestem z Ciebie dumna jak z własnego dziecka! Jeśli coś nie jest do końca zrozumiałe, zapraszam na mój email galantyka@gmail.com. Możecie również napisać w komentarzach o poszczególnym problemach. Chciałabym jednocześnie dodać, że zawartość tego posta jest moją, samodzielną pracą, dlatego zwracam się z prośbą o nie podpisywanie się pod nią i nie kopiowanie na swoje wpisy. Dziękuję :)
Do następnego, 
Nishka

Share
Tweet
Pin
Share
Etykiety :

Inne wpisy, które mogą ci się spodobać

7 komentarze

  1. malusiawerusia26 kwietnia 2017 13:06

    oj taki design to wielkie wyzwanie! zapisuję link i kiedyś sobie poćwiczę:)

    malusiawerusia.blogspot.com

    OdpowiedzUsuń
  2. Shikatemeku28 kwietnia 2017 15:33

    Robienie własnego szablonu jest dla mnie bardzo trudne, dlatego jednak wolę gotowe, darmowe szablony. Pozdrawiam:)

    OdpowiedzUsuń
  3. zyciejakpomarancze28 kwietnia 2017 18:28

    muszę kiedyś spróbować się pobawić ;)

    OdpowiedzUsuń
  4. Cumulonimbus931 maja 2017 14:47

    Często widzę szablony robione samodzielnie przez autorów blogów, co niemal zawsze wprawia mnie w osłupienie :) Dzięki za wskazówki ;)

    OdpowiedzUsuń
  5. Nika3 maja 2017 20:14

    nawet nawet :)

    YouTube
    Blog

    OdpowiedzUsuń
  6. Martyna4 maja 2017 20:08

    Świetnie wytłumaczone ale jednak trochę się boje hahah :D

    OdpowiedzUsuń
  7. Anonimowy21 czerwca 2017 16:00

    Czuję, że w najbliższym czasie też będę się bawić w graficzną stronę swojego bloga, więc zachowam sobie Twój wpis na potem, jeśli pozwolisz :)

    OdpowiedzUsuń