Blogger : augmenter la taille des miniatures version mobile

augmenter taille miniatures blogger mobile responsive

Blogger : augmenter la taille des miniatures version mobile

Vous avez un blog sur Blogger et vous détestez la mise en page mobile par défaut native à blogger ? A l’heure du responsive design il est important que vos lecteurs puissent accéder à votre contenu sur n’importe quel support : smartphones, tablettes ou ordinateurs. Ce tutoriel est fait pour vous! nous allons voir comment rendre cela un peu plus esthétique en augmentant la taille des miniatures sur version mobile en 5 min.

Comme toujours, je vous conseille vivement de faire une sauvegarde de votre thème avant toute modification. Pour cela, rendez vous dans thème > sauvegarder restaurer en haut à gauche, puis « télécharger le thème »

Activez le modèle mobile blogger

Dans un premier temps, assurez vous d’avoir activé et d’utiliser le thème blogger mobile. Pour cela rendez vous dans thème, en dessous de la fenêtre « modèle mobile » cliquez sur le petit écrou, croissez « oui, afficher le thème mobile », puis dans la liste déroulante « personnaliser »

Ajoutez le code

Maintenant, nous allons ajouter un morceaux de code, pour cela, rendez vous dans thème > modifier le code HTML et recherchez à l’aide d’un ctrl+F la balise: </head>

Collez le code ci dessous directement avant cette balise, et enregistrez.

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {
// change the dimension variable below to be the pixel size you want
var dimension = 640;
$('.mobile-index-thumbnail').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
image.attr('width',dimension);
image.attr('height',dimension);
});
});
//]]></script>
<style>
.mobile-index-thumbnail img {
width: 100% !important;
height: 100% !important;
text-align: center;
margin: 0 auto;
padding: 5px;
display: block;
}
.mobile-index-thumbnail {
float: none;
margin: 0 auto;
padding: 5px;
}
</style>

 

Et c’est tout! maintenant votre modèle mobile blogger devrait être un peu plus sympa !

Par contre, si vous avez déjà un thème personnalisé, il est possible que cela ne fonctionne pas, je me suis basé pour cet exemple sur un modèle blogger par défaut (que j’ai personnalisé, mais en gardant les mêmes classes CSS.) 

Alors l’astuce a t elle fonctionné pour vous? dites moi si ce n’est pas le cas dans les commentaires je peux essayer de jeter un oeil si vous avez un modèle personnalisé 🙂

EnregistrerEnregistrer

2 Commentaires
  • Aurélie - Mounette

    29 mai 2018 at 8 h 42 min Répondre

    Coucou, je vais le tenter mais j’ai une question, je voudrais mettre une barre de menu déroulante, si jamais tu as un code pour moi, ca serait cool.
    En fait, j’ai déjà essayé de l’activer mais vu que j’ai une personnalisé pour mon blog, ca colle pas :/
    Merci de ton aide,
    Bisous
    Aurélie
    http://www.lespetitesbullesdemavie.com

    • graphicart

      29 mai 2018 at 8 h 54 min Répondre

      Salut Aurélie, il faudrait que je fasse tout un auto la dessus. Mais sinon ce que tu peux toujours essayer :
      * Va dans « modifier le code HTML de ton thème »
      * Cherche la ligne de ton menu actuel (tu peux regarder le nom du gadget dans ta mise en page, de base c’est ‘pagelist’ chez toi ça a l’air d’être HTML1 tu dois avoir un menu codé à la main)
      * Par ex si tu as cette ligne :

      <b:widget id='HTML2' locked='false' title='MonMenu' type='HTML'>

      essayer de rajouter : mobile=’yes’ de manière à ce que cela apparaisse comme :

      <b:widget id='HTML2' locked='false' mobile='yes' title='MonMenu' type='HTML'>

      Enregistre et essaye d’aller voir sur ton mobile, cela devrait créer un onglet déroulant avec une flèche pour ouvrir les catégories! tiens moi au courant 🙂

      à bientôt,

      Charlène

Poster un commentaire