• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ΚΑΘΕΤΟ ΚΑΙ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΕΓΧΡΩΜΑ BUTTONS

BUTTONS
ΚΑΘΕΤΟ ΚΑΙ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΕΓΧΡΩΜΑ BUTTONS
Με τον παρακάτω κώδικα μπορείτε να προσθέσετε ένα κάθετο ή ένα οριζόντιο μενού αποτελούμενο από ένχρωμα buttons που ανοίγουν τα links τους είτε σε νέα καρτέλα είτε στην ίδια. Σε κάθετη διάταξη είναι αυτό που βλέπετε στην εικόνα σε αυτήν την ανάρτηση. Σε οριζόντια διάταξη είναι ο ίδιος κώδικας με την διαφορά ότι δεν θα τον τοποθετήσετε σε πλαϊνή μπάρα αλλά σε οριζόντια όπως κάτω από τον τίτλο του blog ή στο πάνω μέρος του υποσέλιδου.

Αντικαταστήσετε τους συνδέσμους που είναι με μώβ χρώμα με τους δικούς σας, αλλάξτε το πλάτος και το ύψος των κουμπιών αλλάζοντας τα γαλάζια νούμερα, αλλάξτε το μέγεθος της γραμματοσειράς αλλάζοντας τα κίτρινα νούμερα, αλλάξτε το κείμενο του κουμπιού αλλάζοντας τα πορτοκαλί γράμματα και τέλος αλλάξτε τους κωδικούς των χρωμάτων του backround και των χρωμάτων του κειμένου των κουμπιών αλλάζοντας τα νούμερα που είναι μετά τις λέξεις backround:# και color:# με αυτά που σας αρέσουν και θα βρείτε με την βοήθεια του widget των κωδικών χρωμάτων που βρίσκεται τέρμα κάτω και δεξιά σε αυτό το ιστολογίο.

Κώδικας 1ος Άνοιγμα των συνδέσμων σε νέα καρτέλα.
<a href="http://the-best-widgets.blogspot.gr" target="_blank"><button style="width:100px; height:28px; background:#FF6600; color:#FFFFFF;  font: 14px Arial;">BLOGGER</button></a>
<a href="https://www.facebook.com/widgetsforblogs" target="_blank"><button style="width:134px; height:28px; background:#115595; color:#FFFFFF; font: 14px Arial;">FACEBOOK</button></a>
<a href="https://twitter.com" target="_blank"><button style="width:100px; height:28px; background:#33FFFF; color:#000000;  font: 14px Arial;">TWITTER</button></a>
<a href="https://plus.google.com/113381416528370124258/posts" target="_blank"><button style="width:134px; height:28px; background:#FF1111; color:#FFFFFF; font: 14px Arial;">GOOGLE PLUS</button></a>
<a href="https://www.youtube.com/user/WIDGETSFORBLOGS" target="_blank"><button style="width:100px; height:28px; background:#FFFFFF; color:#FF1111; font: 14px Arial;">YOU TUBE</button></a>
<a href="http://photobucket.com" target="_blank"><button style="width:134px; height:28px; background:#115595; color:#FFFF00; font: 14px Arial;">PHOTOBUCKET</button></a>
<a href="http://www.flickr.com" target="_blank"><button style="width:120px; height:28px; background:#760991; color:#FFFFFF; font: 14px Arial;">FLICKR</button></a>
<a href="http://imgur.com" target="_blank"><button style="width:114px; height:28px; background:#207907; color:#FFFFFF; font: 14px Arial;">IMGUR</button></a>

Κώδικας 2ος Άνοιγμα των συνδέσμων στην ίδια καρτέλα.
<a href="http://the-best-widgets.blogspot.gr"><button style="width:100px; height:28px; background:#FF6600; color:#FFFFFF;  font: 14px Arial;">BLOGGER</button></a>
<a href="https://www.facebook.com/widgetsforblogs"><button style="width:134px; height:28px; background:#115595; color:#FFFFFF; font: 14px Arial;">FACEBOOK</button></a>
<a href="https://twitter.com"><button style="width:100px; height:28px; background:#33FFFF; color:#000000;  font: 14px Arial;">TWITTER</button></a>
<a href="https://plus.google.com/113381416528370124258/posts"><button style="width:134px; height:28px; background:#FF1111; color:#FFFFFF; font: 14px Arial;">GOOGLE PLUS</button></a>
<a href="https://www.youtube.com/user/WIDGETSFORBLOGS"><button style="width:100px; height:28px; background:#FFFFFF; color:#FF1111; font: 14px Arial;">YOU TUBE</button></a>
<a href="http://photobucket.com"><button style="width:134px; height:28px; background:#115595; color:#FFFF00; font: 14px Arial;">PHOTOBUCKET</button></a>
<a href="http://www.flickr.com"><button style="width:120px; height:28px; background:#760991; color:#FFFFFF; font: 14px Arial;">FLICKR</button></a>
<a href="http://imgur.com"><button style="width:114px; height:28px; background:#207907; color:#FFFFFF; font: 14px Arial;">IMGUR</button></a>

1 σχόλιο:

  1. Ανώνυμος8/5/16 17:48

    ευχαριστω θερμα για την βοηθεια σας, αν δεν ειχαμε και εσας τι θα καναμε;

    ΑπάντησηΔιαγραφή

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.