Dzis chciałabym Was zaprosić na drobny poczęstunek kodami na stworzenie efektywnego paska bocznego. Pamiętajcie, że ta kolumna to miejsce na niezbędne informacje o blogu - nic więcej. Czym więcej gadżetów na boku, tym bardziej wszystko staje się mniej przejrzyste. Słowem wstępu to tyle :)
Are you ready? Let`s go !
Na początek zacznijmy od podstaw takich jak wybranie gadżetów, które mają się u nas znaleźć. Ja wybrałam w kolejnosci : Obraz(zrobimy z tego gadżet "O mnie"), Obserwatorzy, Popularne posty(najlepiej na 3 posty), Etykiety(chmura), Archiwum. W gadżecie Obraz dodaj od razu również zdjęcie oraz tekst o sobie.
No i możemy zacząć kodowanie, więc teraz przejdziemy do 'projektanta szablonów'. Myślę, że nie muszę dokładnie tłumaczyć zasady działania tabelki poniżej?
No i możemy zacząć kodowanie, więc teraz przejdziemy do 'projektanta szablonów'. Myślę, że nie muszę dokładnie tłumaczyć zasady działania tabelki poniżej?
Całość kolumny
| .column-right-inner h2 { text-align:center; text-transform: uppercase; letter-spacing: 3px; color:#fff; font-size: 12pt; font-family: Impact; background: #333333; height:22px;} |
Nagłówek gadżetu:
tekst wyśrodkowany,
tekst pisany dużymi literami,
odstępy między literami 3px,
kolor czcionki biały,
czcionka 12,
rodzaj czcionki 'Impact',
kolor tła (paska) szary
wysokość paska 22px
|
| #Image1 {text-align:center;} |
Wyśrodkowanie zdjęcia w 'O mnie'
|
Popularne Posty
| #PopularPosts1 ul {margin: 0;} |
Marginesy w gadżecie
|
| #PopularPosts1 .item-thumbnail { |
width: 120px;
height: 130px;
border-right: 4px dotted #fff;
margin: 0px 6px px px !important;}
Zdjęcie postu
| #PopularPosts1 .item-thumbnail img { |
position: relative;
height: 100%;
width: 100%;}
Pozycja zdjęcia, jego wysokość
| #PopularPosts1 ul li { |
margin-bottom: 5px;
max-height: 130px;
min-width: 240px;
overflow: hidden;}
Pozycjonowanie prawej części, z tekstem
| #PopularPosts1 ul li:first-child { |
background: #FFFFCC;}
#PopularPosts1 ul li:first-child + li{
background: #CCFFFF;}
#PopularPosts1 ul li:first-child + li + li {
background: #FFCCCC;}
Kolor tła części z tekstem>
jeśli macie więcej pokazywanych postów
dodajcie kolejne '+li'
jeśli macie więcej pokazywanych postów
dodajcie kolejne '+li'
| #PopularPosts1 .item-title { |
text-transform: uppercase;
padding: 7px 4px 7.5px;}
Tytuł wpisu
duże litery,
marginesy
| #PopularPosts1 .item-snippet { |
font: 13px "Times New Roman",Times,FreeSerif,serif;}
Czcionka widocznej części wpisu
| #PopularPosts1 .widget-content ul li {
padding: 0px 5px 0px 0px!important;}
| Pozycja marginesów 'w gadżecie; |
Etykiety
| #Label1 a{ |
margin:0 3px 3px 0;
padding: 10px;
text-transform: uppercase;
border: solid 1px #999999;
border-radius: 2px;
float:left;
font-size:12px;
Z
color:#999999; }
Etykiety:
margines zewnętrzny,
margines srodkowy,
duże litery,
obramowanie(solid-linia ciągła)
zaokrąglone rogi
upozycjonowanie na lewo
kolor ciemnoszary
Archiwum
| #BlogArchive1_ArchiveMenu { width:100%; font: 11pt arial; border: 1px solid #000; padding: 10px; color: #000; margin: 7px 0px 0px 0px; text-transform:uppercase;} |
Archiwum
szerokość - 100%(na cały) czcionka 11pkt, arial obramowanie margines wewnętrzny kolor czarny margines zewnętrzny duże litery w tekście |
Dzisiaj to byłoby na tyle! Mam nadzieję, że korzystanie z instrukcji nie będzie sprawiać problemu i każdy z Was podoła temu 'wyzwaniu'. Jednak jeśli napotkacie jakieś problemy zapraszam na mój email - galantyka@gmail.com
P.S. Przepraszam za tak rozjechane wnętrze posta, ale jestem dopiero początkująca jeśli chodzi o tabelki :)
87 komentarze
Ooo bardzo przydatne info, może kiedyś skorzystam 😊
OdpowiedzUsuńBardzo przydatny post! Ja mimo że zabawę z blogowaniem zaczęłam ponad 2 miesiące temu do teraz szukam idealnego szablonu i innych rzeczy dzięki którym mój blog będzie wyglądać lepiej! Oczywiście zaczynam Cie obserwować bo chcę zobaczyć jak się rozwijasz i na jakie tematy będziesz pisać :D Życzę miłego wieczoru oraz serdecznie zapraszam do siebie reginaboguckaaa.blogspot.com :))
OdpowiedzUsuńCieszę się, że mogę pomóc! I witam Cię cieplutko! Dziękuję za miłe słowa :)
Usuńfajny i przydatny post
OdpowiedzUsuńhttp://swieciedziewczyn.blogspot.com/
Świetny przydatny post :)
OdpowiedzUsuńMój Blog
Bardzo przydatny wpis, szczególnie dla początkujących w blgosferze, którzy nie mają określonego i zadowalającego szablonu :P Pamiętam te czasy, kiedy godzinami siedziałam nad jakąś jedną kreską bo nie chciała zniknąć i szpeciła cały blog :(( Ale myślę, że mimo wszystko warto włożyć w to trochę pracy bo estetyka strony jest bardzo ważna :D
OdpowiedzUsuńPozdrawiam ^-^
Zapraszam na swojego Bloga Sakurakotoo
Hah, właśnie tak wyglądały początki mojej przygody z kodowaniem! Masz rację, czasami to szablon decyduje czy czytelnik zostanie na tym blogu. Również pozdrawiam :)
UsuńJa w tych sprawach jestem tak nieporadna, że szok :P Dzięki za notkę. Bardzo przydatna.
OdpowiedzUsuńMam nadzieję, że się przyda ! ^-^
UsuńWpis bardzo przydatny, jeśli będę zmieniać coś w przyszłości, to na pewno skorzystam! :)
OdpowiedzUsuńMyślę nad nowym wyglądem bloga, więc taki post na pewno bardzo mi pomoże :)
OdpowiedzUsuńPozdrawiam!
Zapraszam do obserwacji i komentowania :)
lublins.blogspot.com
Wszystko fajnie, tylko ja jestem zielona na ten temat i chętnie to wszystko komuś zlece
OdpowiedzUsuńbardzo przydatny post na pewno z niego skorzystam :)
OdpowiedzUsuńświetny post dla laików!
OdpowiedzUsuńoooo, jak się cieszę, że ktoś próbuje w jakiś prosty sposób wytłumaczyć ideę css, przecież to nie takie trudne :D ja sama działam na zasadzie prób i błędów, oraz klikania podglądu non stop :D
OdpowiedzUsuńchodziłam do technikum o profilu graficznym, ale tam niczego się nie nauczyłam, jestem samoukiem :P
OdpowiedzUsuńObserwuję, bo takie posty są bardzo korzystne, wiem na pewno, że w przyszłości zrobię jakieś zmiany na blogu i takie rady mi się przydadzą :)
OdpowiedzUsuńSuper! Cieszę się, że mogę jakoś pomóc :)
UsuńDodaję do zakładki ten post :) myślę, że może mi się przydać :)
OdpowiedzUsuńmyślę, że dla wielu osób może to być przydatne. Więcej takich postów!!
OdpowiedzUsuńZAPRASZAM DO MNIE:
BLOG
INSTAGRAM
Nawet nie wiesz jak mi pomogłaś. Bardzo przydatny post dla bloggerów. Oby takich więcej
OdpowiedzUsuńlubię posty z kodami CSS,zaraz spróbuje zmienić wygląd swojego archiwum ;)
OdpowiedzUsuńzapraszam do siebie -> KLIK :)
Gdyby ten wpis istniał za czasów mojego blogowania na blogspocie, to zaoszczędziłabym pół roku życia :D
OdpowiedzUsuńbardzo fajnie przejrzyście wyjaśnione;)
OdpowiedzUsuńO jak dobrze, że tu trafiłam. Do tej pory nie mogłam znaleźć nic konkretnego. Bardzo przydatne :)
OdpowiedzUsuńMój blog - Klik
O kurde, mega przydatny post! Jak będę miała czas - skorzystam :)
OdpowiedzUsuńkmmbffl.blogspot.com
Super! Genialny post, bardzo przyadatny zwłaszcza że planuję wprowadzić jakieś zmiany w szacie graficznej mojego bloga :D Taka seria byłaby świetna :) Obserwuję ♥
OdpowiedzUsuńPozdrawiam, vthetoria.blogspot.com
W takim razie biorę się do roboty! ;*
Usuńprzydatne informacje :) dodaję Twój blog do obserwowanych- bardzo dokładnie wszystko wyjaśniasz i myślę, że nie raz mi się przydasz :D
OdpowiedzUsuńpozdrawiam :*
Bardzo przydatny post! :)
OdpowiedzUsuńPamiętam, ze jak zaczynałam przygodę z blogiem, to szukałam właśnie czegoś takiego :)
Pozdrawiam i obserwuję ;)
Mam nadzieję, że zajrzysz do mnie i również zaobserwujesz, jeśli Ci się spodoba ;)
My blog(Click)♥
bardzo fajny blog:) będę zaglądać tu częściej ponieważ sama też zaczynam przygodę z blogiem i nie wszystko jest mi jeszcze wiadome:)
OdpowiedzUsuńzapraszam do siebie:
https://comamima.blogspot.com
Już widzę, że zapowiada się ciekawy blog. Obserwuję, i dziękuję za ciepłe słowa pozostawione u mnie :)
OdpowiedzUsuńPowiem Ci szczerze że bardzo przydatny post ;p
OdpowiedzUsuńBardzo dziękuję przyda mi się ten post! :)
OdpowiedzUsuńBardzo pomocny post! jak tylko znudzi mi się mój aktualny szablon (podejrzewam, że to nastąpi szybciej niż myślę :D) to skorzystam z tych porad :D Poproszę więcej takich, bo jestem noga w tej kwestii :D
OdpowiedzUsuńA co do ząbków, to dentystka zaproponowała mi aparat stały, ale to mega dużo kosztuje i nie mogę sobie pozwolić na taką atrakcje. Poza tym nie wiem czy umiałabym w nim normalnie rozmawiać hahhaa :D Jak Ci się nosi ten pierwszy tydzień? słyszałam, że na początku troszkę boli :)
pozdrawiam! :)
Świetny post , baardzo przydatny :3 oby takich więcej :3
OdpowiedzUsuńKody kody kody ...
OdpowiedzUsuńśnią mi się już po nocach. spędziłam całe tygodnie na tym by znaleźć idealny dla siebie szablon i go dostosować do swoich dość wygórowanych zresztą wymagań.
~w wolnej chwili zapraszam do siebie: http://fanaberia-a.blogspot.com
Najważniejsze są efekty, a u Ciebie akurat są znakomite! ♥
UsuńJa w tych wszystkich kodach, wyglądach jestem całkowicie zielona :/
OdpowiedzUsuńhttp://my-natalias-place.blogspot.com/
Dzięki! Na pewno się przyda! Kompletnie nie znam się na wyglądzie bloga! Obserwuje
OdpowiedzUsuńBardzo przydatne kody, nawet dla mnie :)
OdpowiedzUsuńDziękuję za odwiedziny i komentarz u mnie, bardzo miło, że zajrzałaś! Rady, które tu zamieszczasz, są bardzo przydatne, może i ja skorzystam...No i będę zaglądać. Pozdrawiam.
OdpowiedzUsuńOho chyba czas najwyższy zacząć bawić się kodami CSS. Dzięki za przydatne informacje. Skorzystam na pewno (przy najbliższej zmianie szablonu). Może wreszcie uda się mi zrobić coś co byłoby całkiem moje :)
OdpowiedzUsuńRewelacja dziękuje za te kody!!! :) SKORZYSTAM!
OdpowiedzUsuńSuper to wszystko wyjaśniłaś, na pewno jak będę robić remont na blogu to skorzystam. Dziękuję za wyjeśnienie tych wszystkich kodów, dawno nie spotkałam tak przydatnego posta :D Obserwuję i zostaję na dłużej :>
OdpowiedzUsuńKiedyś, na samaym początku tez bawiłem się tymi kodami ale zrezygnowałem :).
OdpowiedzUsuńAż sobie zrobiłam screena twojego bloga. Będę wpadać, nie umiem się doczekać kolejnych nowinek, a te... być może uda mi się użyć <3 Dziękuję! W końcu mój blog bedzie jakoś wyglądał.
OdpowiedzUsuńPozdrawiam serdecznie,
tysiac-zyc-czytelnika.blogspot.com
Bardzo przydatny poradnik, chyba skorzystam niedługo :)
OdpowiedzUsuńhttp://abonentpozazasiegiem.blogspot.com/
Przydatne informacje Kochana! Zapisuję :)
OdpowiedzUsuńnowy wpis na blogu - zapraszam!
przydatny post
OdpowiedzUsuńBardzo przydatny post, myślę, że jak będę miała troszkę więcej czasu to skorzystam z kodów ;)
OdpowiedzUsuńObserwuję ♥
Mój blog - HELLO-WONDERFUL
Pozdrawiam cieplutko:*
Super przydatny post! ;)
OdpowiedzUsuńDzięki bardzo, dla mnie to czarna magia, więc w chwili, kiedy będę chciała zmienić coś na swoim blogu i zadziałać coś na własną rękę to na pewno skorzystam :)
OdpowiedzUsuńBardzo przydatny post, gdy przekonam się do zmiany wyglądu bloga to na pewno skorzystam!
OdpowiedzUsuńZgadzam się z wieloma osobami, że tematyka posta bardzo przydatna ;)
OdpowiedzUsuńPozdrawiam i obserwuje ;)
www.moda-eny.blogspot.com
tego wlasnie szukalam, a niezbyt znam sie na informatyce- mam nadzieje, ze dzieki twojemu poradnikowi uda mi sie zdzialas jakies cuda na mojej stronce, wielkie dzieki <3
OdpowiedzUsuńco powiesz na wspolna obserwacje? ja juz i to z ogromna checia!
nowy post!
http://justemsi.blogspot.com/2017/01/back-to-memories.html
Na pewno kiedyś skorzystam
OdpowiedzUsuńSuper post bardzo przydatny :)
Mój blog
W końcu ktoś to jasno i porządnie wyjaśnił! <3 Post niezwykle przydatny, rady przejrzyste. Szkoda, że kiedy tworzyłam swojego bloga, to takich porad w blogosferze było mało i musiałam się sporo namęczyć, aż w końcu znalazłam kogoś, kto wykonał mój szablon. :) Dla mnie te "kody" to czarna magia po prostu. Gratuluję Ci talentu! <3
OdpowiedzUsuńswiat-zwariowaneej.blogspot.com
Ojej, dziękuję Ci bardzo za te miłe słowa ♥
UsuńBardzo przydatne - super :)
OdpowiedzUsuńSuper! Lubię takie posty, przydają się gdy nachodzi mnie ochota na zmianę wyglądu :)
OdpowiedzUsuńPozdrawiam!
Aleksandra z bloga: wdrodzepomarzeniaa.blogspot.com (kliik)
Wszystkie te kody znam, ale dla innych mogą się naprawdę przydać. Świetna robota! :D
OdpowiedzUsuńPozdrawiam, www.piankaofstyle.pl
Bardzo przydatny post, dla ludzi takich jak ja. Zero jakichkolwiek umiejętności i znajomości kodu CSS :) Gdybym nie miała fajnego szablonu to z pewnością bym skorzystała.
OdpowiedzUsuńPozdrawiam,
Aleksandra (Strefa bez Stresu)
Akurat dzisiaj szukałam kilku kodów! Mega przydatne:)
OdpowiedzUsuńpewnie, że damy, tylko o tym myślę, że przecież mam dla kogo żyć i walczyć o swoje szczęście. dziecko, to największa motywacja :)
OdpowiedzUsuńPo obronie mam zamiar znowu pozmieniać coś w swoim szablonie i takie posty na pewno mi się przydadzą! :) Najbardziej interesują mnie zmiany dotyczące stopki posta i górnego paska (tam gdzie masz lupkę).
OdpowiedzUsuńDobry poradnik. Przejrzyście i prosto napisany :)
Cieszę się i dziękuję! ♥ Postaram się dodać w najbliższym czasie coś i na ten temat :)
Usuńprzydatny post! chociaż ja nie jestem najlepsza w takich rzeczach :<
OdpowiedzUsuńPotrzebowałam czegoś takiego !♥ Od razu wzięłam do ulubionych żeby go nie zgubić hah ♥
OdpowiedzUsuńMega pomocny!
MELA BLOG ¦
Oj ile ja się nad swoim napracowałam ;D Bardzo dobrze napisany post. Pozdrawiam :)
OdpowiedzUsuńMój blog ♥ Serdecznie zapraszam !
Hey!
OdpowiedzUsuńI saw your blog and I liked, I am following u now and I hope u can visit my blog and follow me back, great post.
Kisses ^^
Świetny post, na pewno się przyda, tym bardziej, że w tych kodach CSS jestem naprawdę zielona :) Mam nadzieję, że w przyszłości będziesz planowała więcej takich postów :) Pozdrawiam!
OdpowiedzUsuńhttp://crafty-zone.blogspot.com/
Bardzo przydatny post w wolnym czasie coś popróbuję
OdpowiedzUsuńobserwuje
http://mademoiselleshirley.blogspot.com/
ja po prostu mam to flow! hahahaha, nie no, żarcik kosmonaucik, prawda jest taka, że nie umiem pisać, a to, że ludzie w ogóle czytają moje wypociny to jakiś cud. :)
OdpowiedzUsuńteraz zaczynam 6-ty miesiąc już :)
Dla mnie to jest czarna magia. Podziwiam osoby, które robią całe szablony.
OdpowiedzUsuńJa jestem zielona w tym temacie, ale post bardzo przydatny :-)
OdpowiedzUsuńUwielbiam się bawić kodami CSS :D
OdpowiedzUsuńBardzo przydatny post dla początkujących w tym temacie. Wspaniały blog, z pewnością zostanę tu dłużej! ♥
Mój blog
Świetny post :) Może pomóc wielu osobom, którzy mają pragnienie artystycznego wyżycia się na blogu i chcą pokombinować z szablonem :)
OdpowiedzUsuńSpadłaś mi z nieba!
OdpowiedzUsuńSuper post! :)
Pozdrawiam! :)
Mój blog-klik!
Powiem Ci, że musiałabym nad tym przysiąść na dłużej to pewnie coś by mi wyszło. :D Po studiach będę tworzyć na pewno! ^^
OdpowiedzUsuńPrzydatne są takie posty, myślę, że skorzystam, gdy będę chciała odświeżyć bloga :)
OdpowiedzUsuńEGZEMPLARZ, MÓJ BLOG
Żebym ja tu trafiła jak się uczyłam jak zrobić szablon i co to w ogóle CSS :)
OdpowiedzUsuńNa pewno się przyda! Super poradnik ;-)
OdpowiedzUsuńSHE IMAGINATION
Na pewno komuś przydadzą się te kody! Pamiętam jak tworzyłam swój szablon na blogu i szukałam ciekawych pomysłów i porad w internecie. Super post!
OdpowiedzUsuń➥ przewrotowiec.blogspot.com
a mnie boli że ludzie nie znają prostej funkcji jak "zbadaj element", html i css to naprawdę proste języki :(
OdpowiedzUsuńskydancing.pl
Hi cute!
OdpowiedzUsuńThanks for this helpful post.
Kisses ^`
Bardzo przydatny wpis,dzięki wielkie ;-)
OdpowiedzUsuńwww.waszfotograf.com.pl