Little White Lies: Ikony, data.

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

Strony

Ikony, data.

8 komentarzy: