Afficher des annonces in-contents pour les thèmes Blogger avec AMP HTML

Afficher des annonces in-contents pour les thèmes Blogger avec AMP HTML

AMP HTML a permis aux blogs sur Bloggers d'afficher des pages de blog incroyablement rapides sur le Web ou sur des appareils mobiles . Les articles et les pages de blogs affichés instantanément sur les écrans des lecteurs augmentent ainsi les chances pour les lecteurs de consommer plus et plus de contenus de blogs efficacement.

Les utilisateurs de blogues de Blogger pourraient également en tirer parti et tirer rapidement parti de cet avantage pour augmenter leurs revenus en optimisant les annonces affichées sur leurs pages de blog ou leur contenu - en utilisant un amp-adcomposant.

Les annonces intégrées au contenu, qui sont communément utilisées par un réseau d’annonces comme Adsense, peuvent être facilement mises en œuvre sur les thèmes Blogr-AMP . Les utilisateurs ont plus de contrôle sur les emplacements d'annonce, peuvent utiliser un réseau d'annonces alternatif, créer des tests afin d'optimiser davantage l'affichage des annonces.

Didacticiel d'insertion d'annonces dans le contenu Thèmes HTML Blogger AMP

Remarque importante,

 il ne s'agit pas d'un remplacement des annonces automatiques Adsense, car le amp-auto-adscomposant est toujours en version bêta au moment de la rédaction. Toutefois, ces intégrations ressemblent aux principes fondamentaux de l'emplacement des annonces dans le contenu, dans lesquelles les annonces sont affichées de manière transparente dans le contenu d'une page de blog.



Blogr-AMP (V2) Le thème Blogger avec les intégrations AMP HTML a fourni le cadre permettant de placer des annonces dans le contenu d'une page de blog afin d'aider les blogueurs / éditeurs à augmenter facilement leurs revenus via des emplacements optimisés.
Les utilisateurs peuvent définir leurs propres emplacements dans le contenu de leur blog, en fonction des préférences de leurs lecteurs et de leur flux de lecture. Pour mémoire, l'utilisation d'affichages d'annonces dans le contenu, comme celle mise en œuvre sur ce blog, augmenterait également les chances de couverture des annonces précédentes, passant de 66% à 93% à une valeur constante de l'ordre de 96% ou plus. Mais là encore, cela dépend du contenu des utilisateurs et de la disponibilité des enchères des annonceurs. Si vous avez des questions, envoyez-les directement aux contributeurs de thèmes ici ou utilisez la section commentaire ci-dessous pour discuter et partager vos idées avec la communauté.

Grâce à la participation des utilisateurs de Blogr-AMP,

 l'optimisation des annonces au sein du contenu a permis aux revenus des annonces d'augmenter de 12%! Bien que modestes, toutes les données positives qui en résulteront donneront, espérons-le, plus d'occasions pour les éditeurs d'augmenter leurs revenus, avec un minimum d'effort.

tutoriel nous allons nous intéresser

Le texte de vos articles est une des choses les plus importantes de votre blog. C'est le cœur de votre blog, ce que lit vos lecteurs. Il faut donc soigner son écriture et ses textes, mais aussi son apparence ! Une police trop petite ou peu lisible va nuire à votre blog. Il faut donc bien choisir vos polices et couleurs pour que le rendu soit agréable à voir mais aussi à lire.

Dans ce tutoriel nous allons nous intéresser à l'apparence de vos articles : le corps de texte, mais aussi les titres à l'intérieur de vos articles.

Sommaire

• Faire une sauvegarde de son thème
• Modifier l'apparence des articles
• Où coller les codes CSS de ce tutoriel
• Le corps de texte
• Les titres de l'article
• Exemple
• Utiliser des polices Google Fonts

Faire une sauvegarde de son thème

Comme d'habitude, commencez toujours par faire une sauvegarde de votre thème avant d'y apporter des modifications ! Si vous faites une erreur, même d'inattention, vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)

Modifier l'apparence des articles

Dans ce tutoriel nous allons utiliser des codes CSS pour modifier l'apparence du corps de texte et des titres des articles.
Attention, ces codes CSS sont basés sur le thème Simple de Blogger. Si vous avez téléchargé un thème pour votre blog alors ces codes no fonctionneront peut-être pas car la structure des thèmes téléchargés est différente des thèmes classiques de Blogger.

Où coller les codes CSS de ce tutoriel

Une fois votre sauvegarde effectuée, allez ans Thème à partir du tableau de bord Blogger. Cliquez ensuite sur Modifier le code HTML :

Cliquez n'importe où à l'intérieur de la boîte de code et appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Un champ de recherche doit apparaître à l'intérieur de la boîte de code. S'il apparaît en haut de la page web, alors cliquez à nouveau à l'intérieur de la boîte de code, puis appuyez à nouveau sur Ctrl et F.

Dans le champ de recherche qui apparaît en haut à droite de la boîte de code, collez :

]]></b:skin>

Appuyez sur Entrer pour trouver cette ligne dans votre thème.

C'est au-dessus de cette ligne qu'il faudra coller les codes CSS donnés ci-dessous dans le tutoriel ;)

Le corps de texte

Pour modifier le corps du texte de vos articles, il faut utiliser le code CSS suivant :

/* Corps de texte des articles */
.post-body {
}

