Loading...
مفضلة





طريقة عمل صفحة اتصل بنا بلوجر - انشاء صفحة مدونة بلوجر اتصل بنا

تم النشر بواسطة : mohamed kamel | في الاثنين، 16 سبتمبر 2013 | 1:32 م


طريقة عمل صفحة اتصل بنا بلوجر - انشاء صفحة مدونة بلوجر اتصل بنا


معروف ان من يبحث علي تدوين أفضل و شهرة مدونته لابد ان يتواصل مع زوار مدونته ، حيث انه قد يكون هناك تعليقات مهمة علي مظهر المدونة او تعليقات علي خصوصية لا يجب ان تنشر علي الملأ في التعليقات ، فقد يتعلق الاتصال بشئ خاص مثلاً كـ إعلان او طلب و ظيفة او طلب تحديث معين لموضوع معين ، و نظراً لان زوار المدونة يحبون ان يكون لديهم وسيلة اتصال مع صاحب الموقع فنقدم لكم اليوم موضوع مميز و وهو عن طريقة عمل صفحة خاصة علي مدونة بلوجر " اتصل بنا " و قد أوضحت مسبقاً ان هذه الصفحة قد يكون لها أهميتها .



طريقة عمل صفحة اتصل بنا علي بلوجر




  • اذهب الي لوحة تحكم بلوجر .
  • ثم اذهب الي الصفحات




  • اعطها اسم كما تحب و لكني أفضل ان يكون اسمها "Contact Us" .
  • ثم حول لوحة الكتابة الي HTML بدلا من تأليف .
  • ثم انسخ الكود التالي 



<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>


نصيحة لا تحول الي تأليف مرة أخري ، لانك سوف تفقد الصفحة بالتعديلات الموجودة عليها ، ثم قدم نشر الصفحة كما هي علي صيغة HTML .

الان نستكمل .

  • اذهب الي لوحة التحكم ببلوجر مرة اخري .
  • ثم اضغط علي تخطيط
  • خذ نسخة احتياطية أولاً من القالب من هنا . 


  • ابحث عن الكود :

</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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;
}
.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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> 

ثم احفظ القالب علي هذا الحال :)

رجاءً اذا أرتأيت مالم يعجبك فضلاً قم باستخدام النموذج اتصل بنا و تأكد اننا سنكون سعداء بشكواك ، و ان كان لديك أقل تعليق و أبسط تعليق لا تحرمنا منه ، شاكر مروركم الجميل و العظر دوماً :) .
الموضوع التالي الموضوع السابق




2 التعليقات:

نور الهدى يقول...


نستخدم افضل ادوات تنظيف و غسيل الخزانات لاننا افضل شركة غسيل خزانات بالمدينة المنورة و عمال مروبون وحاصلون على شهادة صحية فقط اتصل بنا لتحصل على افضل خدمة غسيل خزانات بالمدينة المنورة


نور الهدى يقول...


ارخص شركة نقل عفش بمكة
شركة نقل عفش شمال الرياض
شركة نقل عفش شرق الرياض
شركة نقل اثاث من الرياض الى المدينة المنورة

____________

إرسال تعليق