Générateur - Page avec onglets (modèle 2) - PapyClic

Générateur - Page avec onglets (modèle 2)

GENERATEUR de page avec Onglets modèle 2

Ce générateur crée le système d'onglets pour éviter aux lecteurs d'avoir à faire défiler la page, pour lire la liste des blocs composant l'article.
Ce système fonctionne sur toutes les versions et en principe sur tous les principaux navigateurs dans leur dernière version.

La seule information à fournir est le nombre d'onglets que vous pensez avoir besoin. Faites un test avec 6 ou 8 onglets, pour voir la présentation, vous modifierez par la suite.

Nombre d'onglets :

Ci-dessous le code HTML

Ce code est à mettre dans le Html de l'article.

Ci-dessous le CSS

Le code ci-dessus est à copier et à coller dans la zone de personnalisation du CSS de l'assistant du RapidDesign.

Espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → CSS personnalisé.

Si votre espace de gestion est ouvert, cliquez sur : lien

N'oubliez pas, après de cliquer sur "Appliquer" en bas de la colonne.

En cliquant sur le bouton ci-dessous, vous aurez un aperçu des codes générés et ainsi vous rendre compte de la présentation et du fonctionnement

Si vous souhaitez personnaliser les couleurs, vous cliquez sur les codes couleurs, vous pourrez choisir sur un ColorPicker.

La palette de 5 couleurs, ci-dessous, permet de gérer toute la présentation du bloc.
Dans le tableau vous avez les indications où seront appliquées les couleurs. Si en affichant l'exemple, le résultat n'est pas bon, vous changez les codes jusqu'à obtention de ce que vous souhaitez.

Cette opération met le code CSS automatiquement à jour, vous n'avez rien de plus à faire.

Couleur du fond		Fond onglets au survol et Texte titre	Couleur du texte
Bloc	Onglets	Fond onglets au survol et Texte titre	Onglet survol/actif et Contenu	Onglets

N'hésitez pas à visualiser les différentes variantes de couleurs que je vous propose. Le CSS est mis à jour automatiquement, vous affichez l'exemple, si le résultat ne vous convient pas pleinement, vous pouvez modifier les couleurs dans la palette et visualiser à nouveau en cliquant sur "Afficher exemple".

Pour faire fonctionner le système des onglets, il faut le script ci-dessous.

Ce code est à coller dans la bordure basse de votre blog

Espace de gestion → VOTRE BLOG → Fonctions avancées → Bordures de page.

Ce script sera actif uniquement sur le blog. Ce qui vous permet de pouvoir saisir le contenu de chaque bloc de l'article, dans le composeur. Voir les captures en fin d'article lien.

Si votre espace de gestion est ouvert, cliquez sur : lien

Pour tester le système simplement, j'ai regroupé tous les codes, Html, CSS et Javascript. Il faut les copier et les coller dans le HTML d'un article, ce qui vous permettra d'avoir une sauvegarde que vous mettez dans une catégorie masquée. Mais il est préférable de mettre les codes comme je l'ai indiqué plus haut et de faire votre article uniquement avec le code HTML.

Ci-dessous tout le code réuni, à copier.

Quelques captures ... quelques recommandations.