Bloggerowe DIY #3 : Jak zrobić rozwijane archiwum? | Wishlista


Wybaczcie za brak wpisów od dłuższego czasu. Jednak potrzebowałam odpoczynku, odświeżenia umysłu, by znów przypomnieć sobie dlaczego bloguję, czemu to jest moją pasją. Brak systematyczności to jedna z moich najtrudniejszych do pokonania wad, jednak co pewien czas każdy z nas potrzebuje restartu; nowego początku z maksymalnie naładowanymi bateriami. I teraz właśnie czuję, że mam przed sobą kolejną pustą kartkę, którą mogę zapisać w dowolny sposób, bez ograniczeń, pisać co chcę i kiedy chcę. Bo pasja nie powinna być obowiązkiem, a sposobem spędzania czasu, który daje najlepsze owoce :).

W dzisiejszym wpisie zobaczycie zarówno wishlistę ze sklepu banggood oraz instrukcję, jak samodzielnie wstawić ciekawy gadżet na bloga :).
Jako że lista życzeń jest krótsza to pojawi się ona pierwsza - jeśli nie jest to typ posta, który Was interesuje to przewińcie dalej :P. A jeśli macie chwilę, to proszę o choć jeden klik w link ♥.

Bloggerowe DIY to seria, w której dzielę się z Wami moją wiedzą techniczną, by pomóc Wam dodać gadżety na bloga. Do tej pory pojawiło się:
w diy #1 - kilka arkuszy CSS (wyśrodkowanie tytułu, paska bocznego, zamglone lub czarno-białe zdjęcie po najechaniu kursorem, rozjechane litery linku itp.)
w diy #2 - dodawanie favikony, filmiku, jak poradzić sobie ze znikającymi obserwatorami oraz podlinkowanie adresu bloga w komentarzu.

KROK PIERWSZY - przygotowywanie widocznej grafiki

Tym razem chcę Wam pokazać jak zrobić rozwijane archiwum, które można zobaczyć na coraz większej liczbie blogów. Według mnie prezentuje się ono świetnie, u mnie możecie zobaczyć je w wersji bardzo minimalistycznej, choć design zależy od Waszego gustu  i wyobraźni.

Chodzi tu o lata blogowania, które są widoczne i bez najeżdżania na nie kursorem. Należy przygotować te obrazki w programie, który jest Wam najlepiej znany - np. w gimpie, choć bezproblemowo może być nim też paint, jeśli zależy Ci na minimalizmie :). Pamiętaj, że grafika nie może być zbyt duża, dlatego zwracaj uwagę na ilość pikseli. Dla przykładu moje lata blogowania mają wymiar 55x27 px i zapisane są w formacie .png .

 Gdy grafiki są już gotowe należy wstawić je do układu strony -> wybrać gadżet -> dodać obraz.
W miejsce tytułu wpisujemy: </>. Następnie wybieramy obraz i klikamy 'zapisz'. Czynność powtarzamy tyle razy, ile mamy przygotowanych grafik. A później układamy je w odpowiedniej kolejności na pasku bocznym. 

W międzyczasie warto sprawdzić podgląd i zobaczyć, czy wymiary grafiki nas zadowalają. Jeśli nie, to tworzymy nowe obrazki i postępujemy z nimi tak samo :).

KROK DRUGI - zmniejszanie odstępów

Gdy jeden rok od drugiego są w niemałych odstępach trzeba przyznać, że ten typ archiwum wygląda nieciekawie. Na szczęście jest sposób i na to! Wykorzystałam do tego arkusz CSS zmniejszający odstępy między wszystkimi gadżetami na pasku bocznym. 
Wchodzimy w szablon i klikamy dostosuj.
Klikamy zaawansowane -> dodaj arkusz CSS 
 I wstawiamy poniższy kod:
 .sidebar .widget {
border:1px solid red;
margin-bottom: -21px;
margin-left:10px;
width:260px;
} 
Teraz istotne będą znaki, które zaznaczyłam pogrubioną czcionką. I BEZ OBAW te czerwone ramki zaraz znikną, są tylko na chwilę, by ułatwić pracę ;-).
! W zależności od tego, jaką chcemy osiągnąć odległość gadżetów, zmieniamy liczbę pikseli w powyższym kodzie. 
! Przy 'margin bottom' oraz 'margin left' można wstawić lub usunąć znak '-' , w zależności od tego, na jakim efekcie nam zależy.
Gdy już znajdziemy odpowiednią odległość gadżetów słowo 'red' zamieniamy na 'transparent' i czerwone ramki znikają :).
 
Teraz wystarczy kliknąć napis w prawym górnym rogu 'zastosuj do bloga'.

KROK TRZECI - tworzenie podlinkowanych miesięcy

 Teraz nadszedł czas na tworzenie linków, które będą widoczne po najechaniu na konkretny rok kursorem.
W tym celu ponownie wchodzimy z bloggerowego panelu w układ -> klikamy dodaj gadżet -> wybieramy 'tekst'. Następnie wpisujemy nazwy miesięcy - najlepiej każdy w oddzielnej linii.
Gdy już to zrobimy zaznaczamy nazwę miesiąca i klikamy ikonę sowy.
W linię, która się pojawiła wpisujemy następującą frazę:

 http://adres bloga/rok_miesiąc_01_archive.html
Np. http://stylowana100latka.blogspot.com/2015_08_01_archive.html
Powtarzamy to do czasu, aż każdy miesiąc będzie podlinkowany. Następnie klikamy edytuj kod HTML i kopiujemy wszystko co znajduje się w tym oknie.

Ponownie wchodzimy w układ -> wybieramy obraz z rokiem -> w miejscu na podpis wklejamy skopiowaną frazę -> klikamy zapisz.

! Możesz frazy przygotowane za pierwszym razem skopiować do następnych lat blogowania, wystarczy tylko zmienić rok. Jednak jeśli boisz się, że się pomylisz to twórz podlinkowane miesiące w gadżecie 'tekst' po kolei, oddzielnie do każdego roku :).

KROK CZWARTY - ustawienie długości paska po rozwinięciu 



Jak przy kroku drugim wchodzimy w szablon -> dostosuj -> wybieramy zaawansowane -> dodaj arkusz CSS . 

Wklejamy poniższą frazę tyle razy, ile mamy grafik z latami blogowania:
#Image7 .widget-content {
height: 25px; /*schowanie gadżetu*/
overflow: hidden;
transition: height .7s ease; /*animacja*/
-webkit-transition: height .7s ease;
-moz-transition: height .7s ease;
-o-transition: height .7s ease;
-ms-transition: height .7s ease;
}

#Image7:hover .widget-content {
height: 180px; /*wysokość docelowa gadżetu*/
}


To co jest pogrubione należy zmienić. W miejsce 'image7' wstawiamy swój indywidualny numer, który znajdziemy wchodząc w układ -> klikając obrazek z rokiem -> i kopiując znaki, które są po ostatnim równa się.


! Pierwsza wysokość przy napisie 'schowanie gadżetu' to wysokość roku widocznego bez rozwijania paska.
! Ilość pikseli przy napisie 'wysokość docelowa gadżetu' to długość paska z miesiącami, który pojawi się po najechaniu na rok. 

Piksele zmieniajcie dowolnie, w zależności od potrzeby. Jedynym utrudnieniem jest to, że ciągle trzeba klikać zastosuj do bloga i otwierać własną stronę w drugiej karcie, bo inaczej nie zobaczymy, jak prezentuje się wybrana przez nas długość :).

! Powyższy kod na różowym tle wklejamy w miejsce arkuszy CSS tyle razy, ile mamy grafik z rokiem. Przy tym trzeba pamiętać, by w miejsce 'image7' wprowadzać indywidualną nazwę obrazka z rokiem blogowania.

Kliknij zapisz i ciesz się nowym wyglądem blogowego archiwum :).

Zamierzacie wykonać takie archiwum? Podobają Wam się produkty z wishlisty?

Buziaakii ;**

Komentarze

  1. Wszystko jak najbardziej w moim guście! <3 a kurteczka z materiału, który wygląda jak dżinsowy jest cudna <3 Poklikane! :) możesz też u mnie? :* http://kreconowlosaa.blogspot.com/2016/01/dresslink-whishlist.html

    OdpowiedzUsuń
    Odpowiedzi
    1. :D
      Dziękuję, również poklikałam u Ciebie ;)

      Usuń
  2. Podoba mi się ta jeansowa kurteczka po prawej. Poklikane :)

    OdpowiedzUsuń
  3. Z DIY chyba sama skorzystam! Wszystko świetnie wyjaśniłaś! :)) Co do przerwy, sama niedawno taką miałam, ale wracam z werwą i głową pełną pomysłów ^.^ Życzę Ci jeszcze więcej wspaniałych pomysłów! ;* Jeśli chodzi o wsihliste to wszystko przypadło mi do gustu ^^ Oczywiście poklikałam <3 (wszystko w zł) 49.76 54.28 53.86 66.30 41.42 113.57 118.30 75.67 47.23

    Pozdrawiam ♥
    http://princessdooomiii.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Powtarzam się, ale każdy Twój komentarz sprawia mi ogromną radość :D. Fajnie, że tak ciągle tu zaglądasz :3.
      Alle się zsynchronizowałyśmy :P. Pięknie dziękuję za życzenia oraz kliki ♥
      Buźka :*

      Usuń
  4. Kochana linki poklikane, mogłabyś poklikać też u mnie w najnowszym poście ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję, już się zrewanżowałam :*

      Usuń
  5. Świetne rzeczy i poklikane! :*

    Zapraszam http://ispossiblee.blogspot.com Odpowiadam na każdą obserwacje :)

    OdpowiedzUsuń
  6. Pomocny post, może wykorzystam go niedługo, co do ubrań nie są w moim guście, ale są ciekawe i oryginalne.
    pozdrawiam :*
    http://photo-claudine.blogspot.com/

    OdpowiedzUsuń
  7. poklikane ;) Mi się podoba njbardziiej kurtka jeansowa ;*
    http://twinstyl.blogspot.com/2016/01/obserwacja-za-obserwacje-czemu-nie.html

    OdpowiedzUsuń
  8. Fajne, może kiedyś wypróbuje :D ale póki co meczę się z nauką, więc jak będę miała czas, może jeszcze zerknę :D
    Susette
    0zuzol0.blogspot.com

    OdpowiedzUsuń
  9. Poklikałam poklikasz u mnie ?
    US$
    12.00 ,US$
    13.09
    Kochana świetnie napisany post , bardzo miło mi się czytało. Zdjęcia świetnee
    Co powiesz na wspólną obserwację. ?? Zapraszam serdecznie do mnie nowy post
    staram się o współpracę z pewną firmą z branży modowej, byłabym niezmiernie wdzięczna jeśli poklikałabyś w linki do ubrań w moim najnowszym poście i skomentowała pod nim jeśli to zrobiłaś. Umożliwi mi to współpracę z nimi. Z góry pięknie dziękuję :*
    http://nicole-500.blogspot.com

    OdpowiedzUsuń
  10. Super instrukcja, jak będę robić to wrócę tu i skorzystam ;) oczywiście poklikane.
    http://modoemi.blogspot.com/

    OdpowiedzUsuń
  11. Świetna wishlista i przydatny post! :D
    Pozdrawiam :*
    CrazyTusiaBlog

    OdpowiedzUsuń
  12. Mnie sie podobaja sukienki ;) pozdrawiam i zapraszam :)

    OdpowiedzUsuń
  13. Świetny post!
    Zapraszam do Naas ;)

    oliv.an.blogspot.com

    OdpowiedzUsuń
  14. Świetny post!
    Zapraszam do Naas ;)

    oliv.an.blogspot.com

    OdpowiedzUsuń
  15. Każdy potzrebuje czasem takiej przerwy :)
    co do diy to świetnie wszystko wyjasnilaś musialaś dużo czasu poświecić na tego posta :)
    http://naataliam.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. ♥ Cieszę się, że tak to widzisz :D
      Na każdy wpis schodzi mi sporo czasu, najważniejsze, że efekty się podobają :).

      Usuń
  16. Bardzo fajny post :)
    poklikalam <3
    http://dominikax.blogspot.com/

    OdpowiedzUsuń
  17. Fajny ten gadżet może w przyszłości wypróbuję :)
    klaudiawmoimswiecie.blogspot.com

    OdpowiedzUsuń
  18. świetny pomysł na tą instrukcje :) napewno wielu osobom sie przyda :))
    poklikałam w linki i odczekałam 60sekund :D powodzenia w współpracy z banggood!!!
    ;*
    zapraszam do mnie
    www.marijory.blogspot.com
    też możesz u mnie kliknąc jak możesz :DDD

    OdpowiedzUsuń
  19. ps mam taką kurtkę ta za 28.53 !! :D

    OdpowiedzUsuń
  20. Na pewno kod przydatny
    Pozdrawiam,Madda
    blog ->klik

    OdpowiedzUsuń
  21. Super poradnik na pewno się przyda, poklinanne :)
    Również obserwuję
    mypinkdreams3.blogspot.com

    OdpowiedzUsuń
  22. Z rzeczy praktycznych ;-) z przyjemnością dołączam jako 419 obserwator-dość charakterystyczna miniaturka zdjęcia.
    Z praktycznych-fajne porady,ale..wstyd się przyznać ale niezbyt to ogarniam,a żałuję bo ten drugi diy czyli jak w komentarzu dodawać adres bloga byłby bardzo przydatny ;-)

    OdpowiedzUsuń
  23. Poklikałam ;)
    Czarna sukienka jest po prostu cudowna *.*

    nixixa09.blogspot.com

    OdpowiedzUsuń
  24. Dobre rady!
    http://the-rose-style.blogspot.com/

    OdpowiedzUsuń
  25. Kliknełam :* jensowa kurtka bardzo mi sie podoba <3

    OdpowiedzUsuń
  26. Poklikane.
    A co do DIY to jest świetne. Z pewnoscią nie jednej osobie się przyda.:)

    OdpowiedzUsuń
  27. Super ciuszki! ;) Buziaki, obserwujemy❤

    www.linailia.blogspot.com

    OdpowiedzUsuń
  28. Super instrukcja,
    Na pewno skorzystam :)
    Oczywiście po klikane.
    http://side-of-life.blogspot.com/ - KLIK!

    OdpowiedzUsuń
  29. Poklikałam , zrobisz to samo u mnie i klikniesz pod zdjęciami w link z kurtką ? :) .
    http://bedifferent-ania.blogspot.com/2016/01/just-nothing.html

    OdpowiedzUsuń
  30. 3 sukienka i ta czarna spodniczka są przecudne. Poklikałam w linki. Całe DIA jest bardzo przydatne. Jutro chętnie sprobuje się z tym pobawić, choć do tego stworze oddzielny blog, bo boję się że wyjdzie z czymś nie tak.
    Nie martw się brakiem weny bo ostatnio też ją przeżywałam... nie powiem... masakra ! Ale coż... :/
    Zapraszam do siebie :
    morelllocherry.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Podoba mi się Twój modowy gust :3
      Aż oddzielny blog? Na prawdę nie ma się co tak bać tego tworzenia archiwum :). Powodzenia !

      Usuń
  31. Sukienki i tuniki mają świetne! Czas zacząć grzebanie na ich stronie.

    ZAPRASZAM I OBSERWUJE(Jako; Alek Mlodz)
    http://aaleksm.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Mi też bardzo podoba się ich biżuteria *.*
      Również zaobserwowałam, dzięki :*

      Usuń
  32. Świetny post obserwue i zapraszam do mnie http://wikimiki654.blogspot.com/

    OdpowiedzUsuń
  33. Strasznie podobają mi się te sukienki, niestety nie na mnie >.< Musiałabym mieć talię "osy", ale może kiedyś :) Kliknęłam w nie i są po naprawdę przystępnej cenie :)
    Super pomysł z tą pomocą dla niedoświadczonych blogerów, myślę, że niektórym to się przyda :)
    Pozdrawiam i obserwuję :)
    http://books-world-come-in.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Moja figura też nie jest idealną do tego typu sukienek, ale nie zmienia to faktu, że można się inspirować ;). Może kiedyś dzięki takim zdjęciom wypracujemy sobie wymarzone sylwetki? :))
      Cieszę się, że pomysł na diy się podoba :D.
      Dzięki ♥

      Usuń
  34. W sumie mogę spróbować coś zrobić w tym kierunku :D Ogólnie nie lubię bawić się w css, zawsze coś pójdzie niezgodnie z planem, ale spróbować można :)

    http://pauuls.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Kiedyś też za tym nie przepadałam, ale im więcej rzeczy potrafię, tym chętniej się za to biorę :).
      CSS może wydawać się trudny...ale zmiany w HTMLu są o wiele gorsze :P.
      Poza tym w css wystarczy, że usuniesz frazę i wszystko wraca do poprzedniego stanu :). Powodzenia *.*

      Usuń
  35. Dla mnie bardzo przydatne :D

    www.patryczko.blogspot.com
    Ja dopiero zaczynam z moim blogiem lifestylowym i będzie mi bardzo miło !
    jeśli poświecisz swoj czas i wejdziesz do mnie :*Pozdrawiam !

    OdpowiedzUsuń
  36. Świetny post. Bardzo pomocny.

    Pozdrawiam,
    nataa-natkaa.blogspot.com

    OdpowiedzUsuń
  37. jasne, że każdy potrzebuję naładowania energii, ważne, że ją naładowałaś i wróciłaś! post jest świetny, na pewno pomoże początkującym blogerką czy takim które się nie znają w ogóle na tym! oczywiście poklikałam we wszystko :D
    ♥ queenxfangle.blogspot.com ♥

    OdpowiedzUsuń
  38. Mi się moje archiwum podoba i nie chcę go zmieniać, ale sądzę że post napisałaś świetnie, każdy się połapie - co jest bardzo ważne :) W ciuszki klikam, nie piszę cen bo jest 1:00 i już na prawdę mi się nie chce :* W odp. na twoje pytanie - Włosy ścinam na prawdę rzadko, ostatni raz podcinałam końcówki chyba jakoś w maju albo październiku haha pamiętam tylko że nie było upału więc albo końcówka wiosny albo początek jesieni :D I dziękuję za tak miły komentarz odnośnie moich włosów <3
    Zapraszam! BLOG I ASK

    OdpowiedzUsuń
  39. Kochana poklikałam w linki ponownie :)

    Kochana mam prośbę... czy mogłabyś poklikać w linki w najnowszym poście :
    http://rzetelne-recenzje.blogspot.com/2016/01/lista-zyczen-czyli-wpado-mi-w-oko-z.html
    Z góry ślicznie dziękuję :*

    OdpowiedzUsuń
  40. dzieki za instrukcje! :*

    http://joannaruminska.blogspot.co.uk/

    OdpowiedzUsuń
  41. KOcham takie posty! Są one niesamowicie przydatne. Dzięki bardzo <3 Poklikałam w twoje linki! Zapraszam na mojego bloga - jest tam dużo o modzie, ale też motywacyjnych postów. Jeśli blog Ci się spodoba to będzie mi niezmiernie miło jeśli zostaniesz na dłużej.
    Pozdrawiam ciepło
    http://royal-princes.blogspot.com/

    OdpowiedzUsuń
  42. Podobają mi się wszystkie Twoje wybrane rzeczy :)
    Poklikane :)
    Mam prośbę klikniesz linki w moim najnowszym poście :) Byłabym bardzo wdzięczna za to :) http://wildstrawberryand.blogspot.com/2016/01/dresslink-wishlist.html

    OdpowiedzUsuń
  43. Świetne ciuszki
    Poklikałam :)

    OdpowiedzUsuń
  44. Dziękuję! Właśnie nie wiedziałam jak to zrobić!
    Poklikane ouurselves.blogspot.com

    OdpowiedzUsuń
  45. Przydatny post ;P Poklikałam
    Bloga dodaję do obserwowanych

    http://magicworldprincesscarmen.blogspot.com/

    OdpowiedzUsuń
  46. dresslink ma fajne czasem rzeczy:)

    OdpowiedzUsuń
  47. kliknęłam w czarną sukienkę, mogłabym prosić o to samo u mnie >? :))
    by-vanys.blogspot.com

    OdpowiedzUsuń
  48. Przydatny post! ♡
    carolynana.blogspot.com

    OdpowiedzUsuń
  49. Super post :) zawsze przyda się dodatkowe info;D może wspólna obserwacja? poklikałam
    rebelliousmode.blogspot.com/

    OdpowiedzUsuń
  50. Świetnie opisane, wykorzystałam u siebie na blogu :) Dziękuję ♡

    http://economic-beauty.blogspot.com

    OdpowiedzUsuń

Prześlij komentarz

✿ Bardzo dziękuję, że tu jesteś
✿ Zostawiając komentarz masz gwarancję rewanżu

Ostatnio popularne