عرض مشاركة واحدة
قديم 06-21-2015, 09:40 PM   #1
ابو نزار007
مدون جديد
 
تاريخ التسجيل: Jun 2015
الدولة: المغرب
المشاركات: 1
افتراضي إضافة نمودج الإتصال للمدونة بشكل منبتق وجداب

السلام عليكم مرحبا بكم ورمضان مبارك كريم لكل العرب هدا اول درس لي بالمنتدى اتمنى ان ينال اعجابكم , اليوم بإدن الله سنتعرف على كيفية إضافة نمود إتصل بنا لمدونات بلوجر بشكل أنيق وجداب بحيث الاضافة تعد من ألإضافات الرئيسية لأي مدونة وما يميز هدا الشكل الدي نحن بصدد تقديمه انه منبتق ولا يأخد مساحة في القالب كما انه خفيف وسيجعل موقعك أكثر إحترافية طريقة الاضافة تابع معي ,



معاينة مباشرة

✔ توجه الى لوحة تكم البلوجر
✔ اختر المدونة ثم القالب
✔ حرر القالب بعدها إبحث عن هدا الوسم ]]></b:skin>
✔ فوقه مباشرة أضف هدا الكود

كود بلغة HTML:
.contact-button {
    margin: 0 auto;
      width: 100%;
    background: #0894D8;
    border-radius: 0px 0px 0 0;
    margin-top: 2px;
    margin-bottom: -4px;
}
.contact-button a {
    padding: 19px;
    color: #fff;
  margin-right: 100px;
    display: inline-block;
    padding-top: 7px;
    font-size: 16px;
}
.contact-close:hover {
    color: #0894D8;
    background: #000;
}
.contact-sec {
    border: 1px solid #0894D8;
    position: fixed;
    top: 50%;
    margin-top: -190px;
    left: 50%;
    max-width: 300px;
    width: 90%;
    margin-left: -150px;
    background-color: #FFF;
    height: auto;
    z-index: 99999;
    display: none;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    transition: all .5s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
}
.contact-close {
    position: absolute;
    top: -13px;
    background-color: #0894D8;
    color: #FFF;
    height: 25px;
    width: 25px;
    text-align: center;
    border-radius: 25px;
    line-height: 25px;
    font-size: 10px;
}
.contact-sec .widget {
    padding: 20px;
}
.contact-sec .contact-form-cross {
    display: none;
}
#ContactForm1 h2 {
    font-size: 18px;
    text-align: center;
    color: #0894D8;
    border-bottom: 1px solid;
    padding-bottom: 8px;
}
.contact-sec.contact-show {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}
contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {
    max-width: none;
    margin-bottom: 10px;
    padding: 5px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
    background-color: #f3f3f3;
    width: 250px;
    border: 0;
}
.contact-form-button-submit {
    max-width: none;
    width: 100%;
    height: 35px;
    border: 0;
    background-image: none;
    background-color: #0894D8;
    cursor: pointer;
    color: #fff;
}
.contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus {
    border: 0;
    box-shadow: none;
}
.contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {
    border: 0;
}
.contact-form-button-submit:hover {
    background-color: #222;
    background-image: none;
    border: 0;
}
input#ContactForm1_contact-form-name, input#ContactForm1_contact-form-email{
  background: #eee;
  padding: 8px;
}
i.fa.fa-envelope {
  margin-right: 14px;
}
.fa-envelope:before {
  font-size: 30px;
  display: block;
  margin-bottom: 7px;
}
.fa-times:before {
  content: "\f00d";
  margin-right: 2px;
}

✔ الخطوة التالية إبحث عن هدا الوسم </body>

✔ ثم أضف فوقه هدا السكريبت

كود بلغة HTML:
<script type='text/javascript'> $(&quot;.contact-button a&quot;).click(function() { var e = $(&quot;.contact-sec&quot;); if (e.is(&quot;:hidden&quot;)) { e.fadeIn(300); e.addClass(&quot;contact-show&quot;); $(&quot;#outer-wrapper&quot;).addClass(&quot;pop_contact &quot;) } return false }); $(document).bind(&quot;click&quot;, function(e) { if ($(e.target).parents(&quot;.contact-sec&quot;).length === 0) { $(&quot;.contact-sec&quot;).fadeOut(300); $(&quot;#outer-wrapper&quot;).removeClass(&quot;pop_contact &quot;); $(&quot;.contact-sec&quot;).removeClass(&quot;contact-show&quot;) } }); $(&quot;.contact-close&quot;).click(function() { $(&quot;.contact-sec&quot;).fadeOut(300); $(&quot;#outer-wrapper&quot;).removeClass(&quot;pop_contact &quot;); $(&quot;.contact-sec&quot;).removeClass(&quot;contact-show&quot;); return false }); </script>
✔ بعد دالك أضف كود html هدا في اي مكان في القالب يمكنك وضعه فوق </body>

كود بلغة HTML:
<b:section class='contact-sec' id='contact-sec' maxwidgets='1' showaddelement='yes'>
  <b:widget id='ContactForm1' locked='true' title='راسلنا من خلال النمودج التالي :' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
        <a class='contact-close' href='#'><i class='fa fa-times'/></a>
</b:includable>
  </b:widget>
</b:section>
✔ الخطوة الاخيرة توجه الى التخطيط ثم إضافة أداة html
✔ ثم ضع فيها هدا الكود قم بالحفض ومبروك عليك ,

كود بلغة HTML:
 <div class='contact-button'><a href='#'><i class='fa fa-envelope'/></a></div>
✔ ملاحظة , في حالة لم تهر الايقونة تأكد من تتبيث كود مكتبة font awesome فقط بوضع الكود التالي تحت الوسم <head>

كود بلغة HTML:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>



المصدر : http://www.abou-nizar.com/2015/06/blog-post_20.html

Follow us: @abounizar007 on Twitter | abounizar005 on Facebook
__________________

من مواضيع ابو نزار007

الدعم العربي

ابو نزار007 غير متواجد حالياً   رد مع اقتباس