معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   إضافات وأدوات بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=10)
-   -   إضافة نمودج الإتصال للمدونة بشكل منبتق وجداب (https://www.bloggerexp.com/showthread.php?t=17847)

ابو نزار007 06-21-2015 09:40 PM

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

http://1.bp.blogspot.com/-93jacmrVM-...-20_220238.png

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

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


الساعة الآن 05:14 PM

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012