TEXT BOXES ΜΕ KEIMENO, ΕΙΚΟΝΕΣ, ΒΙΝΤΕΟ ΚΑΙ BUTTONS No 1

TEXT BOXES ΜΕ KEIMENO, ΕΙΚΟΝΕΣ, ΒΙΝΤΕΟ ΚΑΙ BUTTONS No 1

Με τον παρακάτω κώδικα μπορείτε να βάλετε text boxes μέσα στην ανάρτησή σας τα οποία μπορούν να περιέχουν ταυτοχρόνως κείμενο, εικόνες, βίντεο και buttons με links. Οι διαστάσεις των κουτιών αλλάζουν εάν αλλάξετε το width:200px; και το height:200px; Τα μώβ και τα πράσινα links των εικόνων και των βίντεο αλλάξτε τα με τα δικά σας links. Τα χρώματα αλλάξουν εάν αλλάξετε τον 6ψήφιο κωδικό χρώματος που ακόλουθεί μετά το σύμβολο της δίεσης #. Αλλάξτε και τις περιγραφές του έχω χρωματίσει με κίτρινα και πορτοκαλί γράμματα.

Ο κώδικας μπαίνει στο HTML της ανάρτησης ή της σελίδας του ιστολογίου σας αλλά εννοείται ότι μπορεί να μπεί και οπουδήποτε αλλού απλά σαν gadget. Δείτε μετά το τέλος του κώδικα πως θα φαίνονται τα text boxes.

<style>

.float-box1 {margin:0;padding:0;overflow:visible;list-style:none;}

.float-box1 li {list-style:none;float:left;margin:5px;}

.float-box1 a {display:block;font:14px Arial;text-decoration:none; width:200px;height:200px; background:#333333;color:#FFFFFF;padding:5px;}

.float-box1 a:hover {background:#105105;color: #FFFFFF;}

</style>

<ul class="float-box1">

<li><a href="http://i.imgur.com/7X4wjWS.jpg"  target="_blank"><button style="width:auto; height:28px; background:#105105; color:#FFFFFF;  font: 14px Arial;">ΚΕΡΚΥΡΑ</button>

<img src="http://i.imgur.com/7X4wjWSm.jpg" width="192" height="120" />Η Κέρκυρα με το Ποντικονήσι. Κάντε κλίκ στην εικόνα ή στο button.</a></li>

<li><a href="http://i.imgur.com/qrKer61.jpg"  target="_blank"><button style="width:auto; height:28px; background:#F11111; color:#FFFFFF;  font: 14px Arial;">ΚΕΦΑΛΟΝΙΑ</button>

<img src="http://i.imgur.com/qrKer61m.jpg" width="192" height="120"/>Η παραλία Μύρτος στην Κεφαλλονιά. Κάντε κλίκ στην εικόνα ή στο button.</a></li>

<li><a href="http://i.imgur.com/fiVofHI.jpg"  target="_blank"><button style="width:auto; height:28px; background:#33FFFF; color:#000000;  font: 14px Arial;">ΖΑΚΥΝΘΟΣ</button>

<img src="http://i.imgur.com/fiVofHIm.jpg" width="192" height="120"/>Η παραλία Ναύαγιο στη Ζάκυνθο. Κάντε κλίκ στην εικόνα ή στο button.</a></li>

<li><a href="http://i.imgur.com/rcivwQJ.jpg"  target="_blank"><button style="width:auto; height:28px; background:#115599; color:#FFFFFF;  font: 14px Arial;">ΛΕΥΚΑΔΑ</button>

<img src="http://i.imgur.com/rcivwQJm.jpg" width="192" height="120"/>Η παραλία Πόρτο Κατσίκι στη Λευκάδα. Κάντε κλίκ στην εικόνα ή στο button.</a></li>

<li><a href="https://www.youtube.com/embed/r3zpRwxKxKU?rel=0&autoplay=1&loop=1&playlist=r3zpRwxKxKU"  target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=800, height=500, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"><button style="width:auto; height:28px; background:#105105; color:#FFFFFF;  font: 14px Arial;">ΚΕΡΚΥΡΑ  AERIAL VIDEO</button><iframe width="192" height="113" src="https://www.youtube.com/embed/r3zpRwxKxKU" frameborder="0" allowfullscreen></iframe>Η Κέρκυρα απο ψηλά !!! Κάντε κλίκ στο βίντεο ή στο button.</a></li>

<li><a href="https://www.youtube.com/embed/B0gNyHzwkPg?rel=0&autoplay=1&loop=1&playlist=B0gNyHzwkPg"  target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=800, height=500, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"><button style="width:auto; height:28px; background:#F11111; color:#FFFFFF;  font: 14px Arial;">ΑΣΣΟΣ ΚΕΦΑΛΟΝΙΑ</button><iframe width="192" height="113" src="https://www.youtube.com/embed/B0gNyHzwkPg" frameborder="0" allowfullscreen></iframe>Ο Ασσος της Κεφαλονιάς απο ψηλά !!!Κάντε κλίκ στο βίντεο ή στο button.</a></li>

<li><a href="https://www.youtube.com/embed/YSuo0j2xsj8?rel=0&start=22&end=235&autoplay=1&loop=1&playlist=YSuo0j2xsj8"  target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=800, height=500, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"><button style="width:auto; height:28px; background:#33FFFF; color:#000000;  font: 14px Arial;">ΝΑΥΑΓΙΟ BASE JUMPING</button><iframe width="192" height="113" src="https://www.youtube.com/embed/YSuo0j2xsj8" frameborder="0" allowfullscreen></iframe>Base jumping στην παραλία Ναύαγιο στη Ζάκυνθο. Κάντε κλίκ στο βίντεο ή στο button.</a></li>

<li><a href="https://www.youtube.com/embed/sxKA1j-Rjbo?rel=0&autoplay=1&loop=1&playlist=sxKA1j-Rjbo"  target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=800, height=500, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"><button style="width:auto; height:28px; background:#115599; color:#FFFFFF;  font: 14px Arial;">ΛΕΥΚΑΔΑ ΑΓΙΟΦΥΛΙ</button><iframe width="192" height="113" src="https://www.youtube.com/embed/hY8h3jOsWy4" frameborder="0" allowfullscreen></iframe>Η παραλία Αγιοφύλι στη Λευκάδα. Κάντε κλίκ στο βίντεο ή στο button.</a></li>

</ul>

• Η Κέρκυρα με το Ποντικονήσι. Κάντε κλίκ στην εικόνα ή στο button.
• Η παραλία Μύρτος στην Κεφαλλονιά. Κάντε κλίκ στην εικόνα ή στο button.
• Η παραλία Ναύαγιο στη Ζάκυνθο. Κάντε κλίκ στην εικόνα ή στο button.
• Η παραλία Πόρτο Κατσίκι στη Λευκάδα. Κάντε κλίκ στην εικόνα ή στο button.
• Η Κέρκυρα απο ψηλά !!! Κάντε κλίκ στο βίντεο ή στο button.
• Ο Ασσος της Κεφαλονιάς απο ψηλά !!!Κάντε κλίκ στο βίντεο ή στο button.
• Base jumping στην παραλία Ναύαγιο στη Ζάκυνθο. Κάντε κλίκ στο βίντεο ή στο button.
• Η παραλία Αγιοφύλι στη Λευκάδα. Κάντε κλίκ στο βίντεο ή στο button.