Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




14 15 Oριζόντια "Navigation Menus" για blogger με CSS & HTML Codes

Νέοι bloggers γεια σας !!! Βρήκα σε ένα site, μια μεγάλη ποικιλία από Οριζόντια Μενού, πανεύκολα να τοποθετηθούν στο blog σας...Μπαίνουν σαν gadget ( ΔΕΙΤΕ ΕΔΩ ΠΩΣ ΒΑΖΩ ΕΝΑ GADGET ) και υπάρχουν εικόνες που σας καθοδηγούν και μπορείτε να δείτε και demo στις εικόνες, με τα χρώματά τους....




Eίναι όλα στο ίδιο μοτίβο, και στύλ, απλά διαφέρουν στα χρώματα και άλλα χρησιμοποιούν εικόνα, και άλλα όχι...



Αυτός ο κώδικας είναι κοινός σε όλα τα μενού και εσείς απλά θα βάλετε τα link (διευθυνσεις)  όπου έχει "#", και την ονομασία του όπου έχει τα κόκκινα γράμματα (  Link 1, Link 2 κλπ)...
<li><a href="#" ><span>Link 1</span></a></li>

<li><a href="#" ><span>
Link 2</span></a></li>

<li><a href="#" ><span>
Link 3</span></a></li>

<li><a href="#" ><span>
Link 4</span></a></li>

<li><a href="#" ><span>
Link 5</span></a></li>

<li><a href="#" ><span>
Link 6</span></a></li>

<li><a href="#" ><span>
Link 7</span></a></li>


Εάν θέλετε περισσότερα η λιγότερα link, προσθέστε η αφαιρέστε τη φράση:

<li><a href="#" ><span>Link n</span></a></li>
Είναι πολύ σημαντικό να μεταφέρετε το gadget ψηλά στο blog σας κάτω από την επικεφαλίδα...




1o MENU:


ΧΩΡΙΣ ΕΙΚΟΝΑ
Black-Orange

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


2o MENU:

ΧΩΡΙΣ ΕΙΚΟΝΑ
Purple-White-Navigation

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


3o MENU:



ΧΩΡΙΣ ΕΙΚΟΝΑ
Boxed 1
<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

4o MENU:



ΧΩΡΙΣ ΕΙΚΟΝΑ
LIGHT-GREY
<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

5o MENU:

Tab Menu I
<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

6o MENU:

Tab Menu G

<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBBuaTrwI/AAAAAAAACv8/G3bPgs-Gu7U/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBB8X5gTI/AAAAAAAACwA/fwleg9upasg/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

7o MENU:



Tab Menu F
<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5iiWmCI/AAAAAAAACv0/4lAk0jar62Q/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5jIWoBI/AAAAAAAACv4/1TJsSRUoYes/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

8o MENU:



ΧΩΡΙΣ ΕΙΚΟΝΑ
ZDnet Emulation
<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

9o MENU:


Tab Menu E
<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

10o MENU:


Tab Menu 11
<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vcwCwaI/AAAAAAAACu8/HPBTqfggop8/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vbDU2PI/AAAAAAAACvA/k6O6JwDg614/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

11o MENU:


Tab Menu 10
<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_knlQKBI/AAAAAAAACu0/8LiiBZnKfsw/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_k-9mnTI/AAAAAAAACu4/zgN8RBPo47g/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

12o MENU:


Tab Menu 6
<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-pxMSoZI/AAAAAAAACuU/PFY8xbrx6AQ/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-p0wRo5I/AAAAAAAACuY/T2KFLniEzcM/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

13o MENU:


Tab Menu 3
<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-fxTO5uI/AAAAAAAACt8/-Obicf3fMP0/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-gDciBuI/AAAAAAAACuA/CQSbr-4_cGU/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

14o MENU:


Tab Menu 2
<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PRHHGvI/AAAAAAAACt0/VowUBlNOh9g/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu9Pg-t39I/AAAAAAAACt4/Bc82ooHNWSA/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

15o MENU:



Tab Menu 5

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-pihZsRI/AAAAAAAACuM/M_WqlslWGI0/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

***Μη ξεχάσετε να πατήσετε ΑΠΟΘΗΚΕΥΣΗ / SAVE όταν μεταφέρετε το gadget, στο ψηλότερο μέρος του blog σας

Πηγή-Αντιγραφή και Μετάφραση :24works.blogspot.com/
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

14 σχόλια:

Greek Polls Blog είπε...

Πολύ καλή ανάρτηση!
Ευχαριστώ πολύ!

Ανώνυμος είπε...

Πάρα πολύ καλό!! Εξαιρετικό! Όμως έχω 2 απορίες:
1) Μπορούμε έτσι εύκολα να δημιουργήσουμε υπομενού σε αυτά τα tabs? και
2) Έχω δει σε ένα tab να υπάρχουν 2-3 ή και παραπάνω αναρτήσεις.

Υπάρχει κάτι για αυτά? Ό,τι είναι σε μορφή gadget το καταφέρνω! :)

pandelees karagiann είπε...

ΔΕΣ ΕΔΩ :http://www.dr-blogger.com/2011/09/17-drop-down-menu-widget-in-blogger-o.html

natasa είπε...

AX NA EISAI KALA EIMAI ASXETH KAI TELIKA TO KATAFERA META APO 2 MERES XIXIXI EYXARISTWWWWWW

ekriksi-games4you είπε...

πολυ καλο!! να ρωτισω υπαρχει κατι τετοιο αλλα σε ενα λινκ μεσα να βαζουμε πολλα λινκ πχ το ονομα του λινκ να ειναι αστεια και μεσα να εχει 20 αναρτησεις??? για blog παντα!!

pandelees karagiann είπε...

όπως και πιο πάνω σε μια ίδια απορία να σου πω οτι υπάρχει το :
http://www.dr-blogger.com/2011/09/17-drop-down-menu-widget-in-blogger-o.html

ekriksi-games4you είπε...

δεν κανουν αυτα τα χω δοκιμασει δυστυχως δεν λειτουργουν στο προτυπο μου αλλα ευχαριστω παντος!!!!

Korn Rousakis είπε...

Πολύτιμη βοήθεια. Προσπαθούσαμε πολύ καιρό να φτιάξουμε τις κατηγορίες. Ευχαριστούμε!
http://theatreviewer.blogspot.gr/

pandelees karagiann είπε...

...ναι , αλλα έχετε μεγαλους τιτλους και δεν χωραει ολη η φραση στην εικονα του πληκτρου....η θα βαλετε μικροτερη φραση, (σε 2-3 που ειδα) η μεγαλυτερη σε πλατος φωτογραφια του πληκτρου...στειλε μειλ, να σου φτιαξω μια πιο φαρδιά....

Stefanos είπε...

πως μεγαλωνω την εικονα του πληκτρου;

pandelees karagiann είπε...

Στεφανε, αυτα τα μενου ειναι για μικρες γραμματοσειρες, και μικρές φρασεις...Μεγαλώνουν κι αλλο, αλλα μονο αν ξερεις να "πειραξεις" την εικονα του πληκτρου...αν θες κατι πιο μεγαλο, στειλε μου μηνυμα η ψαξε τις αναρτησεις μου στα "menu" ... εχω αναρτησεις κι με αλλα μενου....

nikos riseandfall είπε...

epeidi eimai asxetos...evala ta koumpia auta sto blog mou alla den xero pos na kano tis sundeseis oste to kathe koumpi na anoigei alli nea se lida tou blog mou tin opoia tha tin morfopoihso katallila...px to koumpi music na mou anoigei mia nea selida opou tha valo mp3 list

andrew admin είπε...

Καλημέρα
Έχεις κάνει τρομερή δουλειά με τις πληροφορίες στο blog σου, το παρακολουθώ τακτικά, συγχαρητήρια.
Συνέχισε έτσι και πάντα με νέα θέματα.

Έχω το blog http://mazitafagame67.blogspot.gr/
Με ενδιαφέρει το 10 menu, θέλω να βάλω και υποκατηγορίες, χρησιμοποίησα αυτές που αναφέρεις στο http://www.dr-blogger.com/2011/09/17-drop-down-menu-widget-in-blogger-o.html
Αλλά δεν μου δουλεύουν σωστά, για να είμαι ποιο συγκεκριμένος, δεν ανοίγουν σαν δεύτερο (dropBox) menu όταν πάω με τον κέρσορα του ποντικιού από πάνω αλλά είναι μονίμος δίπλα αλλά λίγο χαμηλότερα σαν να είναι συνέχεια του βασικού menu, δεν ξέρω τι λάθος κάνω.

Θα ήθελα να σου βάλω τον κώδικα αλλά δεν το δέχεται το κουτάκι των σχολίων αν μπορείς να επικοινωνήσουμε δια μέσου email για να σου βάλω τον κώδικα όπως τον έχω βάλει.


Σε ευχαριστώ εκ τον προτέρων.

pandelees karagiann είπε...

στειλε μου μηνυμα, να δω πως μπορω να βοηθησω, Αντρεα...