DBzP#7 Jak zrobić rozwijane archiwum?

Heii!

W tym poście pokażę Wam jak zrobić rozwijane archiwum na bloga, ale zanim do tego przejdę, chciałabym przypomnieć Wam o konkursie fotograficznym (klik), który trwa do 15 lipca :) Zapraszam do wzięcia udziału w nim.

1.Na początku wybierzmy lub stwórzmy obrazek z rokiem. Ja swój zrobiłam na zwykłym paint'cie.

Ta grafika pochodzi akurat z roku 2015 ;)

2.Wchodzimy w układ bloga i dodajemy nowy gadżet. Wybieramy 'Java Script/HTML', gdzie wpisujemy ten kod:

<img alt="PODPIS" class="centered" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJi8NzgkLwQdpTfXIvwNnkv60NBXJGZ_AAIk96Jxryw4lFj_daMZGtmTQQ2X65SjqwBmQF57SAE4SWCPwUEb41TLH6B609r7RJePYdfHwJ_8saL895cFwy_imAtqiRj_2blsECXrKpro/s1600/czarny2.bmp" / /><div><a href="http://paulan-official-blog.blogspot.com/2016_01_01_archive.html">styczeń</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_02_01_archive.html">luty</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_03_01_archive.html">marzec</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_04_01_archive.html">kwiecień</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_05_01_archive.html">maj</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_06_01_archive.html">czerwiec</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_07_01_archive.html">lipiec</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_08_01_archive.html">sierpień</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_09_01_archive.html">wrzesień</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_10_01_archive.html">październik</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_11_01_archive.html">listopad</a></div><div><a href="http://paulan-official-blog.blogspot.com/2016_12_01_archive.html">grudzień</a></div>

Kolor zielony - w tym miejscu macie wpisać link do grafiki z rokiem

Kolor czerwony - w tym miejscu macie wpisać link do waszego bloga

3.Na blogu pojawia się nowe archiwum, ale jeszcze się nie rozwija. Aby osiągnąć ten efekt, musimy wejść w 'Szablon' ---> Ustawienia zaawansowane. Tam wybieramy arkusz CSS i wpisujemy ten kod:

#id .widget-content {

   height: 45px; /*schowanie widż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;

}

 #id:hover .widget-content {

   height: 280px; /*wysokość docelowa widżetu*/

}

Kolor różowy - w tym miejscu wpisujemy id gadżetu (czyli archiwum)

W powyższym kodzie możecie też zmieniać wartości, aby pasowały do Waszego szablonu. 

Wszystko zapisujemy i gotowe. Skończone archiwum będzie wyglądać tak jak u mnie na pasku bocznym (oczywiście nasze obrazki będą się różnić).

Posty pomocne przy robieniu archiwum:

Jak znaleźć link własnoręcznie robionego obrazka?

Jak znaleźć id gadżetu?

Snapchat - paulanblog

Instagram - paulanblog

Kontakt - paulan.01x@gmail.com (w razie pytań śmiało piszcie :D)