Avant le signe } de ce code, collez les paramètres que vous voulez définir à votre corps de texte.

Voici quelques exemples de paramètres que vous pouvez modifier, avec des explications en commentaire :

font-family: Arial;   /* Police */
font-size: 14px;   /* Taille de la police */
font-weight: normal;   /* Graisse : normal = normal | bold = gras */
font-style: normal;   /* Style : normal = normal | italic = italique */
line-height: 1.6;   /* Interligne */
text-transform: normal;   /* Transformation du text : normal = normal | uppercase = tout en majuscules | lowercase = tout en minuscules | capitalize = majuscules à chaque première lettre */
letter-spacing: 0px;   /* Espacement entre les caractères */
color: #333333;   /* Couleur */
text-align: left;   /* Alignement : left = gauche | center = centré | right = droite | justify = justifié */

Vous n'êtes pas obligés de tous les utiliser. Sélectionnez simplement ceux qui vous intéressent.

Les titres de l'article

La plupart des personnes utilisent rarement les titres dans leur articles. Selon l'article, ce n'est peut-être pas nécessaire. Mais les titres sont des outils très importants pour ajouter une hiérarchie, une organisation dans l'article. Vous pouvez même vous amuser à ajouter de la couleur ou une jolie police originale dans vos articles avec des titres.

Les titres sont disponibles dans la barre d'outils de l'éditeur de texte Blogger :

Il y a 3 titres disponibles :

• Titre : titre de niveau 2 (H2)
• Sous-titre : titre de niveau 3 (H3)
• Titre secondaire : titre de niveau 4 (H4)

Les codes CSS à utiliser pour modifier ces titres sont :

/* Titres des articles */

/* Titre - H2 */
.post-body h2 {
}

/* Sous-titre - H3 */
.post-body h3 {
}

/* Titre secondaire - H4 */
.post-body h4 {
}

De même que pour le corps de texte, collez les paramètres de votre choix avant le signe } du code du titre à modifier.

En plus de ces paramètres vous pouvez ajuster l'espace autour des titres avec les paramètres :

margin-top: 20px;   /* Marge au-dessus */
margin-bottom: 20px;   /* Marge en-dessous */

Exemple

Voici un exemple de corps de texte et titres des articles modifiés :

Pour le corps de texte, j'ai défini :

• la police en Lato
• une taille de 14px
• une graisse normale : normal
• une interligne de 1.6
• un espacment des carctères de 0.5px pour aérer un peu le texte
• une couleur gris foncé : #333333
• un alignement du texte justifié : justify

Voici le code CSS correspondant :

/* Corps de texte des articles */
.post-body {
    font-family: 'Lato', sans-serif;   /* Police */
    font-size: 14px;   /* Taille de la police */
    font-weight: normal;   /* Graisse : normal = normal | bold = gras */
    line-height: 1.6;   /* Interligne */
    letter-spacing: 0.5px;   /* Espacement entre les caractères */
    color: #333333;   /* Couleur */
    text-align: justify;   /* Alignement : left = gauche | center = centré | right = droite | justify = justifié */
}

Pour les titres j'ai choisi 2 couleurs différentes : un jaune moutarde (#e8b960) et un bleu clair (#88ccc5). Les titres sont en gras, et la taille des titres diminue selon son niveau : le titre h2 est plus grand que le h3 qui est plus grand que le h4.
La police choisie est Montserrat, et les caractères sont espacés de 2 ou 3 pixels.
Pour finir, j'ai ajouter une marge au-dessus et en-dessous des titres pour aérer le contenu de l'article.

Voici le code final des titres :

/* Titres des articles */

/* Titre - H2 */
.post-body h2 {
    text-transform: uppercase;   /* Transformation du text : normal = normal | uppercase = tout en majuscules | lowercase = tout en minuscules | capitalize = majuscules à chaque première lettre */
    font-size: 28px;   /* Taille de la police */
    color: #e8b960;   /* Couleur */
    margin-top: 20px;   /* Marge au-dessus */
    margin-bottom: 20px;   /* Marge en-dessous */
    letter-spacing: 3px;   /* Espacement entre les caractères */
    font-family: 'Montserrat', sans-serif;   /* Police */
    font-weight: bold;   /* Graisse : normal = normal | bold = gras */
}

/* Sous-titre - H3 */
.post-body h3 {
    text-transform: uppercase;   /* Transformation du text : normal = normal | uppercase = tout en majuscules | lowercase = tout en minuscules | capitalize = majuscules à chaque première lettre */
    font-size: 22px;   /* Taille de la police */
    color: #88ccc5;   /* Couleur */
    margin-top: 20px;   /* Marge au-dessus */
    margin-bottom: 15px;   /* Marge en-dessous */
    letter-spacing: 2px;   /* Espacement entre les caractères */
    font-family: 'Montserrat', sans-serif;   /* Police */
    font-weight: bold;   /* Graisse : normal = normal | bold = gras */
}

/* Titre secondaire - H4 */
.post-body h4 {
    font-size: 18px;   /* Taille de la police */
    color: #e8b960;   /* Couleur */
    margin-top: 20px;   /* Marge au-dessus */
    margin-bottom: 15px;   /* Marge en-dessous */
    letter-spacing: 2px;   /* Espacement entre les caractères */
    font-family: 'Montserrat', sans-serif;   /* Police */
    font-style: italic;   /* Style : normal = normal | italic = italique */
}