رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر


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

أنا : ابو نزار007




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



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

✔ توجه الى لوحة تكم البلوجر
✔ اختر المدونة ثم القالب
✔ حرر القالب بعدها إبحث عن هدا الوسم ]]></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 غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدليلية (Tags)
ابونزار, بلوجر, نمودج الاتصال


 
أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG]متاحة
كود HTML معطلة



المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
حصريا:اضافة التحديث الاخير لصندوق الاعجاب من فايسبوك (شكل انيق وجداب) التقنية بلا حدود إضافات وأدوات بلوجر 3 04-27-2015 02:10 AM
طريقة اضافة نمودج اتصل بنا لمدونتك Amin chakir إضافات وأدوات بلوجر 0 09-17-2013 03:51 PM
أضف صندوق إعجاب منبثق على لمدونتك Jaabiriovic إضافات وأدوات بلوجر 1 04-11-2013 04:53 PM
إضافة الفهرس بشكل جميل yosefssss إضافات وأدوات بلوجر 2 11-13-2012 05:08 AM
نمودج اتصل بنا اكثر اثارة بصيغة jquery السيد ابو جبل إضافات وأدوات بلوجر 0 09-26-2012 10:22 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin™ Version 3.8.7
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved. منتديات
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 11:30 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)