Nietuzinkowe archiwum - blogger, blogspot - wersja trudniejsza

1 Comments
Hej, przedstawię dzisiaj drugą, trudniejszą wersję naszego nietuzinkowego archiwum. Konkretnie o takie:



Pytaliście jak dodać obrazki pomiędzy miesiącami, dlatego też dodaję sposób na archiwum 2.


Układ jest ten sam: 

- dajemy dodaj gadżet 





- wybieramy "html/java script"



- wklejamy i dostosowujemy kod przedstawiony poniżej.



KOD: ( usuwamy rzeczy pisane kursywą !! )
<style type="text/css">

  div.rok {
    text-align:center;
    font-size:15px; - wielkość czcionki, którą będą napisane lata
    color:black; - kolor czcionki, którą będą napisane lata
  }

  a.arch {
    color:grey;  - kolor czcionki poszczególnych miesięcy
  }

  a.arch:hover {
    color:pink; - kolor czcionki poszczególnych miesięcy po najechaniu myszką
  }

</style>

<div class="rok"> <img src="OBRAZEK LINK" />   2014 <img src="OBRAZEK LINK" />  </div>


 <a class="arch" href="http://ADRES BLOGA/2014_01_01_archive.html">Styczeń</a> ,
<a class="arch" href="http://ADRES BLOGA/2014_02_01_archive.html">Luty</a>

i tak dalej....  KONIEC KODU!

czerwone pole - wpisujemy odpowiedni rok
niebieskie pole - wpisujemy odpowiedni miesiąc


W efekcie uzyskamy obrazki obok roku. ( jak na zdjęciu u góry!:) )


Jeśli chcemy oddzielić obrazkiem każdy miesiąc to kod wygląda mniej więcej tak:

KOD:

<style type="text/css">

  div.rok {
    text-align:center;
    font-size:15px;
    color:black;
  }

  a.arch {
    color:grey;
  }

  a.arch:hover {
    color:pink;
  }

</style>

<div class="rok">  2014   </div>

 <a class="arch" href="http://ADRES BLOGA/2014_01_01_archive.html">Styczeń</a> <img src="OBRAZEK LINK" />
<a class="arch" href="http://ADRES BLOGA/2014_02_01_archive.html">Luty</a> <img src="OBRAZEK LINK" />
 <a class="arch" href="http://ADRES BLOGA/2014_03_01_archive.html">Marzec</a><img src="OBRAZEK LINK" />


KONIEC KODU.
kolor zielony - to kod na obrazek - możemy go wkleić przed / za każdym miesiącem. :) 


Jeśli chcemy aby obrazek miał konkretny wymiar to kod na obrazek wygląda tak:
<img src="OBRAZEK LINK" width="10" height="10" />



height = wysokość

width = szerokość
10 = ustawiamy odpowiednią wielkość w pikselach.


W razie problemów proszę pisać w komentarzach :)

Unknown

1 komentarz:

Instagram