Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • Facebook
  • Contact
  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
Accueil / Tutoriels / Ajouter « bottom scrolling popup subscription » à votre blog sans plugin

Ajouter « bottom scrolling popup subscription » à votre blog sans plugin

Màj le 14 février 2017Laissez un commentaire

Salut blogueurs, Aujourd’hui on va apprendre comment ajouter une boîte d’abonnement à vos pages sur facebook et twitter. Cette boite glisse doucement au moment du défilement de la page en bas et contient deux boutons : un pour facebook et l’autre pour twitter, vous pouvez bien sure ajouter d’autres boutons.

Ce « bottom scrolling popup subscription » peut être ajouté facilement à WordPress et aussi à Blogger, en copiant le code ci-dessous et le coller dans un widget texte.

scolling facebook popup

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">

</script>   <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script> 

<style type='text/css'> #IGsocialslide{ background:#f3f3f3; border-radius:9px; -moz-border-radius:8px;
-webkit-border-radius:8px; -moz-box-shadow:inset 0 0 4px #333; -webkit-box-shadow:inset 0 0 4px #333; box-shadow:inner 0 0 3px #333; padding:12px 14px 12px 14px; width:300px; position:fixed; bottom:13px; right:2px; display:none; z-index:3; height:65px;} </style> 

<div style="display: none;" id="IGsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fwpcours&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div> <div style="float:left; margin:15px;"><a href="https://twitter.com/wpcours" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>

Note:

Changer wpcours par le nom de votre page facebook, et même chose pour twitter.

Si vous voulez que cette boite apparaîtra à gauche de votre blog, changer right:2px; par left:2px;

Voici un deuxième modèle de popup pour facebook seulement:

popup-facebook

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.4.4%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> &nbsp; <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%24(window).scroll(function()%7Bif(%24(document).scrollTop()%3E%3D%24(document).height()%2F4)%24(%22%23IGsocialslide%22).show(%22slow%22)%3Belse%20%24(%22%23IGsocialslide%22).hide(%22slow%22)%3B%7D)%3Bfunction%20closeIGsocialslide()%7B%24('%23IGsocialslide').remove()%3B%24.ajax(%7Btype%3A%22POST%22%2Curl%3A%22%2Ffacebookpage.php%22%7D)%3B%7D%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D'text%2Fcss'%3E%20%23IGsocialslide%7B%20background%3A%23fff%3Bborder-left%3A%201px%20solid%20%23f0f0f0%3Bborder-top%3A%202px%20solid%20%23ea6a1b%3B%20-webkit-box-shadow%3Ainset%200%200%204px%20%23333%3B%20box-shadow%3Ainner%200%200%203px%20%23333%3Bbox-shadow%3A%200%204px%2010px%20%23666%3B%20padding%3A12px%2014px%2012px%204px%3B%20width%3A210px%3B%20position%3Afixed%3B%20bottom%3A3px%3B%20right%3A2px%3B%20display%3Anone%3B%20z-index%3A3%3B%20height%3A65px%3B%7D%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
<div style="display: none;" id="IGsocialslide">
 <a style="text-decoration:none;position:absolute;top:1px;right:10px;color:#DB0214;font-size:14px;font-family:Oswald,arial;" href="javascript:void(0);" onclick="return closeIGsocialslide();">x</a> <span style="font-family: Oswald,arial; font-size: 16px; margin: 10px 0;color: #ea6a1b;">SUIVRE TIFAWT</span> 
<div style="float:left; margin:15px;"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fwpcours&width=149&layout=button_count&action=like&size=small&show_faces=false&share=false&height=46&appId=406118966161312" width="149" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>
</div>

  

N’oubliez pas de changer « https%3A%2F%2Fwww.facebook.com%2Fwpcours » par le lien de votre page facebook. vous pouvez utiliser ce widget pour blogger et aussi WordPress, il suffit de copier le code entier et de le coller dans un Widget texte et le mettre dans le footer de votre site pour ne pas affecter le vitesse de chargement de votre blog.

Ces deux Widgets vous permettra d’augmenter facilement le nombre de j’aime de votre page facebook.

Merci de partager :
Facebook
Twitter
Google+
LinkedIn
Pinterest

Cela devrait aussi vous intéresser :

  • Ajouter une barre verticale flottante de partage à votre blog
  • Créer un formulaire de contact sans plugin avec Google forms
  • Lier votre nom de domaine à votre site sur blogger
  • Corriger l’erreur 404 du Sitemaps yoast
  • wordpress ping liste pour une indexation rapide de vos articles
  • Comment créer une page 404 personnalisée pour WordPress

Catégorie(s): Tutoriels Mots clés : wordpress guide

Laisser un commentaire Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de wpcours.com et recevez nos tutoriels Wordpress Gratuitement.

Articles récents

  • 6 meilleurs plugin pour les avis (Review) pour WordPress
  • Éviter les fichier accentués sous WordPress
  • Créer un mu-plugin (plugin de fonctions globales) sous WordPress
  • Sécuriser votre site en modifiant les clés de sécurité secrètes SALT dans WordPress
  • 3 plugins utiles pour passer son site WordPress en https

© 2018 ·wpcours.com · Privacy Policy · Contact

<<
>>