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 ♥.

DRESS / SKIRT-LEGGINGS / DRESS

FUR / SKIRT / COAT / JACKET

DRESS/ DRESS

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 ;**