السلام عليكم , أهلا بكم أعضاء وزوار مدونتنا الكرام , رمضان مبارك كريم تقبل الله صيامكم وقيامكم , الي;م بإدن الله سنتعرف على كيفية إضافة نمود إتصل بنا لمدونات بلوجر بشكل أنيق وجداب بحيث الاضافة تعد من ألإضافات الرئيسية لأي مدونة وما يميز هدا الشكل الدي نحن بصدد تقديمه انه منبتق ولا يأخد مساحة في القالب كما انه خفيف وسيجعل موقعك أكثر إحترافية طريقة الاضافة تابع معي ,
معاينة مباشرة
✔ توجه الى لوحة تكم البلوجر
✔ اختر المدونة ثم القالب
✔ حرر القالب بعدها إبحث عن هدا الوسم ]]></b:skin>
✔ فوقه مباشرة أضف هدا الكود
.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>
✔ ثم أضف فوقه هدا السكريبت
<script type='text/javascript'> $(".contact-button a").click(function() { var e = $(".contact-sec"); if (e.is(":hidden")) { e.fadeIn(300); e.addClass("contact-show"); $("#outer-wrapper").addClass("pop_contact ") } return false }); $(document).bind("click", function(e) { if ($(e.target).parents(".contact-sec").length === 0) { $(".contact-sec").fadeOut(300); $("#outer-wrapper").removeClass("pop_contact "); $(".contact-sec").removeClass("contact-show") } }); $(".contact-close").click(function() { $(".contact-sec").fadeOut(300); $("#outer-wrapper").removeClass("pop_contact "); $(".contact-sec").removeClass("contact-show"); return false }); </script>
✔ بعد دالك أضف كود html هدا في اي مكان في القالب يمكنك وضعه فوق </body>
<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 != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<a class='contact-close' href='#'><i class='fa fa-times'/></a>
</b:includable>
</b:widget>
</b:section>
✔ الخطوة الاخيرة توجه الى التخطيط ثم إضافة أداة html
✔ ثم ضع فيها هدا الكود قم بالحفض ومبروك عليك ,
<div class='contact-button'><a href='#'><i class='fa fa-envelope'/></a></div>
✔ ملاحظة , في حالة لم تهر الايقونة تأكد من تتبيث كود مكتبة font awesome فقط بوضع الكود التالي تحت الوسم <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
اضافة جميلة جدا ولكن اخي حسب ما ارى ان هناك مشكلة في الاداة انها عند الانتاء زر اغلاق x غير فعال :(
ردحذفنعم اخي شكرا سأعمل على إصلاحها فقط إضغط على اي مكان وسيتم إغلاقها
حذف