ΕΔΩ...
Ο ΚΩΔΙΚΑΣ CSS:
<style type="text/css">
<!--
body {position: relative; background: none; margin: 0; padding: 0;}
div#FRIENDS {position: absolute; top: 10px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#FRIENDS a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #000000;
border-right: 5px solid #505050;}
div#FRIENDS a:hover {color: #8A1C1C; background: #AAA;
border-right: 5px double white;}
div#FRIENDS a img {height: 0; width: 0; border-width: 0;}
div#FRIENDS a:hover img {position: absolute; top: 190px; left: 55px; height: 70px; width: 80px;}
div#content {position: absolute; top: 26px; left: 161px; right: 25px;
color: #BAA; background: #22232F;
font: 13px Verdana, sans-serif; padding: 10px;
border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}
h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #333; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>
Ο ΚΩΔΙΚΑΣ HTML:
<div id="FRIENDS">
<a target="_blank" href="ΔΙΕΥΘΥΝΣΗ BLOG">ΤΙΤΛΟΣ<img src="ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ"></a>
<a target="_blank" href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank" href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank" href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank" href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank" href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
</div>
***στο DEMO που σας δείχνω, έχω βάλει και τους 2 κώδικες μαζί, σαν gadget
***να σας εξηγήσω μερικά χρήσιμα πράγματα για να το ρυθμίσετε σύμφωνα με τις απαιτήσεις σας...
*τα μεγέθη height: 70px; width: 80px; είναι για το μέγεθος της εικόνας...
*το target="_blank" το έβαλα για να ανοίγει το λινκ σε νέο παράθυρο...
*στο background: none μπορείτε να βάλετε ένα χρώμα background...έβαλα τίποτα, για να μη μπερδευτείτε...
*το background: #000000; είναι το χρώμα του button ...αλλάξτε και τα άλλα χρώματα
*εάν θέλετε να προσθέσετε κι άλλα banners θα επαναλάβετε τη φράση:
<a target="_blank" href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a> και θα μεγαλώσετε το μέγεθος top: 190px; (να πάει πιο κάτω)........
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
Πηγή, Thanks to : meyerweb.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}