Labs - Accueil Contenu Dynamique

 

ACCUEIL <<< DizPerso Labs <<<


Gestion des champs dynamiques


Dans la page d'accueil, vous avez la possibilité de présenter l'activité de votre site/blog sous forme de listes, alimentées par des champs dynamiques.
La liste de ces champs est en dessous de l'éditeur de la page d'accueil...

  


 - Vous avez 4 listes possibles : 5 derniers articles, les 5 derniers commentaires articles, les 5 articles les plus consultés, les 5 derniers commentaires photos, ainsi que les 5 derniers sujets du forum.

 - Le champ des 5 dernières photos se présente sous forme de diaporama.
 - Le champ des 5 photos les plus lourdes se présente sous forme de diaporama.
 - Le moteur de recherche pour les articles est un formulaire.
 - Le nombre total de visiteurs est uniquement un nombre.


Les listes dynamiques


Nous pouvons gérer la présentation des 4 listes, grâce au CSS, ci-dessous en exemple, le code qui sera actif sur ces 5 champs, la règle est une classe représentée par un point devant son nom : .dynamique

Le code CSS à ajouter à votre feuille de style :     .dynamique ul {list-style-type : square;}



En version Siver ou Gold ,vous avez la possibilité de mettre ce code  dans la bordure gauche/droite, mais avec les balises HTML comme ci-dessous.

<style type="text/css">
<!--
.dynamique ul {list-style-type : square;}
-->
</style>

J'ai mis comme type de puce "square" soit un petit carré, mais vous pouvez mettre :
       "circle" soit un petit cercle
       "disc"   soit un cercle plein

Vous trouverez plus bas l'exemple de l'emploi de ces puces et même la possibilité de mettre des images, mais en changeant un peu le CSS :

      .dynamique ul {list-style-image : url( adresse image sur internet) ;}

Cependant dans ce cas vous devez prévoir un espace pour que l'image s'affiche dans la DIV créée par le système, la valeur de cet espace sera en fonction des dimensions de l'image.

