|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
06-21-2015, 09:40 PM | #1 |
مدون جديد
تاريخ التسجيل: 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'> $(".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:
<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> كود بلغة 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
__________________
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
ابونزار, بلوجر, نمودج الاتصال |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
حصريا:اضافة التحديث الاخير لصندوق الاعجاب من فايسبوك (شكل انيق وجداب) | التقنية بلا حدود | إضافات وأدوات بلوجر | 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 |
الساعة الآن 12:29 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |