28 févr. 2012

Modifier La Largeur De Bloque Commentaire Dans Blogger

Par défaut, Le formulaire de commentaire Blogger est en une taille de pixel fixe. Ainsi, il pourrait apparaître mal dans les templates (modèles) qui ont une zone de poste plus large.
Il suffit alors d'ajuster la taille de zone de commentaire en augmentant sa largeur pour la rendre plus esthétique.






Comment changer la taille de la zone de commentaire dans blogger

1. Allez à "Présentation" > " Modifier le code HTML" > Cochez la case " Développer des modèles de gadgets"

2. Maintenant, regardez le code qui rassemble à :
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

3. Pour augmenter la largeur, il suffit de changer 100% avec le nombre de pixels que vous voulez.
Par exemple essayez de changer 100% avec 560px, Enregistrez le modèle et affichez votre blog.

Continuez à faire la modification de nombre de pixels jusqu'à vous obtenez la largeur requise pour votre blog.

27 févr. 2012

Comment Installer Favicon Dans Blogger

favicon Blogger

Un favicon est une icône personnalisée s'affiche à côté de l'URL de votre blog et à côté du titre de page dans les onglets ouverts.
Mettre un favicon rendre votre blog plus professionnel et surtout permet vos visiteurs réguliers de vous retrouvé facilement dans leurs favoris.
 
installer Favicon



Par défaut, Blogger est livré avec son propre favicon :

Comment changer le favicon de votre blog

Il existe deux méthodes pour changer le favicon blogger par défaut avec votre propre icône.

Méthode 1

1. Créer l’icône que vous voulez
Vous n'avez pas besoin d'un logiciel spécial pour le concevoir. Il existe de nombreux sites générateurs de favicon en ligne.
cliquez ici pour consulter la liste des générateurs de favicon. Vous pouvez choisir celui que vous aimez.

2. Faites l'upload de votre favicon sur l'un des hébergeur d'images ( ex: Photobucket, Imageshack, Flickr etc...)

3. Allez à Présentation > Modifier le code HTML
Chercher (avec CTRL+F) le code suivant :
<b:skin><![CDATA[/*

4. Insérez le code qui suit juste avant le code précédant
<link href='FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Et changez FAVICON-URL avec l'url de votre favicon.

5. Enregistrez le modèle et afficher votre blog.


Méthode 2

1. Allez à Présentation > Éléments de la page
En haut à gauche, cliquez sur Modifier
Favicon Dans Blogger  
Et faire uploader votre icône
2. Cliquez sur Enregistrer et affichez votre blog.

Générateur De Favicon Gratuit En Ligne

Générateur De Favicon
C'est cette petite image qui s'affiche devant votre URL dans les navigateurs (voir exemple ci-dessous) et qui vous identifie immédiatement auprès de vos visiteurs. Cette petite image, au format .ico, apparaît également devant le nom de votre site lorsque votre visiteur vous place dans ses favoris, ce qui lui permet de vous retrouver très facilement par votre identité visuelle.
 
Favicon Generator


Pourquoi utiliser un favicon

Vous vous distinguez des sites qui n'en utilisent pas, votre site a un look plus professionnel, affirme son identité, et vos visiteurs réguliers vous retrouvent facilement dans leurs favoris.

Comment générer un favicon

Pour mettre en place ce type d'icône sur votre propre site web il n'y a rien de plus simple. Vous pouvez utiliser certains outils de création d'image tel que Photoshop, Gimp ou même Irfanview pour faire des favicons alors qu'il y a de nombreux sites web qui peuvent vous aider à créer votre propre favicon pour votre site / blog.

Voici quelques-uns des principaux générateurs de favicon :

Favikon
Favicon Generator
DeGraeve Favicon Generator
Favicon Creator
Favicon Generator & Gallery
Favicon from Pics
Favicon.ico Generator
Favicon2dots
Favicon Tool
WebScriptLab Favicon Generator
Faviconsfor
Graphics Guru Favicon
Genfavicon

Pour la plus part des navigateurs

Il suffit de créer une image au format .png ou .gif (formats standard à utiliser).
Vous pouvez choisir plusieurs dimensions : 16*16 ou 32*32 (pixels).

Pour Internet Explorer

Pour IE, il faut utiliser une image au format .ico et de dimensions 16*16 (pixels).

26 févr. 2012

Comment Supprimer La Barre De Navigation Blogger

Blogger Navbar

Par défaut, Blogger est livré avec une barre de navigation situé en haut de page.
Le Navbar Blogger (n'apporte 'presque' rien à votre blog !)
de plus elle n'est pas très esthétique.
Cette barre de navigation peut être supprimé (ou caché) en utilisant quelques techniques simple de CSS.





Comment supprimer la barre de navigation Blogger Navbar


Pour supprimer la barre de navigation de votre blog, procédez comme suit:

1. Connectez-vous à votre compte Blogger
2. Allez à Présentation > Modifier le code HTML
3. Chercher (avec CTRL+F) le code suivant :
]]></b:skin>
4. Remplacez ce code avec le code suivant :
#navbar-iframe {height:0;visibility:hidden;display:none}
]]></b:skin>
5. Enregistrer le modèle et affichez votre blog.

La barre ne sera plus affichée. En fait, elle est toujours là mais elle ne se voit plus.

25 févr. 2012

Installer Des Gadgets-Widgets Sur Blogger Blogspot

Installer Widget Blogger
Les Widgets ou Gadgets sont de petits programmes ou applications vous permettent d’enrichir votre site web/blogue, votre page personnalisable (igoogle, webwag, netvibes,...), votre services de réseaux sociaux, le bureau de votre PC/Mac, votre téléphone, etc... Ils peuvent vous informer sur la météo, les actualités, la bourse, et pleins d'autres choses nécessaires au quotidien.
Sur votre blog Blogger, un gadget peut être appelé un widget ou une élément de page. Mais c'est la même idée: un peu petit morceau de code qui fait quelque chose d'utile. Vous pourriez mettre un gadget dans un message, mais le plus souvent on les trouve dans la barre latérale, dans l'en-tête ou dans le pied de page.

Comment Installer Un Gadget Sur Blogger Blogspot

Pour ajouter un gadget à votre blog, Allez à "Présentation" > "Éléments de la page" (ou "Mise en page" dans la nouvelle interface Blogger); Là, vous verrez tous les endroits où vous pouvez mettre votre gadget.

Cliquez sur le lien "Ajouter un gadget" situé en haut de la zone que vous choisissez, la fenêtre d'ajout de gadget s'ouvre :
List Blogger Gadgets
Choisissez un gadget de la liste, ou l'un des onglets à gauche:
  • Vous devrez peut-être faire défiler la liste pour trouver celui qu'il vous faut.
  • Ne pas utiliser l'outil de recherche dans la liste pour trouver le gadget que vous souhaitez - il peut parfois ne pas fonctionner correctement et ne montre que les gadget des tiers et pas les officiels de Blogger.
  • Chaque gadget dans la liste a une source: certains sont de Blogger.com. Certains sont d'autres entreprises reconnues (p. ex Amazon.com), mais certains sont des individus, tout comme vous et moi. Le danger avec un gadget provient des individus, c'est que vous n'avez aucun moyen de regarder le code derrière lui, de sorte que vous ne pouvez pas décider s'il est sécuritaire ou non.
Je vous conseille d'installer les gadgets fournis par Blogger.com, ou d'autres sociétés bien connues.

Sélectionnez le gadget en cliquant sur le petit signe bleuet faites les configurations nécessaires.

Installer un widget externe
Vous trouverez peut être d'autres gadgets utiles dans le net et qui sont accompagnés avec leurs code source. Pour ajouter ces widgets à votre blog Blogger procédez comme suit:

1 - Connectez vous à votre espace d'administration
2 - Choisissez le blog sur lequel vous souhaitez intervenir
3 - Allez à "Présentation" > "Eléments de la page" > et cliquez sur "Ajoutez un gadget"
   * si vous utilisez la nouvelle interface blogger, choisissez l'onglet "Mise En Page"
4 - Dans la liste proposée par Blogger, choisissez le gadget "HTML/Javascript"
5 - C'est dans cette zone qu'il faut recopier le code HTML, cliquez ensuite sur "Enregistrer".

22 févr. 2012

Ajouter Widget Horlogue Pour Votre Blog

Souhaitez-vous ajouter un widget horloge pour votre blog/site ?
Voici de magnifiques Horloges qui ne contiennent ni publicité ni logos et qui ne sont même pas cliquables.
Ces Widgets affichent l’heure en utilisant l’horloge interne de l’ordinateur du visiteur donc pas besoin de choisir un fuseau horaire par défaut...








<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/226655.swf">
<embed src="http://www.csalim.com/clocks/226655.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/985396.swf">
<embed src="http://www.csalim.com/clocks/985396.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/189466.swf">
<embed src="http://www.csalim.com/clocks/189466.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/633993.swf">
<embed src="http://www.csalim.com/clocks/633993.swf" width="200" height="200">
</embed>
</object>
 

<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/118647.swf">
<embed src="http://www.csalim.com/clocks/118647.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/301788.swf">
<embed src="http://www.csalim.com/clocks/301788.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/945910.swf">
<embed src="http://www.csalim.com/clocks/945910.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/267241.swf">
<embed src="http://www.csalim.com/clocks/267241.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/119643.swf">
<embed src="http://www.csalim.com/clocks/119643.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/548744.swf">
<embed src="http://www.csalim.com/clocks/548744.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/143361.swf">
<embed src="http://www.csalim.com/clocks/143361.swf" width="200" height="200">
</embed>
</object>


<object width="150" height="150">
<param name="movie" value="http://www.csalim.com/clocks/205420.swf">
<embed src="http://www.csalim.com/clocks/205420.swf" width="200" height="200">
</embed>
</object>

Comment ajouter un widget horloge pour votre blog Blogger


connectez-vous à votre blog et allez à

1. Présentation > Éléments de la page > "Ajouter un gadget"
2. Sélectionnez HTML/Javascript
3. Collez le code de l'horloge dans le pop up qui s'ouvre
4. Cliquez sur Enregistrer

Widget Google Traduction Pour Blogger


Google translate widget est créee par Google pour traduire votre blog blogger à n'importe quelle langue.

 






Comment Ajouter widget google translate à blogger


premièrement, connectez-vous à votre blog blogger et allez à

1. Présentation > Éléments de la page > "Ajouter un gadget"
2. Sélectionnez HTML/Javascript
3. Collez le code ci-dessous dans le pop up qui s'ouvre

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script><p>
<small><a target="_blank" href="http://theblogueur.blogspot.com/2012/02/google-translate-widget-for-blogger.html">
+</a>
<a href="http://theblogueur.blogspot.com/2012/02/google-translate-widget-for-blogger.html">
Obtenir ce Widget</a></small></p>

Finalement cliquez sur Enregistrer

20 févr. 2012

Comment Revenir à L'ancienne Interface Blogger

Ancienne Interface Blogger
Nous allons voir dans cet article comment revenir à l'ancienne interface de Blogger.
Tout d'abord, vous devez utiliser www.blogger.com et non pas draft.blogger.com;
Cliquez ensuite sur la petite icône "Paramètres" située en haut à droite de votre tableau de bord et choisissez "Ancienne Interface Blogger".








Ancienne Version Blogger
Même si l'ancienne interface n'est pas très esthétique, elle est plus claire que la nouvelle et plus facile d'y trouver ce qu'on cherche...

Comment Supprimer "Fourni Par Blogger"

Supprimer Blogger Attribution
Blogger affiche un lien "Fourni par Blogger" sur votre blog. Ce lien est généré par le widget "Attribution" qui est installé par défaut même si vous n'utilisez pas leur outil de création de modèles.











Comment Supprimer Le Widget "Fourni Par Blogger"

On ne peut supprimer ce widget qu'à partir du code HTML du blog.
Allez donc à "Présentation" > "Modifier le code HTML"
et sans cocher la case "Développer des modèles de Gadgets" cherchez (CTRL+F) le code suivant et supprimez-le :
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
Blogger va vous demander si vous voulez supprimer le widget Attribution, cliquez sur Supprimer les Widgets
Supprimer Blogger Crédits
Sorted!

19 févr. 2012

Comment Supprimer Un Blog Blogger

Supprimer Blog Blogger
Pour supprimer entièrement votre blog, ouvrez l'onglet "Paramètres" | "Général". Vous devez être absolument certain d'être sur le blog concerné et de vouloir le supprimer définitivement de votre compte. Cliquez ensuite sur Supprimer le blog, puis confirmez en cliquant sur OK.









Delete Blogger
Si vous utilisez la nouvelle interface Blogger, cliquez sur le menu déroulant à côté de l'icône "Liste Message" grise, sélectionnez "Paramètres" | "Général", puis cliquez sur "Autres" afin d'accéder à l'option de suppression de votre blog.

Si vous souhaitez récupérer votre blog après l'avoir accidentellement supprimé, vous disposez d'un certain délai pour le restaurer. Imaginons que vous avez 5 blogs et que vous en avez supprimé un. Accédez au tableau de bord qui répertorie l'ensemble de vos blogs, puis recherchez la ligne suivante au bas de la page : "Affichage du 4 sur 5 blogs - Tout afficher". Lorsque vous cliquez sur "Tout afficher", votre blog supprimé apparaît dans la liste, accompagné de l'option "Annuler la suppression de ce blog". Une fois que vous avez sélectionné cette option, tout rentre dans l'ordre.
Source : Centre d'aide Blogger

Sauvegarder Une Copie De Votre Blog Blogger

Export Blogger Blog
Il est fortement conseillé de sauvegarder votre blog Blogger au cas où il serait suspendu par Google, qu'il soit piraté ou s'il vous arrive de supprimer par erreur des articles ou des commentaires.

Si vous êtes dans une situation pareil, vous ne pouvez plus restaurer le contenu de votre blog sans avoir une copie de sauvegarde.







Comment Sauvegarder Une Copie De Votre Blog Blogger

Procédez comme suit pour sauvegardez les articles, les commentaires et les préférences de votre blog

Connectez vous à votre tableau de bord Blogger et allez dans "Paramètres";
Sous l'onglet "Général" cliquez sur "Exporter le Blog".
Download Blog Blogger

Cliquez ensuite sur "Télécharger le Blog" et enregistrez le fichier .xml sur votre disque dur.
Copie De Blog

Vous pouvez restaurer votre blog en utilisant ce fichier. Il vous permet aussi de migrer vers d'autre plateforme de blog tel que Wordpress , Joomla...

Déplacer Votre Blog WordPress Dans Blogger

Wordpress Vs Blogger
Dans ce tutoriel nous allons voir comment migrer un blog de WordPress vers Blogger.

ps : - wordpress blogging vs blogger blogging c'est un autre débat que nous allons voir peut être dans un prochain article.
      - la taille du fichier de votre blog doit ne pas dépasser le 1MB.







Donc, voici les instructions étape par étape sur la façon d'exporter tous les messages de votre blog à partir de Wordpress à Blogger en seulement quelques minutes.

Étape 1 : Sauvegardez votre blog blogger
Avant de commencer la migration vous devez sauvegarder une copie de votre blog blogger.
Pour ce faire, dans la rubrique paramètre cliquez sur "exporter le blog" et téléchargez le fichier xml de votre blog :



Étape 2 : Exporter votre blog wordpress
Connectez-vous à votre espace d'administration WordPress, dans le menu gauche cliquez sur "Outils" et choisissez l'option "Exporter"


Puis téléchargez le fichier d'export
Wordpress va créer un fichier d'exportation, qui n'est pas compatible avec Blogger.
Enregistrez le fichier dans un dossier sur votre disque dur (rappelez-vous de nom du fichier et où vous l'avez enregistré!).

Étape 3 : Allez dans la page de conversion
Cliquez sur le lien suivant pour allez à la page de conversion
http://wordpress2blogger.appspot.com/


Cliquez sur "Browse" pour sélectionner le fichier wordpress que vous avez exporté et ensuite cliquez sur "Convert" pour faire la conversion.
Attendez quelques instants jusqu'à la fin de conversion puis téléchargez le nouveau fichier généré sur votre ordinateur.

Étape 4 :Importer le fichier converti à Blogger
Dans votre tableau de bord Blogger cliquez sur "paramètres" - "Importer le blog"

Sélectionnez le fichier à importer,
Entrez le code Captcha,
Si vous souhaitez publier immédiatement tous les messages, cochez la case,
Cliquez sur "Importer le blog".

Sorted!

Tutoriel Créer Un Blog Blogger


Blogger est une plateforme logicielle en ligne gratuite permettant à un internaute de publier facilement et simplement un blogue. C'est un service qui offre une multitude d'outils permettant à des personnes de publier des informations sur le web.
Blogger, est l'un des rares services de blog gratuit sans publicité. Depuis 2003, Google est le propriétaire de Blogger.
Blogger permet l'hébergement de blogs sur son site Blogspot ou sur un serveur au choix de l'utilisateur (via FTP ou SFTP).



En suivant ce tutoriel, nous allons pas à pas créer et paramétrer un blog sur blogger blogspot.

Comment créer un blog blogger

1. Ouvrez la page www.blogger.com


2. La création d'un blog chez blogger nécessite d'avoir un compte google. Alors, si vous avez déjà un compte (par exemple une adresse e-mail gmail) Alors connectez-vous à Blogger puis passez directement à l'étape 3.

Si vous n'avez pas encore de compte Google, vous allez en créer un. Pour ce faire, cliquez sur "Inscription", entrez les informations demandées et cliquez sur "Continuer"
Voilà, maintenant vous avez un compte Google;
Passez à l'étape 3.

3. Entrez un nom pour votre blog, et le nom du sous-domaine puis cliquez sur "Continuer"

4. Choisissez une template (modèle) pour votre blog, puis cliquez sur "Continuer"

5. Félicitation, votre blog Blogger a été créé, cliquez maintenant sur "Utiliser mon blog"

6. Vous allez être redirigé vers la page de création d'articles ;
Pour ajouter un nouveau article, il suffit de choisir son titre et de saisir le contenu

Ce tutoriel s'arrête là, dans un prochain article nous allons découvrir ensemble comment installer un nouveau modèle pour Blogger Blogspot.
Si vous avez des questions, n'hésitez pas de les mettre dans des commentaires.

Blog : Définition Et Présentation

blog icon
Un « blog » (en français blogue, journal web, carnet web ou en encore cybercarnet), est un type de site web, ou une partie d'un site web, permettant à un internaute de publier facilement et simplement des informations en ligne sous forme de journal.

Un blog est censé contenir régulièrement de nouveaux brèves, appelés aussi billets, notes ou encore articles, agglomérés au fil du temps sur un sujet donné.
Sur un blog, les billets, sont publiées dans un ordre chronologique, c'est à dire que les billets les plus récents sont affichés en haut de page, puis suivent les messages les plus anciens.  

Le blog est donc une page web qui s’appuie généralement sur un outil dynamique permettant de gérer la mise en page du contenu, dans lequel son auteur (le blogueur) publie des actualités, des liens vers des sites web ou de courts textes de sa création.
Le blogueur a aujourd'hui loisir de mélanger textes, hypertextes et éléments multimédias(images, son, vidéo, applet, ...) dans ses billets.

Ce qui fait la particularité d'un blog par rapport à un site web, c'est la possibilité pour les lecteurs de réagir aux informations publiées, car chaque visiteur d'un blog peut ou bien laisser des questions ou commentaires sur le blog lui-même, ou bien contacter le blogueur par courrier électronique, ce qui fournit aux blogs une grande réactivité et une grande richesse.

La création d'un blog ne nécessite pas des compétences particulières en informatique. En effet, le principe des blogs est basé sur l'utilisation d'un outil en ligne permettant d'insérer et de mettre en forme ses articles. Ainsi, pour créer un blog, il suffit, dans un premier temps, de trouver un hébergeur de blogs et d'y ouvrir un compte et dans un second temps, de publier le contenu grâce aux outils mis à disposition.

La liste ci-dessous (non exhaustive) présente les principaux hébergeurs de blog. Le choix d'un hébergeur dépend du coût (certains sont gratuits), des fonctionnalités offertes et du look'n'feel (spécifications) de son interface. 

Blog4ever
Blogger (gratuit) --> nécessite une inscription sur Google
BlogSpirit (gratuit ou formule payante)
CanalBlog (gratuit)
Cigogne (gratuit)
Eklablog (gratuit)
Faistonblog (gratuit et options payantes)
Haut et Fort (gratuit ou formule payante)
Joueb (gratuit ou formule payante)
Over-Blog (gratuit et sans publicité)
Skyrock blog (gratuit)
Space-blogs (gratuit)
Typepad (payant)
ViaBloga (payant)
WordPress (gratuit ou formules payantes)
20Six (gratuit ou formule payante)

18 févr. 2012

Ajouter Un Menu De Navigation Horizontal Dans Blogger

Ajouter Menu Navigation Horizontal Blogger
Ajouter un Menu de Navigation Horizontal à votre Blog Blogger.
Le menu de navigation est le cœur de tout page web car il offre le chemin vers toutes les pages importantes de votre Blog.
Je vous ai apporté un total de 30 menus de navigation de haute qualité avec leur codes HTML et CSS.
Il vous suffit de copier et coller les codes et c'est tout!





Comment Ajouter Un Menu De Navigation Horizontal Dans Blogger

Comme mentionné ci-dessus, il suffit de copier/coller le code du menu et le mettre dans un gadget HTML/JavaScript juste au dessous de l'en-tête de votre blog comme indiqué dans l'image suivante :
Add Gadget Blogger

Ensuite vous devez modifier cette partie du code HTML dans tous les codes ci-dessous :
<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>
Remplacer le signe # avec les liens/l'URLs des pages et Link 1 Link 2 ... avec les titres des pages.
Si vous souhaitez ajouter ou supprimer un onglet, il suffit d'ajouter ou de supprimer cette ligne :
<li><a href="#" ><span>Link n</span></a></li>

Menus De Navigation Horizontales HTML/CSS

Vous pouvez voir la démo des menus dans les liens suivants :
Live Démo 1
Live Démo 2

Menu De Navigation 1

Menu Horizontal 1
<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>

Menu De Navigation 2

Menu Horizontal 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>

Menu De Navigation 3

Tab Menu Horizontal
<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>

Menu De Navigation 4

Menu De Navigation 4
<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvC_Xa-vHI/AAAAAAAACw0/qVeZI3gdWQM/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <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>

Menu De Navigation 5

Tab menu Navigation
<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvC_Xa-vHI/AAAAAAAACw0/qVeZI3gdWQM/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <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>

Menu De Navigation 6

<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>

Menu De Navigation 7

<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>

Menu De Navigation 8

<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>

Menu De Navigation 9

<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>

Menu De Navigation 10

<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>


Menu De Navigation 11

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvAqYEy5NI/AAAAAAAACvk/Upvw2dOoy3c/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvAqaCPITI/AAAAAAAACvo/6J1w2JWIlz0/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <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>

Menu De Navigation 12

<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_vhXlxhI/AAAAAAAACvE/mtaQIkLuioQ/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_voDXE9I/AAAAAAAACvI/sVgxX67lkGc/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <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>

Menu De Navigation 13

<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>

Menu De Navigation 14

<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>

Menu De Navigation 15

<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_kvE0faI/AAAAAAAACus/SzckKvt6x20/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_kr6m1hI/AAAAAAAACuw/YTWQEYce98E/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <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>

Menu De Navigation 16

<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>

Menu De Navigation 17

<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_bd2bmRI/AAAAAAAACuk/Y174Kut0Ngs/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_bixXsgI/AAAAAAAACuo/rQ1FvEtXTdI/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <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>

Menu De Navigation 18

<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_bRCaLKI/AAAAAAAACuc/YEWujpfd-sA/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_bSCN0jI/AAAAAAAACug/0fWPrwxSe4s/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <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>

Menu De Navigation 19

<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBVzhRH_I/AAAAAAAACwc/wnL2j0dXKHM/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBV1YKHfI/AAAAAAAACwg/3p1hsPWPSHI/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <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>

Menu De Navigation 20

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu-gCY1ZzI/AAAAAAAACuE/IYEaj-Ap9Bk/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-gKkyHOI/AAAAAAAACuI/NpLTAFOd2uQ/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <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>

Menu De Navigation 21

<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>

Menu De Navigation 22

 <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>

Menu De Navigation 23

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <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>

Menu De Navigation 24

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Liddddnk 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>Linddddkdd 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>Linddddk 7</span></a></li> </ul> </div>

Menu De Navigation 25

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 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="#"><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>

Menu De Navigation 26

<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PCVjbFI/AAAAAAAACts/MclSzL8Aza4/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9Pd4oqxI/AAAAAAAACtw/3ldOBb2QV-g/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <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>

Menu De Navigation 27

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvASky0MXI/AAAAAAAACvM/lCN12ooOQ_o/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvASjsu31I/AAAAAAAACvQ/h_VW2YzIljU/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <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>

Menu De Navigation 28

<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>

Menu De Navigation 29

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvASpRftuI/AAAAAAAACvU/Zu86nlwjvhQ/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvAS5-xgjI/AAAAAAAACvY/f0YjqMbxzqY/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <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>

Menu De Navigation 30

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBJ_dMfYI/AAAAAAAACwU/ROgYM1pOzzo/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBJ7Gdz_I/AAAAAAAACwY/o6Vlnp00pyk/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <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>

Advertissement