.dynamique
{
padding-left:25px;
}
.dynamique ul
{
list-style-image:url(https://diztest.blog4ever.com/blog/url_artimage-205392-1212816-229.html);
}


Dans le composeur de la page d'accueil en mode texte, tapez le texte, titre de la liste, vous pouvez le centrer, comme dans mon exemple, en le sélectionnant et en cliquant sur le bouton d'alignement "Centré". Puis vous copiez/coller le code du champ. Même opération pour chaque champ que vous souhaitez insérer sur votre page d'accueil.
Voilà, c'est tout, le système fait le reste. 


Mes 5 derniers articles
Top Articles
Les 5 derniers commentaires Articles
  • PapyClic : Gilles j'ai répondu sur le forum de mon blog. dans l'article Partie "Cadre"
  • gilles72 : comment je vois DP1 ou DP2 ? dans l'article Partie "Cadre"
  • PapyClic : Ok ! MasterDesign mais sous quel modèle DP1 ou DP2 ? dans l'article Partie "Cadre"
  • gilles72 : Merci pour ta réponse, je suis en Master Design dans l'article Partie "Cadre"
  • PapyClic : Bonsoir Gilles, Ce blog est dédié au DizPerso1, qui est ancien, il faut voir si ton blog est sous... dans l'article Partie "Cadre"
Les 5 derniers commentaires Articles

Nous pourrions nous en tenir à ces règles génériques  sur la  "class"  .dynamique, mais il existe des divisions ou blocs balises HTML "DIV" et dont le nom est précédé par un dièse #.
comme :  #dynamique_5derniers_articles

et les autres :
                   #dynamique_top_articles
                   #dynamique_artcommentaires
                   #dynamique_imgcommentaires
                  
Ce qui va permettre de gèrer séparément les différentes listes, de variés leur présentation, à chacun de vous de créer son style en harmonie avec le design du blog.
Si vous êtes arrivés à ce stage c'est que vous avez déjà utilisé un maximum de propriétés du CSS et que vous connaissez l'action de chaque attribut, je ne vais pas détailler, mais pour vous aider je mets à votre disposition ci-dessous, les codes CSS et HTML que j'ai créé pour mes blogs et vous pourrez voir le résultat.
 


Pour DizTest, 3 listes seulement, ci_dessous le code CSS commenté :

<style type="text/css">
<!--
/* ===================================
Les champs dynamiques
Règles communes à tous les champs
=================================== */
/* marges et bordures pour le bloc complet */
.dynamique
{
margin: 5px 15px 5px 15px;
padding : 5px;
border : 3px inset #FFFF00;
}

/* type de puce par défaut
couleur du fond recevant les éléments
marge intérieure sur les 4 côtés */
.dynamique ul
{
list-style-type : square;
background : #990000;
padding : 5px;
}

/* mettre un espace au début de l'élément de liste
et règlage la hauteur de ligne  */
.dynamique ul li
{
padding-left : 5px;
line-height : 25px;
}

/* mettre un espace au début
et à la fin du texte du lien  */
.dynamique ul li a
{
padding : 0 3px 0 3px;
}


/* ==============================
  Spécifique à chaque champ
============================== */
/* puces "carré" pour Commentaires articles */
#dynamique_5derniers_articles ul
{
list-style-type : square;
}

/* puces "cercle" pour Top articles */
#dynamique_top_articles ul
{
list-style-type : circle;
}

/* puces "disque" pour Commentaires articles */
#dynamique_artcommentaires ul
{
list-style-type : disc;
}
-->
</style>



Sur DizTest, le code HTML avec un plus car j'utilise du Javascript, accepté par le composeur de vos pages, j'ai écris un article sur ce code lien 

Les trois listes ont chacune une puce différente et vous pouvez également mettre des puces images ou icônes voir plus loin les 5 listes sur BRICABRAC,  5 images différentes. Vous trouverez sur Internet des sites proposant des images pour puces, un parmi d'autres lien.


<h3>LES NOUVEAUTES</h3>
<div id="nouveautes" align="left"> <p style="background-color:transparent; color: rgb(255, 255, 0);"></p><br>

<!-- 5 derniers -->
<a href="javascript:show(1)"><h4 style="background:url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/or/fd_8.png) repeat ;">&nbsp;Derniers articles&nbsp;&gt;&gt;&gt;</h4></a>
<div style="margin: auto; overflow: auto; width: 100%; display:none; color: rgb(255, 102, 0);" id="1" align="left"></div>
<!-- fin derniers -->

<!-- top 5 -->
<a href="javascript:show(2)"> <h4 style="background:transparent url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/or/fd_8.png) repeat;">&nbsp;Top 5 des Articles&nbsp;&gt;&gt;&gt;</h4></a>
<div style="margin: auto; overflow: auto; width: 100%; display:none; color: rgb(255, 102, 0);" id="2" align="left"></div>
<!-- fin top 5 -->

<!-- commentaires articles -->
<a href="javascript:show(3)"> <h4 style="background:transparent url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/or/fd_8.png) repeat;">&nbsp;Commentaires articles&nbsp;&gt;&gt;&gt;</h4></a>
<div style="margin: auto; overflow: auto; width: 100%; display:none; color: rgb(255, 102, 0);" id="3" align="left">
  • PapyClic : Gilles j'ai répondu sur le forum de mon blog. dans l'article Partie "Cadre"
  • gilles72 : comment je vois DP1 ou DP2 ? dans l'article Partie "Cadre"
  • PapyClic : Ok ! MasterDesign mais sous quel modèle DP1 ou DP2 ? dans l'article Partie "Cadre"
  • gilles72 : Merci pour ta réponse, je suis en Master Design dans l'article Partie "Cadre"
  • PapyClic : Bonsoir Gilles, Ce blog est dédié au DizPerso1, qui est ancien, il faut voir si ton blog est sous... dans l'article Partie "Cadre"
</div>
<!-- fin commentaires articles-->

</div>
<!-- fin nouveautes -->


Pour voir le résultat page d'accueil de DizTest



Gestion des champs dynamiques sur BRICABRAC, CSS des listes avec images sur fond transparent.

<style type="text/css">
.dynamique
{
background:url(http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/1_milieu.png) repeat;
margin: 5px 5px 5px 5px;
padding : 5px 5px 5px 40px;
color: #FFCC66;
border: 3px inset #FBB420;
}

.dynamique ul
{
list-style-image :url(http://bricabrac.blog4ever.com/blog/url_artimage-490-2465783-297.html);
margin: 5px;
padding : 5px;  
}

.dynamique ul li
{
padding-left : 5px;
line-height : 30px;
}

.dynamique ul li a
{
padding : 0 3px 0 3px;
}

.dynamique ul li a:hover
{
background : #ffffcc;
color : #0000CC;
}

#dynamique_5derniers_articles ul
{
list-style-image:url(http://bricabrac.blog4ever.com/blog/url_artimage-490-2465783-297.html);
}

#dynamique_top_articles ul
{
list-style-image : url(http://bricabrac.blog4ever.com/blog/url_artimage-490-2470030-290.html);
}

#dynamique_artcommentaires ul
{
list-style-image : url(http://bricabrac.blog4ever.com/blog/url_artimage-490-2470018-470.html);
}

#dynamique_imgcommentaires ul
{
list-style-image : url(http://bricabrac.blog4ever.com/blog/url_artimage-490-2470019-454.html);
}

#dynamique_forum ul
{
list-style-image : url(http://bricabrac.blog4ever.com/blog/url_artimage-490-2470025-484.html);
}
</style>

Code HTML des champs dynamiques sur BRICABRAC, les listes avec images sur fond transparent.

<h3>&nbsp;&nbsp;
LES NOUVEAUTES</h3>
<center>
<!-- 5 derniers -->
<a href="javascript:show(1)">
<span style="font-size: 14pt;">&nbsp;Derniers articles&nbsp;</span>
<img alt="Cliquez pour voir" src="https://bricabrac.blog4ever.com/blog/url_artimage-490-2470111-1024.html" border="0"> </a><br>
<div style="margin: 5px auto; overflow: auto; width: 90%; display: none;" id="1" align="left"></div>
<!-- fin derniers -->

<!-- top 5 -->
<a href="javascript:show(2)">
<span style="font-size: 14pt;">&nbsp;Top 5 des Articles&nbsp;</span>
<img alt="Cliquez pour voir"src="https://bricabrac.blog4ever.com/blog/url_artimage-490-2470111-1024.html"border="0"> </a><br>
<div style="margin: 5px auto; overflow: auto; width: 90%; display:none;" id="2" align="left"></div>
<!-- fin top 5 -->

<!-- commentaires articles -->
<a href="javascript:show(3)">
<span style="font-size: 14pt;">&nbsp;Commentaires articles&nbsp;</span>
<img alt="Cliquez pour voir" src="https://bricabrac.blog4ever.com/blog/url_artimage-490-2470111-1024.html" border="0"> </a><br>
<div style="margin: 5px auto; overflow: auto; width: 90%; display:none;" id="3" align="left">
  • PapyClic : Gilles j'ai répondu sur le forum de mon blog. dans l'article Partie "Cadre"
  • gilles72 : comment je vois DP1 ou DP2 ? dans l'article Partie "Cadre"
  • PapyClic : Ok ! MasterDesign mais sous quel modèle DP1 ou DP2 ? dans l'article Partie "Cadre"
  • gilles72 : Merci pour ta réponse, je suis en Master Design dans l'article Partie "Cadre"
  • PapyClic : Bonsoir Gilles, Ce blog est dédié au DizPerso1, qui est ancien, il faut voir si ton blog est sous... dans l'article Partie "Cadre"
</div>
<!-- fin commentaires articles-->

<!-- commentaires PHOTOS -->
<a href="javascript:show(4)">
<span style="font-size: 14pt;">&nbsp;Commentaires Photos&nbsp;</span>
<img alt="Cliquez pour voir" src="https://bricabrac.blog4ever.com/blog/url_artimage-490-2470111-1024.html"border="0"> </a><br>
<div style="margin: 5px auto; overflow: auto; width: 90%; display:none;" id="4" align="left">
</div>
<!-- fin tcommentaires photos-->

<!-- derniers sujets FORUM -->
<a href="javascript:show(5)">
<span style="font-size: 14pt;">&nbsp;Derniers sujets du forum&nbsp;</span>
<img alt="Cliquez pour voir" src="https://bricabrac.blog4ever.com/blog/url_artimage-490-2470111-1024.html" border="0"> </a><br>
<div style="margin: 5px auto; overflow: auto; width: 90%; display:none;" id="5"  ="" align="left"></div>
<!-- fin derniers sujets -->
</center>

Pour voir le résultat de ce code sur BRICABRAC



Dans la page d'accueil vous pouvez également, insérer comme champs dynamiques :

         - un moteur de recherche

         - le nombre de visiteurs
         - le diaporama des 5 dernières photos de l'album



Champ dynamique "Recherche"


Si vous regardez bien dans le code HTML de ce champ, il est contenu dans une DIV, ayant comme identifiant, ID nommé "dynamique_recherche" et ayant une Classe nommée "dynamique".

Toutes les DIVs de la page ayant la classe "dynamique", sont gérée par la même règle de la feuille de style CSS  .dynamique, le champ recherche en fait partie.


Vous devez tenir compte de cette règle, pour une meilleur compréhension je reporte ci-dessous celle du CSS de DizTest. Comme il n'y a pas de liste(ul), ni de lien (a), il reste une seule règle avec des attributs pour les marges et les bordures. Si vous ne souhaitez pas conserver ces propriétés pour le champ "Recherche", vous devez créer une règle avec l'ID "dynamique-recherche" qui est réservé  à "Recherche" et unique dans toute la page.
Voir dans le deuxième cadre en-dessous, dans la règle #dynamique_recherche , les attributs avec les valeurs qui seront prises en compte. Je modifie uniquement les marges extérieures en mettant "auto" aux marges de gauche et de droite, ainsi la DIV sera centrée dans la partie qui la contient. Puis j'ajoute une couleur de fond, vous pouvez mettre une image de fond avec l'attribut, background-image : url(http:// adresse internet de l'image)

* Petit rappel au passage dans les attributs sous forme condensée, les valeurs  s'appliquent dans le sens des aiguilles d'une montre de la première valeur,  bord haut, bord droit, bord bas et bord gauche.

/* marges et bordures pour le bloc complet */
.dynamique
{
/* marge extérieure */
margin: 5px 15px 5px 15px;
/* marge intérieure les 4 côtés identiques */
padding : 5px;
/* bordure 4 côtés */
border : 3px inset #FFFF00
}



Code CSS de Recherche


Création des règles spécifiques à ce champ, les marges intérieures (padding) et la bordure reste la même que pour tous les champs classe  .dynamique. Pour l'exemple je rajoute une largeur et une hauteur pour redimensionner la DIV dynamique_recherche qui aura une couleur de fond et des bordures.
A l'intérieur de cette DIV, le formulaire contenant un label, un espace de saisie et un bouton. C'est 3 éléments composent le  fieldset(en vert),  là également pour l'exemple  je lui met une couleur et un cadre, se qui permet de le localiser pour bien comprendre la structure du formulaire.
L'espace de saisie en bleu et le bouton en rouge.Voir l'image plus bas, le label en jaune (Vous rechercher ?), l'espace de saisie du mot à rechercher Il y a un quatrième élément mais il n'est pas visible donc je n'ai rien paramétré.

<style type="text/css">
<!--
/* gestion du bloc contenant le formulaire */
#dynamique_recherche
{
margin: 5px auto 5px auto;
background :#D78F47; width:80%; height:50px;
}

/* gestion du bloc contenant les champs du formulaire */
#dynamique_recherche fieldset{
background:green;
margin: 15px auto 0px auto;
color:yellow;
width:90%;
border: 1px solid #fff;
}
/* Gestion de l'espace de saisie */
#dynamique_recherche input[name=mot]{
background:blue;
margin:auto;
}

/* Gestion du bouton */
#dynamique_recherche input[type=submit]{
background:red;
color:yellow
}
-->
</style

D'autres attributs existent, je les commenterai dans le "Lab" du formulaire de saisie des commentaires articles, pour faire suite au Lab sur la structure de la partie "Contenu"


Code HTML de recherche

<div id="dynamique_recherche" class="dynamique">
<form action="article-recherche-162365.html" method="post">
<fieldset>
Vous recherchez ? : <input type="text" name="mot" size="50"/>
<input type="hidden" name="act" value="rechercher"/>
<input type="submit" value="GO"/>
</fieldset>
</form>
</div>


Capture formulaire recherche


Capture: formulaire de recherche, en couleur pour bien localiser les divers élémments.



Champ dynamique "Diaporama photos"

Peu de chose à faire étant géré automatiquement par le système, juste un petit paramértrage que j'ai trouvé sympa, ajoutez cette règle à votre feuille de style.

Je diminue la marge du haut et je mets une bordure, voir le résultat sur mon blog BRICABRAC lien.


div#myGallery{
padding-top:-50px;
border:3px inset #ffffcc;
}



Champ dynamique "Nombre de visiteurs"


Ce champ est peu utilisé, étant donné que nous avons les statistiques et bien souvent nous ajoutons des compteurs de visites. Mais ce champ peut vous servir à remercier vos visiteurs d'être passé sur votre blog.


Un grand merci aux 368438 visiteurs


Voilà de quoi bien présenter tout le contenu dynamique de vos blogs pour intéresser et orienter vos visiteurs, à vos claviers et  créez de belles présentations comme vous en avez l'habitude.



Je rappelle que mes "Labs" sont des tests sur les nouvelles possibilités sur BLOG4EVER donc il est possible que certaines modifications seront faites en fonction des remarques apportées suite à vos essais personnels.


Je vous donnes rendez-vous sur le forum d'aide dans la catégorie CSS et DIZ PERSO.


Je précise également que les IDs ainsi que les diverses nouvelles DIVs, ne sont pas uniquement dans le modèle Diz Perso mais en principe dans les modèles graphiques.







28/01/2010
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 285 autres membres

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso