Vous êtes nouveau? Commencez ici pour découvrir l'aventure!
Des questions? cliquez-ici

Newsletter Pop-up sur Blogger


Aujourd'hui, je vous parle de geekerie, de personnalisation de blog et tout le toutim. Je ne sais pas vous, mais moi, j'adore chipoter à mon blog, chercher de nouvelles idées de personnalisation et tout ça en m'inspirant de tout ce que je vois chaque jour. Je m'intéresse à tout ce qui touche au web et tout particulièrement ce qui pourrait améliorer mon blog. 

Comme vous le savez certainement, la plupart des blogueurs utilisent la plateforme de Wordpress qui est pour eux bien plus "professionnel" mais évidemment, il s'agit d'une question de choix et de ce que l'on souhaite réaliser. Je ne vais pas m'étaler sur le sujet pour savoir si wordpress est meilleur ou non que Blogger, mais étant donné que je suis sur Blogger, je voudrais mettre en avant celle-ci pour montrer que beaucoup de choses sont également possible sur cette plateforme. 

Cet article parlera de Newsletter et plus précisément de la création d'une newsletter en pop-up via la newsletter native sur votre blog Blogger. Deux petits codes (un HTML et un CSS) à intégrer dans votre code. Un simple copier/coller et c'est dans la boite. Mais avant les étapes d'intégration, une petite explication sur le pop-up.

Le Pop-Up, C'est Quoi?


Le pop-up, est une fenêtre qui s'ouvre automatiquement lors de l'ouverture d'une page web. Vous avez très certainement déjà aperçu ce type de page lorsque vous naviguez sur des sites web et qu'une pub s'affiche tout d'un coup sur votre écran. Le principe ici est le même, mais dans notre cas, il va vous permettre de proposer à vos visiteurs de s'inscrire à la newsletter de votre blog. Il pourra ainsi être tenu au courant de toutes les actualités.

Parfois, le pop-up peut être redondant et embêter les internautes qui viennent jeter un oeil à votre site. Pour éviter tout excès, éviter dans un premier temps l'utilisation excessif des popups. N'ajoutez pas une fenêtre pop up pour chaque réseaux sociaux. Vos lecteurs vont prendre la poudre d'escampette. Deuxième chose importante, la fréquence de la fenêtre ne doit pas s'effectuer à chaque actualisation ou ouverture de la page de votre site, ça en agacerait plus d'un!

Comment Installer Une Popup Newsletter Sur Mon Blog?

ETAPE 1

Avant toute modification de votre template, il est important de faire une sauvegarde.

PARAMETRES/AUTRE/SAUVEGARDER LE CONTENU

Pour éviter de vous tromper et faire des erreurs, suivez correctement les étapes une par une.

ETAPE 2



➜ allez sur la page de votre administration Blogger,

➜ allez dans l'onglet "MODELE",

➜ cliquez sur le bouton "modifier le code HTML",

➜ cliquez dans le cadre du code et effectuez une recherche via le raccourci clavier (CTRL+F),

➜ recherchez le code suivant:

 ]]></b:skin>

ETAPE 3


➜ collez juste au-dessus le code CSS suivant:

#mtc-sub-popup{
text-shadow: none;position: absolute;
}
#mtc-popup{
display: block; top: 0px; left: 0px;
width: 100%;
height: 100%;
position: fixed;
background-image: none;
margin: 0;
-ms-overflow-y: auto;
overflow-y: auto;
}
#mtc-style-popup{
overflow: none;
background-color: #fafafa; /*couleur du fond*/
border: 2px solid #555; /*couleur de la bordure*/
}
.mtc-style-popup{
width: 497px;
height: 243px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}
.footer-inner{
display: none;
height: 0px;
}
.header{
margin-top: 50px;
margin-left: 20px;
text-align:center;
}
.header .newsletter{
color: #333333; /*couleur du titre newsletter*/
font-size: 17px;
font-family: 'Open Sans', sans-serif;
line-height: 1;
}
.header .signup{
color: #e69a9a; /*couleur du titre NOMDUBLOG*/
font-size: 17px;
font-family: 'Open Sans', sans-serif;
line-height: 1;
}
.info{
font-size: 13.5px;
text-align:center;
font-family: 'Open Sans', sans-serif;
color: #555;
margin-top: 20px;
margin-left: 20px;
}
.sub_button{
padding: 0 15px;
margin-right: 35px;
border: 0;
float: right;
min-width: 97px;
font-size: 13.5px;
font-family: 'Open Sans', sans-serif;
margin-top: -42px;
background: #e69a9a;
height: 40px;
line-height: 33px;
text-align: center;
color: #fff;
width: auto;
font-weight: bold;
}
.sub_email{
clear: both;
font-family: 'Open Sans', sans-serif;
width: 100%;
margin-left: 15px;
margin-top: 15px;
margin-bottom:15px;
}
.sub_form{
position: relative;
margin-left: 10px;
margin-top: 20px;
}
.sub_form{
display: block;
width: 100%;
background: transparent;
height: 33px;
margin-right:-10px,
border: 1px solid #eee;
border-right: 0;
font-family: 'Open Sans', sans-serif;
font-size: 11px;
padding: 8px 10px;
}
.sub_form,.email_input{
width: 320px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: auto; background: #fff;
}
.privacy{
position: relative;
font-size: 10px;
text-align: center;
font-family: 'Open Sans', sans-serif;
color: #8b8b8b;
margin-bottom: 0px !important;
}

➜ faites une nouvelle recherche (CTRL+F) pour trouver ce code

</body>
➜ copiez le code suivant juste au-dessus de </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'><!--Newsletterpopup début--><div id='mtc-popup'><div class='mtc-style-popup' id='mtc-style-popup'><center onmouseup='document.getElementById(&apos;mtc-popup&apos;).style.display=&apos;none&apos;' style='color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;'><img src='http://zupimages.net/up/17/16/67rw.png' style='width: 30px;height: 30px;'/></center><div class='header'><span class='newsletter'>NEWSLETTER</span><span class='signup'> NOM DU BLOG</span></div><p class='info'>Recevez les nouveaux articles directement par email</p><div class='sub_email'><form action='http://feedburner.google.com/fb/a/mailverify?uri=nomdublog' class='sub_social_form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NOMDEVOTREBLOG;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=210,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='NOMDEVOTREBLOG'/><input name='loc' type='hidden' value='en_US'/><input class='sub_form' name='email' onblur='if (this.value == &quot;&quot;) { this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Votre email ici&quot;) {this.value = &quot;&quot;}' type='text' value='Entrez votre email...'/><input class='sub_button' title='' type='submit' value='Inscrivez-vous'/></form></div><p class='privacy'>Vos informations ne seront jamais partagées</p></div></div><div style='clear: both;'></div><!-- Newsletterpopup fin--></b:if>

➜ remplacez NOMDEVOTREBLOG par votre Feedburner ID et NOM DU BLOG par votre nom,

✔︎ enregistrez le modèle.

En ce qui concerne la personnalisation de votre popup, vous trouverez dans le code css des remarques (/* REMARQUES */) qui vous permettront de savoir où modifier certains aspects comme la couleur de fond, ou encore la couleur du texte. Si vous souhaitez modifier d'autres aspects non présents dans le code, n'hésitez pas à me laisser un commentaire.

pop up newsletter blogger

0 commentaires: