منتدى استراحات زايد - اضافة نموذج الاتصال بشكل جميل لمدونات بلوجر|swe-up

اضافة نموذج الاتصال بشكل جميل لمدونات بلوجر|SWE-UP

سوف نقوم باضافة نموذج مراسلة لمدونتك حيث يتيح لزوار مدونتك المراسلة الفورية عبر الGmail بخطوات سهلة تابع معي

http://www.traidnt.net/vb/images/img...14/04/1671.jpg
أولا :عليك التسجيل في بلوجر >>التخطيط>>إضافة أداة>>المزيد من الأدوات>>نموذج الاتصال جديد!! >>حفظ
لقد قمنا بانشاء نموذج اتصال بشكل مبسط لكن الان سوف نقوم بتغير مظهره ليصبح أجمل
ثانيا : عليك انشاء صفحة جديدة في مدونتك>>الصفحات>>صفة جديدة>>صفحة فارغة>>HTML
نختار اسم الصفحة ولنفرض اتصل بنا او contact us ثم نلصق الكود التالي في الصفحة الجديدة التي أنشئتها للتو ثم نشر
رمز PHP:

نموذج التواصل

يمكنك طرح استفساراتك وسوف نجيبك باذن الله.

بعد حفظ الصفحة نذهب إلى بلوجر>>قالب>>تحريرHTML>>نضع مؤشر الماوس في اي مكان داخل القالب>>نظغط Ctrl+F
ثم نبحث عن هذا الوسم ]]> ونلصق الكود التالي فوقه مباشرة
رمز PHP:

#ContactForm1
{
display: none ! important;
}

ثم نبحث عن هذا الوسم بنفس الطريقة ونلصق الكود التالي فوقه مباشرة
رمز PHP:

#ContactForm1{ display:none!important;}

/*---- Compatible contact Form by WG -----*/
.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/-bNZePDihTP.../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_IBW4cEt...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;
}

.WG-btnLogin

{
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:15px;
background:#a1d8f0;
background:-moz-linear-gradient(top, #badff3, #7acbed);
background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startC olorStr='#badff3', EndColorStr='#7acbed')";
border:1px solid #7db0cc !important;
cursor: pointer;
padding:11px 16px;
font:bold 11px/14px Verdana, Tahomma, Geneva;
text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
margin-center:12px;
float:center;
padding:7px 21px;
}

.WG-btnLogin:hover,

.btnLogin:focus,
.btnLogin:active{
background:#a1d8f0;
background:-moz-linear-gradient(top, #7acbed, #badff3);
background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startC olorStr='#7acbed', EndColorStr='#badff3')";
}
.WG-btnLogin:active
{
text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {

background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTP.../s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;

}

.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEt...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;
}
}

احفظ القالب ومبارك عليك الشكل الجديد لنموذج الاتصال
لا تنسانا من دعائك وكما استفدت من التدوينة اجعل أصدقائك يستفيدوا بمشاركة التدوينة عبر مواقع التواصل الاجتماعي او حتى عبر زر انقل هذه التدوينة لمدونتك كما يشرفنا ان تنضم لمدونتي في الجانب الأيسر صندوق انضم للموقع حتي يصلك كل جديد واي مشاكل تواجهها يمكنك ترك تعليقك أسفل التدوينة كما يمكنك ترك تعليق لتشجيعنا على الاستمرار
تحذير : ممنوع نقل الموضوع بدون ذكر المصدر مرفقا برابط الموضوع
هنا المصدر http://swe-up.blogspot.com/2014/04/swe-up.html