التخطي إلى المحتوى الرئيسي

انشاء نموذج تواصل رائع لمدونات بلوجر

 بسم الله الرحمن الرحيم

اظن من اسهل جدا الان على كل مدون ان يقوم بانشاء نموذج تواصل على مدونته ولكن البعض يكون غير راضى على التصميم الذى لايتماشى مع مظهر المدونة . اليوم سوف نقوم بانشاء نموذج تواصل رائع و سنقوم بشرح التعديل عليه ليصبح ذو مظهر جذاب يليق بتصميم المدونة . ....... . بدون اطالة نبدأ بشرج الاضافة

Custom Blogger Contact Form 

تركيب الاضافة


1. اذهب الى بلوجر > صفحات
2. اختار " صفحة فارغة "
3. قم بتسمية الصفحة و ليكن " اتصل بنا "
4. اختار html code ثم الصق الكود التالى 

<div class='form'>
<!-- Custom Contact Form By MBT Starts -->

<form name='contact-form'>

<!-- Name Field -->

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>

<!-- Email ID Field -->

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>

<!-- Message Field -->

<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>

<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>

<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>

<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

<!-- Custom Contact Form By MBT Ends -->
</div>
5. احفظ ثم قم بنشر الصفحة

تخصيص الكود 


1. اذهب الى بلوجر > قالب
2. اعمل باك اب للقالب
3. اختار "edit html"
4. ابحث عن </head> و الصق الكود التالى قبلها

<style>
/*---- Compatible contact Form by MBT -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}
     
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXMudeM2ASUb942mfohvoqsC3UibtBpxNWXfXkiQ7s9EaWslAaMz5YLkA1jCkeQ0CNfQJa1rt1cb-9ZmxBJiUugYwSwbDpDI5UenI6trtZgt9RwgFs7gcZRgLGilznSAJFA28rfpcpI6Y/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
     
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzNOryWFngyPVfaByl6YiX1SFpWQJmoEomTVvWfzCsigQr66xlvlJ-Vds-AKJcLmzkvn5n7v1bdCo_OVCOYe0MHoipkqZjCicyFtgZSV8dFZZv7ZAe_Uy66yUBovaxrscG-W9q0OGze4/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}

.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}

.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}

.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>

      <!--[if IE 9]>
    <style>
   
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXMudeM2ASUb942mfohvoqsC3UibtBpxNWXfXkiQ7s9EaWslAaMz5YLkA1jCkeQ0CNfQJa1rt1cb-9ZmxBJiUugYwSwbDpDI5UenI6trtZgt9RwgFs7gcZRgLGilznSAJFA28rfpcpI6Y/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzNOryWFngyPVfaByl6YiX1SFpWQJmoEomTVvWfzCsigQr66xlvlJ-Vds-AKJcLmzkvn5n7v1bdCo_OVCOYe0MHoipkqZjCicyFtgZSV8dFZZv7ZAe_Uy66yUBovaxrscG-W9q0OGze4/s320/email.png) no-repeat 7px 6px;
}
    </style>
    <![endif]-->
   
    <style>
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXMudeM2ASUb942mfohvoqsC3UibtBpxNWXfXkiQ7s9EaWslAaMz5YLkA1jCkeQ0CNfQJa1rt1cb-9ZmxBJiUugYwSwbDpDI5UenI6trtZgt9RwgFs7gcZRgLGilznSAJFA28rfpcpI6Y/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;

}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzNOryWFngyPVfaByl6YiX1SFpWQJmoEomTVvWfzCsigQr66xlvlJ-Vds-AKJcLmzkvn5n7v1bdCo_OVCOYe0MHoipkqZjCicyFtgZSV8dFZZv7ZAe_Uy66yUBovaxrscG-W9q0OGze4/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;
}

.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}

.contact-form-button {
height: 28px;
}
}
</style>
  • لتغيير الاوان قم بالتعديل على وسم  .MBT-button-color 
5. احفظ القالب و بكده نكون انتهينا

المشاركات الشائعة من هذه المدونة

اضافة المواضيع الشائعة ب css اكثر من رائعة

السلام عليكم و رحمة الله و بركاته باذن الله سوف نقوم بشرح اضافة من اهم اضافات البلوجر وهى اضافة المواضيع الشائعة فهذه الاضافة تساعد الزائر على معرفة اخر المواضيع فى مدونتك و الاطلاع على كل جديد لديك و لكن غالبا يكون شكلها ليس جيدا و يخرب شكل المدونة الاضافة التى ساشرحها تمتع بشكل جمالى اكثر من رائع ..... بدون اطالة معاينـــة الاضافة     -   شرح تركيب الاضافة قم بتسجيل الدخول الى لوجة التحكم   اختار " قالب "   ثم اضغط على " تحرير html "  ابحث عن هذا الكود ]]></b:skin> الصق الكود التالى قبله .popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px; list-style-type: none;padding:5px 5px 5px 20px !important; border: 1px solid #ddd;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; height: 40px; -moz-box-shadow: 3px 2px 5px #242424; -webkit-box-shadow: 3px 2px 5px #242424; box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;heigh

مراجعة هاتف nokia lumia 930

السلام عليكم و رحمة الله و بركاته نظام ويندوز فون الان يتراوح عمره الى حوالى الاربع سنوات و حتى الان لم يحصل على ذلك الاهاتف المميز الذى يستطيع كافة امكانياته و الذى يجعله يستطيع المنافسه مع الايفون و الاندرويد . نوكيا لوميا 930 يبدو من مواصفاته انه سوف يكون هذا الهاتف مع امكانيات مثل شاشة super amelod و معالج خارق و التحديث الاخير و الافضل لويندوز فون حتى الان تجعل منه منافس لاكبر الهواتف فى العالم حاليا ... فى هذا المقال سوف نستعرض مميزات و عيوب هذا الهاتف الاكثر من رائع ...   ميزة clearback display    ميزة clearback display فى شاشة ال super amoled المستخدمة فى موبايل نوكيا لوميا 930 اكثر من رائعة و بالرغم من اعتقاد الكثيرين ان شاشة lcd افضل من ال amelod لكون الالوان تكون اكثر طبيعية و الاضاءة تكون افضل من ال amelod الا ان الشاشة المزود بها هذا الهاتف اكثر من رائعة و مع مميزات مثل وضوح اللون الاسود التباين العالى جدا و الالوان الاكثر من رائعة بدرجة وضوح فى الالوان اعلى بكثير من شاشة lcd تجعل من استخدامه تجربة اكثر من رائعة. هذه الميزة تجعل live tiles با

انفوجرافيك كيف تبدأ مشروع تصميم موقع ويب

السلام عليكم و رحمة الله و بركاته لاشك ان العمل من خلال الانترنت او ما يسمى بالعمل الحر اصبح فى الاونة الاخيرة مبتغى كثير من الاشخاص لسهولة الربح فيه كما انه لايتطلب التمسك بوقت معين للعمل او الانقياد لاوامر مزعجة من رؤساء العمل بمعنى اخر سوف تصبح انت مدير نفسك تحدد الوقت الذى ترغب فى العمل فيه و نوعية العمل الذى يتوافق مع رغباتك .... لذلك معنا اليوم انفوجرافيك بسيط عن كيفية بدأ اول مشروع ويب خاص بك فهو يحدد مراحل تصميم موقع ويب متكامل مع متطلبلت كل مرحلة ..  الانفوجرافيك      المصدر