Formulaire de contact flottant pour Blogger Blogspot



Si vous ne souhaitez pas créer de page statique pour insérer le formulaire de contact pour Blogger comme conseil, ou si vous ne souhaitez pas le placer dans la barre latérale droite.


 Donc, cette astuce peut être votre choix parfait, créez une boîte flottante de formulaire de contact.

Capture d'écran

Formulaire de contact flottant pour Blogger Blogspot
Formulaire de contact flottant pour Blogger

Comment le créer

  • Ajouter jQuery et le formulaire de contact Gadget

Si votre blog n'a pas de jQuery auparavant,

Merci de coller le code apres ce code ]]></b:skin> sur ton template



/*Floating Contact Form by BloggerItems.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #09f;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Collez ensuite le code ci-dessous avant la </body> balise dans votre modèle



<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>
Sauvegarder votre template.

Poster un Commentaire

Laisser un commentaire

Plus récente Plus ancienne