Template pour Blogger avec grille, date perso, responsive et plus

J'ai construit un modèle pour des sites types Blogger, idéal pour les journaux, des sites d'information mais peut être pour autre. J'ai intégré plusieurs éléments qui sont très recherchés sur le net : grille (grid) avec les hauteurs égales, chaque article avec une date personnalisable (et en format français), avec un bouton "haute de page", avec des pages numérotées, avec ou sans une troisième colonne et tout est adapté aux portables (smartphones, tablettes : responsive design).

 
 
 
 
 
 

Caractéristiques

  • Le template contient trois colonnes. Faites attention de ne pas rajouter des éléments plus que 800 px de haut dans la 1ère colonne car elle est fixée à partir de 1023px de largeur de l'écran et plus ! Si non, les visiteurs de votre site ne vont pas voir une partie de la colonne.
  • Les articles sont affichés en grille (grid) sur l'accueil et sur les pages de recherche.
  • La grille affiche des cellules à hauteur égale.
  • Les cellules affichent une vignette (si une image existe dans le message original), un extrait et un lien "continuer à lire" générés.
  • Les messages sont tous affichés avec une date sans heure et minute et en format français. (Merci de penser au réglage de format de date dans votre admin Blogger !)
  • Les pages sont numérotées sur la page d'accueil.
  • Le bouton est installé qui apparait en fondu en défilant la page vers le bas et qui défile la page automatiquement en douceur vers le haut (smooth scroll "to top" button).
  • Les éléments du template se redimensionnent automatiquement (responsive), vous pouvez désactiver la version mobile dans le réglage de l'admin Blogger.
  • Il y a une section au pied des articles (footer) ET également au pied des pages.

 

Avant l'installation

  • Avant l'installation de ce template, pensez de faire une sauvegarde de votre template originale pour pouvoir le réinstaller en cas de problème ! Faites une sauvegarde de tout le contenu de vos widgets également car le News Blogger Template peut les modifier à l'installation ! Probablement vous devez réinstaller/recréer/réécrire tous vos widgets existants avant l'installation.
  • Quelques fonctionnes sont garanties par des scripts qui peuvent être changés au cours du temps et qui peuvent cesser de fonctionner. En cas d'une erreur, merci de me contacter dans un commentaire de cet article ci-dessous.

 

Installation, réglages

  • Je ne sais pas comment réagit le template en l'affichant dans l'éditeur des modèles de Blogger, je vous conseille de l'installer directement dans l'éditeur HTML.
  • Quand vous allez vous rendre visite à la première fois la page "Mise en page" de l'admin de votre blog, elle vous montrera peut-être la mise en page par défaut au lieu de celle du News template et elle peut vous montrer une erreur à la première sauvegarde. Rafraichissez la page pour la rendre en ordre !
  • Pour numéroter les pages, il faut régler le nombre d'articles que vous voulez afficher sur une page 1. dans l'admin Blogger, puis 2. dans la page XHTML dans le script :
    <!-- Numbered Blog-Pager -->
    <script type='text/javascript'>
    //<![CDATA[
        var postperpage=9;
        var numshowpage=5;
        var upPageWord="+anciens";
        var downPageWord="+récents";
        var urlactivepage=location.href;
        var home_page="/"
    //]]>
    </script>

    Le template affiche 9 articles/page par défaut. Options du réglage dans le script :

    • postperpage = nombre d'articles par page
    • numshowpage = nombre de pages montrées en chiffre
    • upPageWord = "le mot pour les articles plus anciens"
    • downPageWord ="le mot pour les articles plus récents"
  • Pour que la date s'affiche correctement, rendez-vous à l'onglet "Mise en page", puis modifiez l'article du blog dans le widget. Cochez la date en choisissant le format jj/mm/aaaa, cochez également l'affichage des commentaires, aussi des libellés et décochez les autres options.
  • J'ai fait le design du widget archives pour l'affichage "Liste condensée". Dans le widget, choisissez l'option avec mois et année. Si non, vous devez peut-être changer le design du widget pour un meiller style.
  • Vous pouvez changer la phrase "Le magazine pour connaitre le monde..." dans la page XHTML entre les balises <header></header>.
  • Vous pouvez changer le texte du lien "Continuer à lire" dans la page XHTML entre les balises <span class='readmore'></span>.
  • Vous pouvez changer l'image du logo dans la page XHTML dans entre les balises
    <div class='column-left-inner'>
        <div class='logo'>
            <img alt='logo' src='http://1.bp.blogspot.com/-IF-_364GRfU/U2v8gpiFoYI/AAAAAAAAIqg/Ov9Bz2hWPBA/logo.jpg' title='logo'/>
        </div>...

  • Si vous voulez changer des styles SEULEMENT sur les pages type "index" (page d'accueil, recherche des libellés ou autres), vous pouvez faire entre les balises suivants (qui se trouvent après la fermeture de la balise "skin" dans le <head>) :
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <style type='text/css'>
    /*<![CDATA[*/

    /*]]>*/
    </style>

    <b:else/>... ...

  • Si vous voulez seulement 2 colonnes au lieu de trois, vous devez éliminer la colonne souhaitée avec display: none; puis ajuster la largeur et la marge (margin) des deux autres colonnes, par exemple :
    .content-outer {
        text-align: center;
    }
    .column-left-outer {
        display: none;
    }
    .column-center-outer {
        margin: 200px 0 0;
        width: 74%;
    }
    .column-right-outer {
        width: 24%;
    }

  • Les dates sont personnalisables parce que les jours, mois et années sont séparés. Si vous voulez un style "calendrier" par exemple, les éléments sont les suivants :
    <span class="date-header">
        <div id="Date">
            <strong class="date_day">jour</strong>
            <strong class="date_month">mois</strong>
            <strong class="date_year">année</strong>
        </div>
    </span>

 

Bug, support

Si vous avez des difficultés ou des questions ou si vous trouvez un bug, merci de m'écrire un e-mail via la page de Contact ou écrire un un commentaire dans cet article que les autres gens puissent voir aussi les questions/réponses !
Important : si vous voulez poster un commentaire avec des codes, merci de les mettre entre les balises <code></code> !

 

Licence, Conditions

Le template est gratuit.
Tout le monde peut utiliser et modifier les fichiers téléchargés, l'auteur du template ne pourra pas être tenu responsable des modifications et de l'utilisation (sous réserve de ses propres risques et responsabilité).

Démo / Téléchargement

Cliquez ici pour la démo !
Cliquez ici pour le téléchargement !

Les commentaires sont fermés.