Οριζόντιο μενού με κουτάκι αναζήτησης

Ένα πολύ όμορφο οριζόντιο μενού για το blog σας στο οποίο έχει ενσωματωθεί και κουτί αναζήτησης (search form) για να βρίσκει ο επισκέπτης σας κάτι συγκεκριμένο που θέλει εισάγοντας λέξεις κλειδιά.

Το μενού είναι πολύ απλό στην ενσωμάτωση, απλά τοποθετώντας το σαν ένα gadget στο blog σας!
Αντιγράψτε το πιο κάτω κώδικα και τοποθετήστε το πηγαίνοντας στην διάταξη του blog σας, διαλέξτε το κατάλληλο σημείο που θέλετε και με την επιλογή HTML/javascript μπορείτε να το προσθέσετε.

* Στο σημείο του κώδικα που γράφει την διεύθυνση του blog μου, δηλαδή http://lefta4klik.blogspot.gr/ το αντικαθιστάτε με την δική σας διεύθυνση
* Στις καρτέλες μπορείτε να δώσετε ότι ονόματα θέλετε και να αντικαταστήσετε με το λινκ της επιλογής σας εκεί που γράφει #url. Μπορείτε επίσης να αφαιρέσετε ή και να προσθέσετε όσες καρτέλες θέλετε.

<style>form#GRss{ padding:0 0 0 10px; margin:0 auto; width:95%; height:45px; background:#000; font-family: arial, sans-serif; background:#000; background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); } form#GRss input{ width:80px; height:20px; float:right; margin:10px 12px 0 0; border:0; background:#aaa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHcvCDshv8OF3pHbcOvuj7Y-s2zy6NCVg87GLixxyrXgO4b3gBVhE6b1KaHZJF8wOzDbDPQTW2EHFeuFDp9Xtzjx3vFah-zgMjGKU7pH8OiDhfKOxpaMAvQo_9m3Baz659ejpcdBa1FL9S/h120/lefta4klik-search.png) no-repeat 3px center; border-radius:10px; padding-left:20px; outline:none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } form#GRss input:focus { width:200px; background-color:#fff; } form a{ display:block; float:left; height:34px; width:100px; text-align:center; color:#fff; line-height:35px; text-decoration:none; text-shadow:0 1px 5px rgba(0, 0, 0, 0.5); margin:5px 3px 0; background:#900; border-radius:6px 6px 4px 4px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } form#GRss input:focus ~ a {width:80px;} form#GRss a:hover{background:#333; background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); text-decoration:none; } </style> <form action="http://lefta4klik.blogspot.gr/search" id="GRss" method="get"> <input name="q" onblur="if (this.value=='') {this.value='Search...';}" onfocus="if (this.value=='Search...') {this.value='';}" type="text" value="Search..." /> <a href="//www.blogger.com/blogger.g?blogID=8142493621715757518">Αρχική</a> <a href="//www.blogger.com/blogger.g?blogID=8142493621715757518#url">Καρτέλα 1</a> <a href="//www.blogger.com/blogger.g?blogID=8142493621715757518#url">Καρτέλα 2</a> <a href="//www.blogger.com/blogger.g?blogID=8142493621715757518#url">Καρτέλα 3</a> <a href="//www.blogger.com/blogger.g?blogID=8142493621715757518#url">Καρτέλα 4</a> <a href="//www.blogger.com/blogger.g?blogID=8142493621715757518#url">Καρτέλα 5</a> </form>