اضافة كود اتصل بنا لمدونة بلوجر

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

تركيب واضافة كود اتصل بنا بلوجر بشكل جميل وراقي، ويسهل اضافة كود اتصل بنا لمدونة بلوجر على تواصل الزائرين مع اصحاب المدونات، وهذه الاكواد يعتبر مهم وجودها في كل مدونة لفتح المجال للزائرين للتواصل مع اصحاب المدونات.

كود اتصل بنا بلوجر

بالبداية توجه الى ادارة المدونة اختار التخطيط >>إضافة أداة >>نموذج الاتصال

اضغط الان حفظ.

الان نأتي لاضافة الاكواد اختار المظهر >>تعديل HTML

اضغط من الكيبورد على Ctrl + F وابحث عن هذا الوسم " </head> " وقم باضافة الكود الاسفل اعلاه.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

ابحث الان عن هذا الوسم " ]]></b:skin> " وقم باضافة الكود الاسفل اعلاه، واضغط على
حفظ المظهر .

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

والان طريقة اضافة الكود الاخير، ويجب علينا انشاء صفحة جديدة تابع..

اذهب الى ادارة المدونة الرئيسية اختار الصفحات >>صفحة جديدة >>HTML

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

<form name="contact-form">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> الإسم</span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><i class="fa fa-envelope"></i> بريدك الإلكتروني <span style="color: red; font-weight: bolder;">*</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><i class="fa fa-pencil"></i> رسالتك <span style="color: red; font-weight: bolder;">*</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<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>