Witam :) Dziękuję, że mój pomysł zyskał tyle pozytywnych komentarzy. Nie zanudzam. Parę osób prosiło mnie już o wyjaśnienie pewnych rzeczy, więc jednak to od nich zacznę.
Ikony społecznościowe
Myślę, że z nimi jest wiele problemów. Także...Zaczynamy.
Podam wam podstawowy kod.
<style> #social a:hover {background-color: transparent; opacity:0.1;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <div id="social"> <center><a href="LINK DO FACEBOOKA" target="_blank"><img src="LINK DO IKONKI FACEBOOKA" border="0" alt="FB" /></a><a href="mailto:ADRES EMAIL" target="_blank"><img src="LINK DO IKONKI EMAIL" border="0" alt="email" /></a><a href="LINK DO TWITTER" target="_blank"><img src="LINK DO IKONKI TWITTER" border="0" alt="Twitter" /></a ></center> </div>
Jasne, że można sobie wszystko zmieniać. Można dodać takie selektory i wartości, by ikonki sobie "podskakiwały" i inne. Ale...Jeśli nie jesteście pewni, nie róbcie z tym nic, oprócz uzupełniania tych wyróżnionych miejsc. Oraz jak sami zauważyliście, muszą być ikonki. No tak ! Jeśli ich jeszcze nie macie, możecie znaleźć je tutaj: *
klik*
Wklejamy to jak zawsze, tutaj: Pager/Układ/Dodaj gadżet/Html/Java
Data w kółku
Najpierw trzeba wkleić w html to:
<script type='text/javascript'>
function replace_date(d)
{
var da = d.split(' ');
month = "<div class='month'>"+da[1].slice(0,3)+"</div>";
day = "<div class='day'>"+da[0]+"</div>";
year = "<div class='year'>"+da[2]+"</div>";
document.write(month+day+year);
}
</script>
Zaraz po frazie <body>.
Potem szukamy ten fragment
<b:if cond='data:post.dateHeader'> w części
</b:includable>.
I to:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2> zmieniamy na to:
<div class='date'><script type='text/javascript'>replace_date('<data:post.dateHeader/>');</script></div>
Teraz trzeba się trochę skupić, uwaga. Wklejamy tu: Pager/Szablon/Dostosuj/Zaawansowane/Dodaj CSS
.date-outer .date {
/*to jest całe nasze kółko*/
float: left;
/*bok posta, na którym się znajduje. Right, lub left*/
width: 60px;
/*szerokość*/
height: 60px;
/*wysokość*/
margin: 10px 10px -90px -73px;
/*margines, pozycjonowanie*/
background: none #FFE1E8;
/*kolor, w moim przypadku róż*/
padding: 5px;
color: #000000;
/*kolor czcionki*/
-webkit-border-radius: 45px;
/*zaokrąglenie, w tym przypadku nie trzeba nic zmieniać...*/
-moz-border-radius: 45px;
border-radius: 45px;
}
.date-outer .date div {
/*To jest to, co się dzieje w środku*/
line-height: 0.9em;
font-family: Arial;
/*czcionka*/
text-align: center;
/*pozycja*/
text-transform: uppercase;
font-size: 9px;
/*wielkość czcionki*/
}
.date-outer .date .month {
margin-top: 13px;
/*dzięki temu tekst jest równo na środku kółka*/
}
.date-outer .date .month, .date-outer .date .year {
letter-spacing: 1px;
/*odstępy między literami*/
}
.date-outer .date .day {
/*numer dnia*/
font-size: 10px;
/*wielkość czcionki*/
font-weight: 700;
padding: 4px;
/*odstęp między wyrazami*/
}
Moje uwagi po skopiowaniu możecie sobie usunąć, oczywiście.
Dziękuję za uwagę. W nast. poście odpowiem na wasze kolejne pytania. Ciao ;)
