السلام عليكم ورحمة الله وبركاته
أهلا وسهلا بكم متابعين مدونة اسمعنى اون لاين ، اليوم نشارك لكم درس جديد في دورة بلوجر الإحترافية وهو إنشاء إتصل بنا بشكل منبثق علي بلوجر .
الطريقة سهلة جداً ولا تحتاج الى مجهود كبير ولا خبرة فقط في دقائق معدودة يمكنك من انشاء اتصل بنا بشكل منبثق علي بلوجر .
شرح التركيب
التركيب عبارة عن بعض الأكواد التي سوف تقوم بتركيبها في القالب التي تريد انشاء الصفحة عليه ، كل ما عليك فعله هو اتباع شرح الفيديو لكي تفهم أكثر كيفية التركيب .
الأكواد
الكود الأول وهو ما تقوم بوضعه فوق هذا الوسم <head/>
أهلا وسهلا بكم متابعين مدونة اسمعنى اون لاين ، اليوم نشارك لكم درس جديد في دورة بلوجر الإحترافية وهو إنشاء إتصل بنا بشكل منبثق علي بلوجر .
الطريقة سهلة جداً ولا تحتاج الى مجهود كبير ولا خبرة فقط في دقائق معدودة يمكنك من انشاء اتصل بنا بشكل منبثق علي بلوجر .
شرح التركيب
التركيب عبارة عن بعض الأكواد التي سوف تقوم بتركيبها في القالب التي تريد انشاء الصفحة عليه ، كل ما عليك فعله هو اتباع شرح الفيديو لكي تفهم أكثر كيفية التركيب .
الأكواد
الكود الأول وهو ما تقوم بوضعه فوق هذا الوسم <head/>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>أما الكود الثاني سوف تقوم بوضعه فوق هذا الوسم ]]></b:skin>
.contact-button {} .contact-button a {padding: 9.7px;color: #243750!important;display: inline-block;font-size: 190%;font-family: droid arabic kufi;text-shadow: 0 -1px 0 rgba(115, 114, 114, 0.3);float: left; font-size: small; ;margin-top: 2px; margin-left: 60px;} .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: #c51813;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%; font-family: 'Droid Arabic Kufi', serif;} textarea#ContactForm1_contact-form-email-message {padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-top: 10px;width: 100%; font-family: 'droid arabic naskh'; font-size: 14px;} .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, #c51813 0%, #c51813 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;}
أما الكود الثالث سوف تقوم بوضعه فوق هذا الوسم <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>أما الكود الرابع سوف نقوم بالبحث عن هذا الوسم ولا بد أن يكون div ووضعه الكود فوقه footerwrapper أو عن footer-wrapper
<b:section class='contact-sec' id='contact-sec' maxwidgets='1' showaddelement='yes'> <b:widget id='ContactForm1' locked='true' title='إتصل بنا' type='ContactForm' version='1'> <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='font-family: cursive,droid arabic kufi;text-align: right;'><i class='fa fa-user'/> الإسم الكريم </span> <input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <span style='font-family: cursive,droid arabic kufi;text-align: right;'><i class='fa fa-envelope'/> البريد الإلكتروني <span style='color:#fff;font-weight:normal;font-size:x-small;padding:0 3px 1px 3px; font-family: ge_ss_threeregular; border-radius:3px;background:#595656;line-height:normal;margin-left:5px;;'> مهم </span></span> <input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <span style='font-family: cursive,droid arabic kufi;text-align: right;'><i class='fa fa-pencil'/> الرسالة <span style='color:#fff;font-weight:normal; font-family: ge_ss_threeregular; font-size:x-small;padding:0 3px 1px 3px ;border-radius:3px;background:#595656;line-height:normal;margin-left:5px;;'> مهم </span></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>