Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
οριζόντιο widget menu με κώδικα CSS3 το οποίο εκτός από τα γνωστά Links -κατηγορίες-
που έχουν όλες οι μπάρες μενού
(menu bars)
διαθέτει επιπλέον και social 
network tabs
αλλά και ενσωματωμένη φόρμα αναζήτησης!

 <style>
#bsCSSmenu{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
width:960px;
 margin: 0 0 0 0px;
 padding: 12px 0 8px 0;
 clear: both;
 background: #111111 left bottom no-repeat;
}
#bsCSSmenu .catList{
 padding: 4px 0 0 35px;
 float: left;
    margin-top:-3px;
}
#bsCSSmenu .pageList{
 padding: 8px 0px 0 0;
 float: right;
}
#bsCSSmenu ul li{
 float: left;
 margin: 0 18px 0 0 ;
}
#bsCSSmenu a{
 color: #fff;
    list-style:none;
    text-decoration: none;
}
#bsCSSmenu a:hover{
 color: #919191;
}
#bsCSSmenu li {
list-style:none;
text-decoration:none;
}
#bssearch{
 margin: -2px 20px 0 0;
 float: right;
}
#bssocial{
 margin-left: 100px;
}
<!--Menu by www.bloggerspice.com-->
</style>
<div class="bsmenustart" id="bsCSSmenu">
<ul class="catList">
<li class="bscat-item-1"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-2"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-3"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-4"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-5"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-6"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-7"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-8"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
</ul>
<div id="bssearch">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="004972222991511809341:kobh4_l5t3m" />
<input name="ie" type="hidden" value="ISO-8859-1" />
<input class="googleSearchField" name="q" size="20" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUs3qPoDZhh_Wcx2L_lKIuifip8S1Mm9FYnU574NQAcocHnPLy0YljVFdiZy8ytSSLCLGqT-Szzucrrd9mlNIz339Z3Xp7mCRS9oB4Kp5Qy84Bf-33FjLSW1m1T6hR5cObeqVcugtUnL9J/s1600/BS+Google+Custom+Search.gif); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(126, 157, 185); padding: 2px;" type="text" />
<input class="button" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="bloggerspice.com/" /><input name="ref" type="hidden" value="" /><input name="ss" type="hidden" value="" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en" type="text/javascript"></script>
    </div>
<div id="bssocial">
<a alt="Subscribe to RSS" class="bssocialicon" href="http://feeds.feedburner.com/USERNAME FEED" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDadXdOhDr8t5EJVC_E5VuT3Ez8Y7dthNLSOeiJqjuj-rA7WzNesXazQxt9vBX6djc5he59LO-bFp1G1QKPabp_ePt6CnNseL-pUfRGLA1yZTR9PHmMcSetMu1YhciPL8Z2kgBF-bAMbDI/s1600/BS+RSS-icon+Menu.png" style=""></a>
<a alt="Follow Us" class="bssocialicon" href="http://twitter.com/ USERNAME TWITTER " target="_blank" title="Follow Us"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ6K0WQov7Sv_4J0WgR5CIsQRtlO-C7OKpaWTFHBqZXJegdcNPdiU1toFc_whtPnrHkXJKGm1XpcLou6JvqqV47dUc2wYNlJ41rFoRA5NbnlVmw31L16rBgrCoYnV0gVRjtFazWGxWbsLm/s1600/BS+twitter-icon+menu.png" /></a>
<a alt="Become a Fan" class="bssocialicon" href="http://www.facebook.com/ USERNAME FACEBOOK " target="_blank" title="Become a Fan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHAQDUOBPVyPLVyLTE-D5nVVm9Zr1lWIUDHwA_RSqdAtnKKO7YnSVUkZ8sST4xDF9qTcGhLFMRDW69fiWd-jRhkpDwgInx3lTVZeaXlVnlv5J_nzH7HQRc3YbhF-9mIBlUbJyzRNDEjNW/s1600/BS+facebook-icon+menu.png" /></a></div>
</div>

.................................................................................................................................................................
ΑΛΛΑΓΕΣ 

ΔΙΕΥΘΥΝΣΗ URL --Εδώ βάζετε το link της διεύθυνσης σας!

TITΛΟΣ --Εδώ βάζετε τον τίτλο που θέλετε!

Αντικαταστήστε και όλα τα USERNAMES  με τα αντίστοιχα δικά σας που έχετε
στα social networks!

Μόλις τελειώσετε  Αποθήκευση και είστε έτοιμοι! 

 Καλή επιτυχία!!! 


 Πηγή κώδικα 
 thanks to bloggerspice.com




Edit by