Φίλοι bloggers, με ένα κώδικα css μπορείτε να κάνετε έξυπνα και εντυπωσιακά link!!!
Μπορείτε να φτιάξετε ένα link που να αλλάζει χρώματα η ακόμα και να βάλετε ένα ολόκληρο κείμενο που να αλλάζει χρώματα και εικόνες, σαν να έχετε φτιάξει flash η gif αρχείο....Demo σας έβαλα στο τέλος της ανάρτησης....Μη φοβηθείτε να κάνετε τα δικά σας πειράματα με αυτούς τους κώδικες !!!
ΚΩΔΙΚΕΣ:
1ο.Φράση με φόντο άσπρο-μαύρο
/*-- Black & white--*/
.dr-blogger{
background:#000800;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger:hover{
background:#fff;
font:bold 13px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger a {
color:#fff;
text-decoration:none;
}
.dr-blogger a:hover {
color:#fff;
text-decoration:none;
}
</style>
<a target="_blank" href='##'>
<div class="dr-blogger" >ΠΕΡΑΣΤΕ ΤΟ ΠΟΝΤΙΚΙ ΣΑΣ ΝΑ ΔΕΙΤΕ ΤΟ ΕΦΕ</div></a>
2o.Με 1 εικόνα και μεγεθυνση
<style>
/*-- small and bigger--*/
.dr-blogger1{
background:#0404B4;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #81DAF5;
padding:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger1:hover{
background:#FACC2E;
font:bold 16px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger1 a {
color:#fff;
text-decoration:none;
}
.dr-blogger1 a:hover {
color:#fff;
text-decoration:none;
}
</style>
<a target="_blank" href='##'>
<div class="dr-blogger1" >Mickey Mouse<img src="http://cursors1.totallyfreecursors.com/thumbnails/hand91.gif" width=32 height=32 ></div></a>
3o.Με 2 εικόνες...
<style>
/*-- 2 images--*/
.dr-blogger2{
background:#8A0808;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #81DAF5;
padding:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger2:hover{
background:#BFFF00;
font:bold 12px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger2 a {
color:#fff;
text-decoration:none;
}
.dr-blogger1 a:hover {
color:#fff;
text-decoration:none;
}
</style>
<a target="_blank" href='##'>
<div class="dr-blogger2" >Ανοίξτε ΕΔΩ<br/><img src="http://www.animatedgif.net/arrowpointers/arrow.rt.spin_e0.gif" width=45 height=32 ><img src="http://www.freesmileys.org/emoticons/emoticon-games-015.gif" width=32 height=32 ></div></a>
***Αλλάξτε τα χρώματα η τις εικόνες που χρησιμοποιώ εγώ, καθώς και τις φράσεις η τα μεγέθη των γραμματοσειρών (για να αλλάξει το μέγεθος).....
Κάντε τα δικά σας πειράματα για να μάθετε, όσοι δεν γνωρίζετε, πως αλλάζει ένας κώδικας css !!!
*** DEMO =>
Μπορείτε να φτιάξετε ένα link που να αλλάζει χρώματα η ακόμα και να βάλετε ένα ολόκληρο κείμενο που να αλλάζει χρώματα και εικόνες, σαν να έχετε φτιάξει flash η gif αρχείο....Demo σας έβαλα στο τέλος της ανάρτησης....Μη φοβηθείτε να κάνετε τα δικά σας πειράματα με αυτούς τους κώδικες !!!
ΚΩΔΙΚΕΣ:
1ο.Φράση με φόντο άσπρο-μαύρο
/*-- Black & white--*/
.dr-blogger{
background:#000800;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger:hover{
background:#fff;
font:bold 13px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger a {
color:#fff;
text-decoration:none;
}
.dr-blogger a:hover {
color:#fff;
text-decoration:none;
}
</style>
<a target="_blank" href='##'>
<div class="dr-blogger" >ΠΕΡΑΣΤΕ ΤΟ ΠΟΝΤΙΚΙ ΣΑΣ ΝΑ ΔΕΙΤΕ ΤΟ ΕΦΕ</div></a>
2o.Με 1 εικόνα και μεγεθυνση
<style>
/*-- small and bigger--*/
.dr-blogger1{
background:#0404B4;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #81DAF5;
padding:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger1:hover{
background:#FACC2E;
font:bold 16px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger1 a {
color:#fff;
text-decoration:none;
}
.dr-blogger1 a:hover {
color:#fff;
text-decoration:none;
}
</style>
<a target="_blank" href='##'>
<div class="dr-blogger1" >Mickey Mouse<img src="http://cursors1.totallyfreecursors.com/thumbnails/hand91.gif" width=32 height=32 ></div></a>
3o.Με 2 εικόνες...
<style>
/*-- 2 images--*/
.dr-blogger2{
background:#8A0808;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #81DAF5;
padding:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger2:hover{
background:#BFFF00;
font:bold 12px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger2 a {
color:#fff;
text-decoration:none;
}
.dr-blogger1 a:hover {
color:#fff;
text-decoration:none;
}
</style>
<a target="_blank" href='##'>
<div class="dr-blogger2" >Ανοίξτε ΕΔΩ<br/><img src="http://www.animatedgif.net/arrowpointers/arrow.rt.spin_e0.gif" width=45 height=32 ><img src="http://www.freesmileys.org/emoticons/emoticon-games-015.gif" width=32 height=32 ></div></a>
Κάντε τα δικά σας πειράματα για να μάθετε, όσοι δεν γνωρίζετε, πως αλλάζει ένας κώδικας css !!!
*** DEMO =>
Mickey Mouse

Ανοίξτε ΕΔΩ


ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

3 σχόλια:
Νασε καλλα Μαέστρο για τα φώτα σου... Καλη χρονια και οτι επιθυμείς..
Σε ευχαριστουμε...
http://omastorakos.blogspot.gr/
Είμαι καινούργιος εδώ ,σε βρήκα τυχαία πρίν 5-6 ημέρες. Πολύ ωραία καί χρήσιμα αυτά που βάζεις, επί τέλους κάποιος βοηθάει καί τους αρχάριους που τώρα το ξεκινάνε το blog.
έχω λίγες γνώσεις από html,εδώ πως θα μπεί αυτό, μήπως σαν gadget-html-paste ή κάπως αλλιώς
βαλε το σαν gadget => javascript/html....
και διαλεξε σε ποιο σημειο της σελιδας θα το βαλεις...
Δημοσίευση σχολίου