Ajax Loader
×
HTML 
<html>
1
<html>
2
  <body>
3
  
4
    <div class="opis"> To jest instrukcja ze strony <a href="http://od-podstaw.blogspot.com">"Od Podstaw"</a>. Gadżet stron, przedstawiony w innym świetle. <a href="http://od-podstaw.blogspot.com/2014/10/gadzety-strony-1.html#more">Czytaj więcej>></a></div>
5
  
6
    <div class='widget PageList' data-version='1' id='PageList1'>
7
<h2>Menu</h2>
8
<div class='widget-content'>
9
<ul>
10
<li class='selected'><a href='http://ally-fray.blogspot.com/'>Strona główna</a></li>
11
<li><a href='http://ally-fray.blogspot.com/p/o-mnie.html'>O mnie</a></li>
12
<li><a href='http://ally-fray.blogspot.com/p/q-pytania-i-odpowiedzi.html'>Q&amp;A Pytania i odpowiedzi)</a></li>
13
</ul>
14
  </div>
15
    </div>
16
  
17
  </body>
18
 </html>
 
CSS 
@import url('https://fonts.googleapis.com/css?family=Asar');
1
@import url('https://fonts.googleapis.com/css?family=Asar');
2
 
3
body {
4
  background: url(http://funkyimg.com/i/UzNi.png) !important;
5
}
6
 
7
a:link, a:visited {
8
  text-decoration: none !important;
9
  color: #ddd;
10
  transition:all .60s;
11
-moz-transition:all .60s;
12
-webkit-transition:all .60s;
13
-o-transition:all .60s;
14
}
15
 
16
a:hover {
17
  color: #fff;
18
  transition:all .60s;
19
-moz-transition:all .60s;
20
-webkit-transition:all .60s;
21
-o-transition:all .60s;
22
}
23
 
24
.opis {
25
  color: #eee;
26
  font-family: 'Asar', serif;
27
  width: 300px;
28
  position: absolute;
29
  top: 100px;
30
  left: 200px;
31
  text-align: justify;
32
  background: #2a2a2a;
33
  border: 3px inset #444;
34
  padding: 10px;
35
font-size: 10px;
36
text-transform: uppercase;
37
}
38
 
39
#PageList1 {
40
  text-align: center;
41
  width: 290px;
42
  position: absolute;
43
  top: 190px;
44
  left: 200px;
45
  background: #2a2a2a;
46
  border: 3px inset #444;
47
  padding: 10px 30px 20px 0px;
48
}
49
 
50
ul {
51
list-style-type: none;
52
}
53
 
54
h2 {
55
  text-transform: uppercase;
56
  color: #444;
57
  text-shadow: .5px .5px 0px #111;
58
  font-size: 20px;
59
  font-family: 'Asar', serif;
60
  padding: 0px !important;
61
  text-align: center;
62
}
63
 
64
/********************
65
oto kod, który nas interesuje
66
*********************/
67
 
68
#PageList1 li a:link, #PageList1 li a:visited {
69
  display: block;
70
  background: #ddd;
71
  color: #2a2a2a;
72
  margin: 2px 10px;
73
  padding: 3px 0;
74
  font-size: 14px;
75
  font-family: 'Asar', serif;
76
transition:all 1s;
77
-moz-transition:all 1s;
78
-webkit-transition:all 1s;
79
-o-transition:all 1s;
80
}
81
 
82
#PageList1 li a:hover {
83
  background-image: url(https://68.media.tumblr.com/19cc0c3ddfbd5ea5e9dd36e303b81622/tumblr_o61pfmzSc91rrvtcbo1_500.gif) !important;
84
background-position: center top;
85
  text-shadow: .5px .5px 1px #fff;
86
transition:all 1s;
87
-moz-transition:all 1s;
88
-webkit-transition:all 1s;
89
-o-transition:all 1s;
90
}
 

Gadżety - Strony #1

CSSDeck G+