Οριζοντιο menu-μπαρα με links
Πρόκειται για μια μπάρα-menu με links-συνδέσμους που τοποθετείται συνήθως κάτω από την επικεφαλίδα της σελίδας σας.
Εγκαθιστάται σαν απλό gadget.
Ο κώδικας html του είναι:
<style type=”text/css”>
body {
margin:0;
padding:0;
font: bold 14px Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs H————————— */
#tabsH {
float:left;
width:100%;
font-size:95%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:0px 5px 0 0px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/ctooem437d87yvdblwpns116496/files/2013/07/tablefth.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url(https://lh5.googleusercontent.com/-muwyDaV_THM/T8mHdxUM2DI/AAAAAAAAU04/BCkIxTvkWHo/h86/tabrightH.gif) no-repeat right top;
padding:5px 5px 6px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
</style>
<div id=”tabsH”>
<ul>
<li><a href=”http://www.bloggertips.gr/” ><span>category 1</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 2</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 3</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 4</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 5</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 6</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 7</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 8</span></a></li>
</ul>
</div>
body {
margin:0;
padding:0;
font: bold 14px Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs H————————— */
#tabsH {
float:left;
width:100%;
font-size:95%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:0px 5px 0 0px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/ctooem437d87yvdblwpns116496/files/2013/07/tablefth.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url(https://lh5.googleusercontent.com/-muwyDaV_THM/T8mHdxUM2DI/AAAAAAAAU04/BCkIxTvkWHo/h86/tabrightH.gif) no-repeat right top;
padding:5px 5px 6px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
</style>
<div id=”tabsH”>
<ul>
<li><a href=”http://www.bloggertips.gr/” ><span>category 1</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 2</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 3</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 4</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 5</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 6</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 7</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 8</span></a></li>
</ul>
</div>
όπου βλέπετε http://www.bloggertips.gr/ βάζετε το δικό σας link
και όπου λέει category βάζετε το όνομα που θέλετε να εμφανίζεται.
καταλαβαίνετε πως μπορείτε να προσθέσετε ή να αφαιρέσετε κατηγορίες
αν σας άρεσε κάντε ένα like στη σελίδα μας στο facebook
Copyrights: http://www.bloggertips.gr/
7
comments:
Ανώνυμος
είπε…
Καλησπερα παιδια, συγγνωμη αλλα τετοια αναρτηση δεν εχει ξαναανεβει; Και νομιζω παραπανω απο μια φορες!
Ειναι που ειναι ξεπερασμενες οι συγκεκριμενες μπαρες, τουλαχιστον βαλτε τες ολες μαζι σε ενα ποστ για να τις βρισκουμε ολες μαζι ευκολοτερα! 😉
Φιλικα, Μπαουλο.
1 Αυγούστου 2013 – 11:25 μ.μ.
Maaste Blogerrmen
είπε…
thank you so much….the information was so helpful to me to improve myself a lot in my field….. Readers would be more happy if it the explanations are very clear to understand… Make Money , Blogging Tips
24 Ιανουαρίου 2014 – 8:12 π.μ.
Kiron
είπε…
Thanks for sharing your valuable experience. Its too much effective specially for me. Waiting for another one. keep it up. Textile Flowchart
30 Ιουνίου 2015 – 7:28 μ.μ.
Dolon
είπε…
Nice post.
30 Ιουνίου 2015 – 7:29 μ.μ.
George Papas
είπε…
Καλησπέρα, έχω βρει ένα καταπληκτικό template. Το εγκατέστησα, δουλεύει μια χαρά, άλλαξα και το main menu με τα θέματα που με βολεύουν ΑΛΛΑ δεν μπορώ να βάλω τις αναρτήσεις στις κατηγορίες του μενού μου, ώστε να πατάω το κουμπί κάθε κατηγορίας κ να εμφανίζονται οι αντίστοιχες αναρτήσεις.
Ευχαριστώ εκ των προτέρων
το blog μου ειναι: http://papasgeorge.blogspot.gr/
κ το mail μου ειναι papas1069@gmail.com
13 Ιουλίου 2015 – 3:20 μ.μ.
192.168 ll
είπε…
σε ευχαριστώ που μοιράστηκες. πολύ χρήσιμο
8 Ιουνίου 2017 – 7:47 π.μ.
Lily Oliver
είπε…
I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again.
madalin stunt cars
slope
super mario world
10 Ιουνίου 2017 – 7:05 π.μ.
Δημοσίευση σχολίου
Παρακαλούμε τους φίλους αναγνώστες:
ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ
Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.