Jak zrobić wysuwany element na blogu

18.10.2015


Były już pytania o wysuwane ikonki społecznościowe, a ostatnio pojawiło się sporo pytań o wysuwany element na blogu, a dokładnie chodzi o rozwijany opis "więcej o autorce", który znajduje się w kolumnie bocznej mojego bloga. Nie będę ukrywać, że jest to bardzo przydatna opcja, dzięki niej możemy ukryć np. banery, aby nie śmieciły nam kolumny bocznej. Tak, możemy to użyć nawet do banerów, linków, zrobić podstrony, nie jest to opcja tylko dla tekstu. Do zrobienia tego wysuwanego elementu, będziemy potrzebować gadżetu HTML/JavaScript i CSS. Jak widać nie będziemy nic mieszać w kodzie.

1. Układ - dodaj gadżet - HTML/JavaScript



2. Wklejamy kod:

<section class="j-jbox" style="font-weight: normal; margin-top: 2px;"><div><input id="j-1" name="accordion-1" type="checkbox" /><label for="j-1">TYTUŁ</label><article class="j-1">MIEJSCE NA TEKST<br /><a href="LINK"><span style="font-weight: bold;">NAZWA LINKU</span></a><br /></article></div><br /></section>

Podany wyżej kod, jest na podstawie kodu, który znajduje się u mnie. Jeśli nie chcemy mieć linku wystarczy usunąć
 <a href="LINK"><span style="font-weight: bold;">NAZWA LINKU</span></a>

3.  Kiedy nasz kod jest już uzupełniony, klikamy zapisz i przechodzimy do szablon - dostosuj.


4. Znajdziemy się w projektancie szablonów. Przechodzimy do zaawansowane  - dodaj arkusz CSS.


5. Obecnie nasz wysuwany element prezentuje się tak:


Żeby nasz element prezentował się jak należy musimy wesprzeć się kodem CSS, który pozwoli nam dopasować odpowiednio wygląd oraz zadba o to, aby nasz element się wysuwał. Nasz kod będzie wyglądał tak:

