ΚΑΘΕΤΟ ΚΑΙ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΕΓΧΡΩΜΑ 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://s1300.photobucket.com/user/Arxigopoulo/profile" target="_blank"><button style="width:134px; height:28px; background:#115595; color:#FFFF00; font: 14px Arial;">PHOTOBUCKET</button></a>
<a href="http://www.flickr.com/photos/98183932@N02/sets" target="_blank"><button style="width:120px; height:28px; background:#760991; color:#FFFFFF; font: 14px Arial;">FLICKR</button></a>
<a href="http://myphotos77.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://s1300.photobucket.com/user/Arxigopoulo/profile"><button style="width:134px; height:28px; background:#115595; color:#FFFF00; font: 14px Arial;">PHOTOBUCKET</button></a>
<a href="http://www.flickr.com/photos/98183932@N02/sets"><button style="width:120px; height:28px; background:#760991; color:#FFFFFF; font: 14px Arial;">FLICKR</button></a>
<a href="http://myphotos77.imgur.com"><button style="width:114px; height:28px; background:#207907; color:#FFFFFF; font: 14px Arial;">IMGUR</button></a>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου