PapyClic - Design

PapyClic - Design

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

 pageOnglets2-1.png

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.

https://static.blog4ever.com/2012/06/704535/Bouton-5navigateurs.png

 

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. 

 

 

 

Ci-dessous le code HTML

 

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

https://static.blog4ever.com/2012/06/704535/artfichier_704535_2137173_20130511505983.png

 

 

 

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

 

 

insertionStyle.png

 

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

 

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
  // menu onglets dans articles ou page d'accueil et catégorie
  $("#menuTab-2 .tab_content").hide();
  $("#menuTab-2 ul.tabs li:first").addClass("active").show();
  $("#menuTab-2 .tab_content:first").show();

  // Evènement clic
  $("#menuTab-2 ul.tabs li").click(function() {
     $("#menuTab-2 ul.tabs li").removeClass("active");
     $(this).addClass("active");
     $("#menuTab-2 .tab_content").hide();
     var activeTab2 = $(this).find("a").attr("href");
     $(activeTab2).fadeIn();
     return false;
  });
});
// ]]></script>

 

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

 

 

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

 

ongletsModel2-3.jpg

 

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.

 

pageOnglet2-2.jpg

Changez les textes des onglets dans en HTML.

 

 pageOnglets3.jpg

 

Bien respecter la zone pour insérer le contenu.

Utilisez les outils du composeur pour rédiger le contenu.

 

 

pageOnglet2-3.jpgDans le composeur ...

 

Sur le blog :

pageOnglets5.jpg

 

 

pageOnglets4.jpg

Dans le composeur ...

 

Sur le blog :

pageOnglets6.jpg
 
 

 

Exemple de réalisation :

 

Onglets2Simon.jpg

 

 

HautPrécédente

 

 



10/11/2013
33 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 153 autres membres