Ads 468x60px

Τρίτη, 22 Νοεμβρίου 2016

CSS3 menu with social bar and Google Custom search box

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




και για το εγκαταστήσετε και εσείς

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--
............................................................................................................................................................
 <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(http://4.bp.blogspot.com/-1Uii8AVSHmA/UasEirYb9XI/AAAAAAAADQ8/mK-t0jydJpI/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="http://4.bp.blogspot.com/-GV5tBPml5W4/UasEi3SU2rI/AAAAAAAADRA/qrvW3HxfAQo/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="http://4.bp.blogspot.com/-flfZva27Xjw/UasEjeAUj1I/AAAAAAAADRQ/VOor94MgHgk/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="http://2.bp.blogspot.com/-nWh261blWNY/UasEi1YvFEI/AAAAAAAADRE/iWbAORIPWuY/s1600/BS+facebook-icon+menu.png" /></a></div>
</div>
.................................................................................................................................................................
ΑΛΛΑΓΕΣ 

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

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

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

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

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


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




Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog