Download Android App

Mohon Aktifkan Javascript!Enable JavaScript

Blogger

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

romzeninfo June 26, 2016

0 0 3 minutes read

شرح تركيب و اضافة نموذج الاتصال في مدونة بلوجر log blogger 2016 لجعل مدونتك مميزة

اقدم لكم ستايلات مجموعة جميلة تجذب الزائر من طريقة ظهور مدونتك بشكل جميل

و اليكم الشرح

من لوحة تحكم مدونتك –>> التخطيط –>> إضافة أداة ثم أختر اداة نموذج الأتصال:

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

بعد إضافة النموذج حيث تريد ظهوره اتجه للقالب ثم أنقر على تحرير HTM الآن أختر شكل من الأشكال الموضوعة أسفل كل صورة ثم نسخ الكود الخاص بها والصقه فوق الرمز ]]></b:skin>مباشرةً

طريقة البحث عن الأكواد في بلوجر

شكل رقم 1

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
background: url(//lh4.googleusercontent.com/-wz6C40j6prM/Uyjo-r3lQSI/AAAAAAAAKIo/eTCpE9uVrCw/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-email-message {
padding: 5px;
}
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #d1f6ff;
color: #424242;
border: none;
}

شكل رقم 2:

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: #282828;
border-bottom: 35px solid #98bd3c;
color: #98bd3c;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-email-message {
padding: 5px;
}
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #98bd3c;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #282828;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #F9D423;
color: #282828;
border: none;
}

شكل رقم 3:

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(//lh3.googleusercontent.com/-GqNaPfpbCw4/UyjXvLmWlOI/AAAAAAAAKIM/qHtxyZYRPUc/s74/postal.png);
color: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.contact-form-widget div.form {
background: #fff;
background-image: url(//lh4.googleusercontent.com/-tXb0r3XoQlU/UyjaViCJFrI/AAAAAAAAKIY/3HV7tKODyIQ/s133/stamp.png);
background-repeat: no-repeat;
background-position: 95% 85%;
padding: 1px 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 5px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #a14248;
border: none;
}

شكل رقم 4:

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
float: left;
padding: 10px;
background: #d5dde6;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
}
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #4a7694;
border: none;
}

شكل رقم 5:

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

اضافة نماذج و ستايلات مختلفة لنموذج الاتصال في مدونة بلوجر و شرح طريقة التركيب

.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #424242;
border-bottom: 25px solid #424242;
background: url(//lh3.googleusercontent.com/-dJy1C7rwmEQ/Uyj-q5JD1cI/AAAAAAAAKJU/oaOXETgXO3c/s128/metal.gif);
color:#424242;
text-shadow: 1px 1px 1px #FFFAFB;
box-shadow: -6px 6px 6px 0px rgba(50, 50, 50, 0.65);
border-radius: 18px;
float: left;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: auto;
border: none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
background: -webkit-linear-gradient(top, #424242, #575757);
background: -moz-linear-gradient(top, #424242, #575757);
background: -ms-linear-gradient(top, #424242, #575757);
background: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
margin-bottom: 10px;
float: right;
}
.contact-form-button-submit:hover{
background: #424242;
color: #ccc;
border: none;
}

أختر الشكل المناسب لقالب مدونتك ثم يمكنك حفظ القالب

و لاتنسوا تتابعنا علي فيس بوك و الموقع و قناة اليوتيوب و جوجل بالاشتراك حتي يصلك الجديدة

و في حالة حدوث اي مشكلة او اذا كان لديك استفسار فلا تتردد ان تكتب لنا في موقع اوروبا

What’s your Reaction?

Love

0

Love

Smile

0

Smile

Haha

0

Haha

Sad

0

Sad

Star

0

Star

Weary

0

Weary

Tags

romzeninfo June 26, 2016

0 0 3 minutes read

romzeninfo

Leave a Reply Cancel reply