إضافة أداة " أتصل بنا " العائمة أسفل مدونة بلوجر

- خطوات تركيب الاضافة

- إذهب لـ Blogger >> Template >> Edit HTML

- ثم إضغط CTRL +F لتبحث عن الكود التالى

]]></b:skin>

- بعد أن تجد الكود السابق قم بنسخ الكود التالى قبله

#giunx-contact .ContactForm {
     margin: 0px!important;
 }
 #giunx-contact .contact-form-button-submit {
     max-width: none;
     width: 100%;
     height: 35px;
     border: 0;
     background-image: none;
     background-color: #FA411E;
     cursor: pointer;
     font: normal normal 13px Open Sans;
     font-style: normal;
     font-weight: 400;
 }
 .#giunx-contact .contact-form-button-submit:hover {
     background-color: #222;
     background-image: none;
     border: 0;
 }
 #giunx-contact #contact {
     position: fixed;
     bottom: 0;
     right: 1%;
     background-color: #EEE;
     color: #555;
     width: 300px;
     z-index: 1.0E+15;
 }
 #giunx-contact #contact .contact-form-widget {
     padding: 30px;
     display: none;
 }
 #giunx-contact #contact {
     position: fixed;
     bottom: 0;
     right: 1%;
     background-color: #EEE;
     color: #555;
     width: 300px;
     z-index: 1.0E+15;
 }
 #giunx-contact #contact h2.title {
     margin: 0px;
     font-weight: 400;
     background-color: #FA411E;
     color: #FFF;
     padding: 8px 15px;
     font-size: 16px;
     cursor: pointer;
     letter-spacing: 3px;
     text-align: center;
 }
 #giunx-contact #contact h2.title .fa {
     position: absolute;
     left: 10px;
     top: 12px;
 }
 #giunx-contact #contact .contact-form-widget {
     width: 240px;
     padding: 30px;
     display: none;
 }
 #giunx-contact #contact * {
     transition: all 0 ease;
     -webkit-transition: all 0 ease;
     -moz-transition: all 0 ease;
     -o-transition: all 0 ease;
 }
 #giunx-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
     background-color: #DDD;
     color: #111;
     border: 0;
     padding: 10px 5px;
     font: normal normal 13px Open Sans;
 }
 #giunx-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
     max-width: none;
     margin-bottom: 15px;
 }

- الآن قم باضافة اكواد الـ HTML بين الوسمين
<body> </body>
أى بعد الوسم <body>
أو قبل الوسم </body>



    
      
  
    


 





        
                <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/><br />        <div style='text-align: center; max-width: 222px; width: 100%'><br />          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/><br /><p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/><br /></div><br /><div style="font-size:11px;"><br /><a href="http://homeblog7.blogspot.com/2014/12/blog-post_45.html">مصدر الاضافة</a></div><br /></form><br /></div><br /></div><br /></b:includable><br />    </b:widget><br />  </b:section><br /></div><br /><script type='text/javascript'><br /> //<![CDATA[<br />$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});<br />   //]]><br /></script><br /></pre></blockquote>

- احفظ القالب .