.j-jbox label{font-family:Verdana; border: solid 2px #000; padding: 15px; position: relative; z-index: 0; display: block; cursor: pointer; color: #ff8d8e; font-size: 13px; letter-spacing: 2px; text-align: center;}
.j-jbox input:checked + label {color: #ff8d8e; background: #ccc; border: solid 2px #ccc;}
.j-jbox input{display: none;}
.j-jbox article{text-align: justify; margin: 10px; margin-top: -1px; margin-bottom: 0px; overflow: hidden; height: 0px; position: relative; z-index:0; transition: height 0.5s ease-in-out;  -moz-transition: height 0.5s ease-in-out;  -webkit-transition: height 0.5s ease-in-out;  -o-transition: height 0.5s ease-in-out;}
.j-jbox input:checked ~ article{margin-top: 10px; margin-bottom: 10px; transition: height 0.5s ease-in-out;  -moz-transition: height 0.5s ease-in-out;  -webkit-transition: height 0.5s ease-in-out; -o-transition: height 0.5s ease-in-out;}
.j-jbox article {color: #fff; font-size: 11px; padding: 10px;}
.j-jbox input:checked ~ article.j-5{height: 85px;}

Wszystkie pogrubione wartości są zmienne. Poniżej analiza kodu

.j-jbox label{font-family:Verdana; border: solid 2px #000; background: #fff; padding: 15px; position: relative; z-index: 0; display: block; cursor: pointer; color: #ff8d8e; font-size: 13px; letter-spacing: 2px; text-align: center;}

Ta część kodu odpowiada za wygląd części stałej naszego rozwijanego elementu czyli naszego przycisku z tekstem. Jak widzimy możemy zmienić czcionkę, rodzaj, grubość oraz kolor ramki, kolor tła, marginesy wewnętrzne, kolor tekstu, wielkość tekstu, odstęp między literami i wyrównanie tekstu

.j-jbox input:checked + label {color: #ff8d8ebackground: #cccborder: solid 2px #ccc;}

Ta część odpowiada za wygląd części stałej (przycisk z tekstem) po kliknięciu w niego. Możemy zmienić kolor tekstu, kolor tła oraz rodzaj, grubość i kolor ramki

.j-jbox article{text-align: justify; margin: 10px; margin-top: -1px; margin-bottom: 0px; overflow: hidden; height: 0px; position: relative; z-index:0; transition: height 0.5s ease-in-out;  -moz-transition: height 0.5s ease-in-out;  -webkit-transition: height 0.5s ease-in-out;  -o-transition: height 0.5s ease-in-out;}

Ta część kodu odpowiada za tekst oraz rozwinięcie w części rozwijanej. Jak widzimy możemy zmienić tu tylko wyrównanie tekstu

.j-jbox article {color: #fff; font-size: 11px; padding: 10px;}

Ta część kodu odpowiada za tekst w części rozwijanej. Możemy zmienić kolor, czcionkę, oraz marginesy

.j-jbox input:checked ~ article.j-5{height: 85px;}

Ta część kodu odpowiada za długość wysuwanego elementu

Efekt końcowy: 


Czytaj dalej »

6 mało znanych wskazówek przy tworzeniu strony/bloga

05.10.2015


Kiedy zaczynałam swoją przygodę z blogowaniem, to nic o tym blogowym świecie nie wiedziałam. Do wszystkiego dochodziłam sama, nie miałam żadnej osoby, która mogłaby mi podpowiedzieć co mam robić. W związku z tym, że zostałam sama z tym wszystkim na głowie, popełniłam wiele błędów. Z perspektywy czasu uważam, że jest to wiele głupich błędów, które nigdy nie powinny się pojawić, a zaważyły bardzo w dalszych losach mojego blogowania. Zauważyłam, że mało mówi się o takich rzeczach, a według mnie, takie wskazówki są bardzo pomocne szczególnie jeśli chcemy wkroczyć w ten blogowy świat bez stresu i melisy u boku.


  1. Nazwa bloga. Postaraj się o to, aby Twoja nazwa bloga była prosta do zapamiętania. Nie tylko pod względem tego jak brzmi, ale również pod względem pisowni. Im trudniejsza nazwa w pisowni, tym ciężko jest znaleźć bloga w sieci. Im trudniejsza nazwa w zapamiętaniu - możemy mieć pewność, że te same osoby nie będą do nas wracać. Dlatego, postarajmy się wymyślić taką nazwę, która nie będzie zawierała powtórzeń oraz nie będzie za długa. 
  2. Pamiętaj o zdjęciach. Pamiętaj o tym, że zdjęcia to część wpisu. Nie oszukujmy się, one odgrywają największą rolę, bo to dzięki nim zachęcamy czytelników do zapoznania się z wpisem. Dopasowanie zdjęć do szpalty możemy uzyskać za pomocą prostego kodu CSS, dzięki temu oszczędzamy czas, bo możemy wstawić zdjęcia w oryginalnym rozmiarze, a one po opublikowaniu ładnie nam się dopasują. Oprócz tego, zdjęcia nie tracą na swej jakości jak są wstawiane w oryginalnym rozmiarze. Ważne jest jednak to, aby zdjęcia nie miały po 5000 px, ponieważ wtedy nasz blog na tym bardzo ucierpi - będzie dłuższy czas ładowania strony. 
  3. Wybór platformy blogowej. To jest najważniejszy krok jaki trzeba podjąć. Trzeba rozważyć wszystkie za i przeciw danej platformy blogowej. Osobiście, żałuje, że nie zaczęłam na WordPressie. Teraz, kiedy jestem na Bloggerze, blogowanie na WP wiązałoby się z kosztami, które nie są takie małe. 
  4. Zastanów się dobrze nad tematyką bloga. Pomyśl, o czym tak naprawdę chcesz pisać, co Ci sprawia przyjemność. Tematyka urodowa? Świetnie, skup się na tym, tylko wtedy nie ładuj na bloga tematów DIY, CIY, muzyka i jeszcze 10 innych, które wprowadzą zamieszanie. Jeśli nie potrafisz zdecydować się na jeden konkretny temat, wybierz sobie te tematy, które są Tobie bliskie. Wtedy blog zyska miano lifestylowego, ale zrób to tak, aby w jakiś sposób były ze sobą powiązane, a przynajmniej większość z nich. Przykład? Proszę bardzo, postawiłam sobie za cel, że mój blog będzie spełniał rolę miejsca kreatywnego. Takim oto sposobem pojawiły się tu tematy blogowe, graficzne, porady moim okiem, DIY i wszystko co z kreatywnością ma wspólnego, bo wiecie kreatywność można rozumieć na wiele sposobów, np. kreatywny styl życia. Dodatkowo, jako taka odskocznia od tej "codzienności", postanowiłam pisać o jeździectwie (nie ukrywam, że jakbym miałam czas to bym przerzuciła to na drugiego bloga). Jednak, nie ładuje już w bloga tematów związanych z kosmetykami, modą czy literaturą. Wszystkie tematy, które pojawiają się na blogu, są mi bliskie. Mam nadzieje, że rozumiecie o co mi chodzi. Ja ten błąd popełniłam na początku, pisałam dosłownie o wszystkim - czytelników nie przybywało, wręcz przeciwnie gubili się w tym wszystkim tak samo jak ja.
  5. Drugi blog do testowania. Ten błąd też popełniłam na samym początku - nie utworzyłam drugiego bloga do testowania kodów i różnych innych elementów, wszystko robiłam na tym głównym. Do dziś ten okropny zamęt śni mi się po nocach. W chwili obecnej nie potrafię sobie wyobrazić jak ja mogłam tak pracować i pokazywać każde moje najmniejsze posunięcie w szablonie wszystkim, którzy w danym momencie zajrzeli na bloga. 
  6. System komentarzy. Długo, bardzo długo byłam zaślepiona korzystając z systemu komentarzy Blogger. Jakie to było uciążliwe, nieintuicyjne i ograniczało kontakt z osobą komentującą. Po zainstalowaniu Disqusa poczułam się jak nowo narodzona i bez dwóch zdań dołączam do osób, które uważają, że blog bez Disqusa to ciężki przypadek. Naprawdę warto poświęcić tą chwilę czasu na zainstalowanie Disqusa u siebie na stronie, szczególnie, że daje nam on wiele korzyści. O wygląd i intuicyjność komentarzy również trzeba zadbać. 
Dodalibyście coś od siebie do tej listy? 
Czytaj dalej »

MałgoLINKI - podsumowanie września

03.10.2015


Pożegnaliśmy wrzesień, przywitaliśmy październik, a co za tym idzie? Kolejny wpis dotyczący podsumowania miesiąca oraz porcja ciekawych linków. Jak sprawy mają się u mnie? Zaczęłam studiować grafikę, od tygodnia jestem już na uczelni i mam mnóstwo pracy. Grafika to piękny kierunek, ale dość ciężki. Wydawać by się mogło, że malarstwo, rysunek lub projektowanie nie jest wcale takie ciężki (sama tak myślałam), ale szybko zostałam wyprowadzona z błędu. Jest ciężko, jest dużo pracy i trzeba być gotowym na wszystko. Mimo wszystko, jestem szczęśliwa. Teraz na 100% wiem, że to jest to, czego było mi trzeba. To tyle z tego co u mnie, a teraz przejdźmy do naszego podsumowania. Postanowiłam zmienić trochę formę podsumowania, nie będzie wydzielonych kategorii tylko wszystko będzie przedstawione razem oraz będzie więcej linków. Uważam, że taka forma będzie najwygodniejsza.


  1. Wpis o tym, że krótkie włosy da się lubić i wcale nie oznacza to utraty swej kobiecości. 
  2. Blog, którego nie da się nie lubić, bez wątpienie ma w sobie "to coś".
  3. Kontrowersyjne obrazy, które mają ukryte znaczenie. Niektóre z nich naprawdę przerażają. 
  4. Bank zdjęć z licencją CC0
  5. Grafiki przedstawiające księżniczki z bajek Disneya w "realistycznych" włosach.  
  6. Dzięki tej stronie mamy możliwość zrelaksowania się lub zwiększenia swojej kreatywności/produktywności za pomocą odgłosów natury i nie tylko. 
  7. Bardzo przydatna aplikacja na smartphony z systemem android do nauki angielskiego.
  8. DIY - przepiśnik do druku za darmo. 
  9. Profil na instagramie, który skradł moje serce. 
Ostatnio na blogu: 
Statystyka bloga:



Czytaj dalej »

Copyright © Szablon wykonany przez Blonparia