إضافة نموذج الإتصال بشكل احترافي للمدونة
السلام عليكم ورحمة الله وبركاته مرحبا بكم متابعين
مدونة عملاق النت في إضافة جديدة لمدونات
بلوجر وهي إضافة اداة إتصل بنا وهو اداة من بلوجر تستطيع وضعها بالسايدبار او
الفوتر ولكن هذه المرة بشكل اخر افضل شكل لها لحد الأن
لنبدأ الشرح
طريقة التركيب
قبل كل شيئ أضف الكود التالي خاص بالأيقونات ضعه فوق </head>
<link
href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'
rel='stylesheet'/>
توجه لقالب >>
تحرير >>
ابحث بإستعمال CTRL+F عن ]]></b:skin>
ضع الكود التالي فوقه
/*----contact-button-----------*/ .contact-button {} .contact-button a {padding: 9.7px;color: #FFFFFF;display: inline-block;width: 50px;height: 60px;font-family: droid arabic kufi;background: #22A1C4;text-shadow: 0 -1px 0 rgba(115, 114, 114, 0.3);float: left;} .contact-button a:hover {box-shadow:inset 0 60px 0 #2797B7;} #search-button button.open:hover {box-shadow:inset 0 60px 0 #2797B7;} .contact-close:hover {color: #0894D8;background: #2797B7;} .contact-sec {border: 1px solid #eee;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:-1px;background-color: #2797B7;color: #FFF!important;height: 40px;width: 40px;text-align: center;line-height: 40px;font-size: 13px;left: 87.1%;} .contact-sec .widget {padding: 20px;} .contact-sec .contact-form-cross {display: none;} #ContactForm1 h2 {width: 116%;font-size: 16px;text-align: center;line-height: 40px;height: 40px;font-weight: 500;color: #fff;background-color: #22A1C4;padding-bottom: 8px;top: -21px;left: 20px;} .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;padding: 5px; text-align: right;} .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{padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-bottom: 10px; width:100%;} textarea#ContactForm1_contact-form-email-message {padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-top: 10px;width: 100%;} .contact-button {margin-left:-50px;float: left;font-family: droid arabic kufi;} #ContactForm1_contact-form-submit {background: #FFFFFF;color: #4993A8;font-weight: 100;width: 110%;font-family:'ge_ss_threeregular',Droid Sans;height: 40px;margin-right: -16px;font-size: 14px;border: 1px dashed #4993A8;float: right;margin-top: 10px;} #ContactForm1_contact-form-submit:hover {color: #fff;background: #2797B7;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 135%;margin-top: 62px;font-size: 13px;font-weight: 100;color: #FFF;font-family: 'ge_ss_threeregular',Droid Sans;margin-right: -26px;background: #22A1C4;} .contact-form-error-message-with-border {background: #ED5345;border: none;box-shadow: none;color: #fff;padding: 5px 10px;font-family: 'ge_ss_threeregular',Droid Sans;font-weight: 100;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} form i.fa.fa-pencil, form i.fa.fa-users,form i.fa.fa-envelope,form i.fa.fa-bars {padding:3px 5px;border-radius:3px;font-weight:normal;font-size:120%;float: right; margin-left: 10px;} form i.fa.fa-users {color:#ffa726;} form i.fa.fa-envelope {color:#22A1C4;} form i.fa.fa-pencil{color:#22A1C4;} .contact-button .fa.fa-envelope { margin: 7px; margin-top: 12px; }
ابحث عن </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>
إبحث عن <body> وضع الكود التالي اسفلها
*إذا لم تجد <body> قم بالبحث عن footerwrapper أو عن footer-wrapper وضع الكود التالي فوقه
<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'><span style='text-align: right;'><i class='fa fa-users'/>الإسم الكريم</span><input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/><span style='text-align: right;'><i class='fa fa-envelope'/>البريد الإلكتروني</span><input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/><span style='text-align: right;'><i class='fa fa-pencil'/>الرسالة</span><textarea cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'/><input id='ContactForm1_contact-form-submit' type='button' value='أرسل'/><br/><div style='max-width: 222px; text-align: center; width: 100%;'><div id='ContactForm1_contact-form-error-message'></div><div id='ContactForm1_contact-form-success-message'></div></div></form></div></div><a class='contact-close' href='#'><i class='fa fa-times'/></a></b:includable></b:widget></b:section>
الكود الآتي هو لتفعيل ظهر أيقونة الإتصال
يمكنك إضافتها بأي مكان تراه مناسب
<div class='contact-button'><a href='#'><i class='fa fa-envelope'/></a></div>
إلى هنا نكون قد انتهينا نلتقي قريبا إن شاء الله والسلام عليكم
No comments: