إضافة أكثر من رائعة تضيف جمالية و احترافية اكبر للقالب من جهة ، و من جهة ثانية تكسر حاجز الاتصال بين مدير الموقع و المتابعيين الخاص به ، و كذا سيتمكن الاشخاص من الاتصال بك عن طريق اضافة منبثقة تكون على شكل زر و اول ما يضغط عليها تنبثق في المدونة بشكل جميل جدا .
نرجو منكم اتباع كل الخطوات و اخذ نسخة احتياطة لقالبك قبل البدء في التركيب .
طريقة التركيب :
1 - الكود الاول خاص بالأيقونات ضعه فوق و في حال كنت تتوفر عليه فلا داعي لإضافته2. ابحث عن ]]> في قالبك ثم ضع الكود التالي فوقه (قبله)
.contact-button {}
.contact-button a {padding: 9.7px;color: #FFFFFF!important;display: inline-block;font-size: 190%;font-family: droid arabic kufi;background: #0FD2AD;text-shadow: 0 -1px 0 rgba(115, 114, 114, 0.3);float: left;}
.contact-close:hover {color: #0894D8;background: #818484;}
.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: -13px;background-color: #0FD2AD;color: #FFF!important;height: 25px;width: 25px;text-align: center;border-radius: 25px;line-height: 25px;font-size: 13px;left: 90%;}
.contact-sec .widget {padding: 20px;}
.contact-sec .contact-form-cross {display: none;}
#ContactForm1 h2 {font-size: 16px;text-align: center;color: #848889;border-bottom: 1px dashed #eee;padding-bottom: 8px;font-family: droid arabic kufi;}
.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 {text-align: right;margin-right: 10px;font-family: droid arabic kufi;}
#ContactForm1_contact-form-submit {font-family: droid arabic kufi;background: #fff;color: #aaa;vertical-align: middle;cursor: pointer;padding: 1px 15px!important;font-weight: 700;font-size: 13px;text-align: right;border-radius: 3px;background-image: linear-gradient(110deg, #0FD2AD 0%, #0FD2AD 50%, transparent 50%, transparent 100%);
background-size: 200%;background-position: 120% 0;background-repeat: no-repeat;transition: all .8s ease, background-position .8s ease, color .8s ease;border: 1px solid #eee;float: right;margin-top: 10px;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#DD4537; border: 1px solid #eee;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top: 55px;font-family: cursive;font-size: 14px;color: #FFF;
background: #0FD2AD;}
.contact-form-error-message-with-border {background: #ED5345;border: none;box-shadow: none;color: #fff;padding: 5px 10px;font-family: cursive;}
.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-user,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-user {color:#7986cb;}
form i.fa.fa-envelope {color:#ffa726;}
form i.fa.fa-pencil{color:#FC4F3F;}
3 - ابحث عن في القالب وضع فوقه الكود التالي :
4 - إبحث عن footerwrapper أو عن footer-wrapper وضع الكود التالي فوقه (( ملاحظة : المقصود سيكون به Div أي هكذا 5 - الكود التالي هو لتفعيل ظهور أيقونة الإتصال و يمكنك إضافته في المكان الذي تريد :
ان واجهتكم اي مشاكل فقد يكون المشكل في قالبك .
عن الكاتب
Dimitry
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة
ضع تعليقك