Zrób ze mną pasek boczny! - kilka kodów CSS

Dodane przez - 25 stycznia


Na pewno każdy z nas ma za sobą wiele prób stworzenia idealnego szablonu. W końcu stanowi on wizytówkę naszego bloga więc chcemy by prezentował się jak najlepiej. Będąc na poprzednim blogu wiele razy w moją stronę padały pytania dotyczące kodowania oraz prośby o wykonanie szablonu bloga. Z reguły starałam się pomóc każdej duszyczce, ale czasem było to fizycznie nie możliwe. Więc tym razem zamierzam stworzyć serię postów dotyczących niektórych elementów na blogu jak i całości z których każdy będzie mógł bezproblemowo skorzystać. 



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?


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'

#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 :)

Do zobaczenia już wkrótce! 

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

87 komentarze

  1. Ooo bardzo przydatne info, może kiedyś skorzystam 😊

    OdpowiedzUsuń
  2. 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ń
    Odpowiedzi
    1. Cieszę się, że mogę pomóc! I witam Cię cieplutko! Dziękuję za miłe słowa :)

      Usuń
  3. fajny i przydatny post
    http://swieciedziewczyn.blogspot.com/

    OdpowiedzUsuń
  4. 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

    Pozdrawiam ^-^

    Zapraszam na swojego Bloga Sakurakotoo

    OdpowiedzUsuń
    Odpowiedzi
    1. 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ń
  5. Ja w tych sprawach jestem tak nieporadna, że szok :P Dzięki za notkę. Bardzo przydatna.

    OdpowiedzUsuń
  6. Wpis bardzo przydatny, jeśli będę zmieniać coś w przyszłości, to na pewno skorzystam! :)

    OdpowiedzUsuń
  7. Myślę nad nowym wyglądem bloga, więc taki post na pewno bardzo mi pomoże :)
    Pozdrawiam!

    Zapraszam do obserwacji i komentowania :)

    lublins.blogspot.com

    OdpowiedzUsuń
  8. Wszystko fajnie, tylko ja jestem zielona na ten temat i chętnie to wszystko komuś zlece

    OdpowiedzUsuń
  9. bardzo przydatny post na pewno z niego skorzystam :)

    OdpowiedzUsuń
  10. 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ń
  11. chodziłam do technikum o profilu graficznym, ale tam niczego się nie nauczyłam, jestem samoukiem :P

    OdpowiedzUsuń
  12. 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ń
  13. Dodaję do zakładki ten post :) myślę, że może mi się przydać :)

    OdpowiedzUsuń
  14. myślę, że dla wielu osób może to być przydatne. Więcej takich postów!!
    ZAPRASZAM DO MNIE:

    BLOG
    INSTAGRAM

    OdpowiedzUsuń
  15. Nawet nie wiesz jak mi pomogłaś. Bardzo przydatny post dla bloggerów. Oby takich więcej

    OdpowiedzUsuń
  16. lubię posty z kodami CSS,zaraz spróbuje zmienić wygląd swojego archiwum ;)
    zapraszam do siebie -> KLIK :)

    OdpowiedzUsuń
  17. Gdyby ten wpis istniał za czasów mojego blogowania na blogspocie, to zaoszczędziłabym pół roku życia :D

    OdpowiedzUsuń
  18. bardzo fajnie przejrzyście wyjaśnione;)

    OdpowiedzUsuń
  19. O jak dobrze, że tu trafiłam. Do tej pory nie mogłam znaleźć nic konkretnego. Bardzo przydatne :)
    Mój blog - Klik

    OdpowiedzUsuń
  20. O kurde, mega przydatny post! Jak będę miała czas - skorzystam :)

    kmmbffl.blogspot.com

    OdpowiedzUsuń
  21. Super! Genialny post, bardzo przyadatny zwłaszcza że planuję wprowadzić jakieś zmiany w szacie graficznej mojego bloga :D Taka seria byłaby świetna :) Obserwuję ♥
    Pozdrawiam, vthetoria.blogspot.com

    OdpowiedzUsuń
  22. przydatne informacje :) dodaję Twój blog do obserwowanych- bardzo dokładnie wszystko wyjaśniasz i myślę, że nie raz mi się przydasz :D
    pozdrawiam :*

    OdpowiedzUsuń
  23. Bardzo przydatny post! :)
    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)♥

    OdpowiedzUsuń
  24. bardzo fajny blog:) będę zaglądać tu częściej ponieważ sama też zaczynam przygodę z blogiem i nie wszystko jest mi jeszcze wiadome:)
    zapraszam do siebie:
    https://comamima.blogspot.com

    OdpowiedzUsuń
  25. Już widzę, że zapowiada się ciekawy blog. Obserwuję, i dziękuję za ciepłe słowa pozostawione u mnie :)

    OdpowiedzUsuń
  26. Powiem Ci szczerze że bardzo przydatny post ;p

    OdpowiedzUsuń
  27. Bardzo dziękuję przyda mi się ten post! :)

    OdpowiedzUsuń
  28. 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

    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! :)

    OdpowiedzUsuń
  29. Świetny post , baardzo przydatny :3 oby takich więcej :3

    OdpowiedzUsuń
  30. Kody kody kody ...
    ś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

    OdpowiedzUsuń
    Odpowiedzi
    1. Najważniejsze są efekty, a u Ciebie akurat są znakomite! ♥

      Usuń
  31. Ja w tych wszystkich kodach, wyglądach jestem całkowicie zielona :/
    http://my-natalias-place.blogspot.com/

    OdpowiedzUsuń
  32. Dzięki! Na pewno się przyda! Kompletnie nie znam się na wyglądzie bloga! Obserwuje

    OdpowiedzUsuń
  33. Bardzo przydatne kody, nawet dla mnie :)

    OdpowiedzUsuń
  34. 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ń
  35. 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ń
  36. Rewelacja dziękuje za te kody!!! :) SKORZYSTAM!

    OdpowiedzUsuń
  37. 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ń
  38. Kiedyś, na samaym początku tez bawiłem się tymi kodami ale zrezygnowałem :).

    OdpowiedzUsuń
  39. 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ł.

    Pozdrawiam serdecznie,
    tysiac-zyc-czytelnika.blogspot.com

    OdpowiedzUsuń
  40. Bardzo przydatny poradnik, chyba skorzystam niedługo :)

    http://abonentpozazasiegiem.blogspot.com/

    OdpowiedzUsuń
  41. Bardzo przydatny post, myślę, że jak będę miała troszkę więcej czasu to skorzystam z kodów ;)

    Obserwuję ♥

    Mój blog - HELLO-WONDERFUL
    Pozdrawiam cieplutko:*


    OdpowiedzUsuń
  42. 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ń
  43. Bardzo przydatny post, gdy przekonam się do zmiany wyglądu bloga to na pewno skorzystam!

    OdpowiedzUsuń
  44. Zgadzam się z wieloma osobami, że tematyka posta bardzo przydatna ;)
    Pozdrawiam i obserwuje ;)

    www.moda-eny.blogspot.com

    OdpowiedzUsuń
  45. 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

    co powiesz na wspolna obserwacje? ja juz i to z ogromna checia!
    nowy post!
    http://justemsi.blogspot.com/2017/01/back-to-memories.html

    OdpowiedzUsuń
  46. Na pewno kiedyś skorzystam
    Super post bardzo przydatny :)
    Mój blog

    OdpowiedzUsuń
  47. 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
    swiat-zwariowaneej.blogspot.com

    OdpowiedzUsuń
  48. Super! Lubię takie posty, przydają się gdy nachodzi mnie ochota na zmianę wyglądu :)

    Pozdrawiam!
    Aleksandra z bloga: wdrodzepomarzeniaa.blogspot.com (kliik)

    OdpowiedzUsuń
  49. Wszystkie te kody znam, ale dla innych mogą się naprawdę przydać. Świetna robota! :D

    Pozdrawiam, www.piankaofstyle.pl

    OdpowiedzUsuń
  50. 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.
    Pozdrawiam,
    Aleksandra (Strefa bez Stresu)

    OdpowiedzUsuń
  51. Akurat dzisiaj szukałam kilku kodów! Mega przydatne:)

    OdpowiedzUsuń
  52. 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ń
  53. 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ę).
    Dobry poradnik. Przejrzyście i prosto napisany :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się i dziękuję! ♥ Postaram się dodać w najbliższym czasie coś i na ten temat :)

      Usuń
  54. przydatny post! chociaż ja nie jestem najlepsza w takich rzeczach :<

    OdpowiedzUsuń
  55. Potrzebowałam czegoś takiego !♥ Od razu wzięłam do ulubionych żeby go nie zgubić hah ♥
    Mega pomocny!
    MELA BLOG ¦

    OdpowiedzUsuń
  56. Oj ile ja się nad swoim napracowałam ;D Bardzo dobrze napisany post. Pozdrawiam :)
    Mój blog ♥ Serdecznie zapraszam !

    OdpowiedzUsuń
  57. Hey!
    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 ^^

    OdpowiedzUsuń
  58. Ś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!

    http://crafty-zone.blogspot.com/

    OdpowiedzUsuń
  59. Bardzo przydatny post w wolnym czasie coś popróbuję
    obserwuje
    http://mademoiselleshirley.blogspot.com/

    OdpowiedzUsuń
  60. 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. :)
    teraz zaczynam 6-ty miesiąc już :)

    OdpowiedzUsuń
  61. Dla mnie to jest czarna magia. Podziwiam osoby, które robią całe szablony.

    OdpowiedzUsuń
  62. Ja jestem zielona w tym temacie, ale post bardzo przydatny :-)

    OdpowiedzUsuń
  63. Uwielbiam się bawić kodami CSS :D
    Bardzo przydatny post dla początkujących w tym temacie. Wspaniały blog, z pewnością zostanę tu dłużej! ♥

    Mój blog

    OdpowiedzUsuń
  64. Świetny post :) Może pomóc wielu osobom, którzy mają pragnienie artystycznego wyżycia się na blogu i chcą pokombinować z szablonem :)

    OdpowiedzUsuń
  65. Spadłaś mi z nieba!
    Super post! :)
    Pozdrawiam! :)
    Mój blog-klik!

    OdpowiedzUsuń
  66. 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ń
  67. Przydatne są takie posty, myślę, że skorzystam, gdy będę chciała odświeżyć bloga :)

    EGZEMPLARZ, MÓJ BLOG

    OdpowiedzUsuń
  68. Żebym ja tu trafiła jak się uczyłam jak zrobić szablon i co to w ogóle CSS :)

    OdpowiedzUsuń
  69. 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!
    przewrotowiec.blogspot.com

    OdpowiedzUsuń
  70. a mnie boli że ludzie nie znają prostej funkcji jak "zbadaj element", html i css to naprawdę proste języki :(


    skydancing.pl

    OdpowiedzUsuń
  71. Hi cute!
    Thanks for this helpful post.
    Kisses ^`

    OdpowiedzUsuń
  72. Bardzo przydatny wpis,dzięki wielkie ;-)
    www.waszfotograf.com.pl

    OdpowiedzUsuń