الطريقة هي من خلال إضافة كود Css بعد اضافتنا لإضافة نموذج الاتصال. أولا لإضافة نموذج الاتصال يمكنك الذهاب الى تخطيط layout ثم إضافة أداة Add a Gadget واختيار نموذج الاتصال Contact Form. ومن أجل تخصيص النموذج بألوان أخرى نقوم بالذهاب إلى القالب ثم تحرير html ثم سنقوم بالضغط على (Ctrl+F) ونبحث عن الوسم:
]]></b:skin>
وأخيرا اختر أحدد التصميمات التالية مما يتوافق مع ألوان مدونتك وضع الكود فوق الوسم السابق
التصميم الأول
.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;
}
التصميم الثاني
.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;
}
التصميم الثالث
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGySQU0_jlwiuiah735fIBwRJe7nSBFJROuJ7ziF-mLM3q36ER-nvjcV1YmMN21vJVQ3GeaDPnBh2ImdVuMK6ae8EQWR_Wge7wnSzS1nXH19iWmVGr8vQEDL7hluWRxUHf9y2NkyEpnNM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjImYQm7Yk777SqGI7F61Wq4AOEgngkoocPsCH6PD_RIvHMqtgE7BrL0NHa4Igc4I5EYio205-cfnmw4LAuI7UFthVVxk-Np-WQr33191Qxi2AU5e5TaxLChDk2B6Bg7zv3ay_henJ8fbuM/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;
}
التصميم الرابع
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbui25cFpFviYn_xSe48AbFbji6UDAIC1EQxuDNWWW7jhk1C8LeYkCsRDXxQxjZTKGa-JttyFnxVsysH4ZHaydf0Nhc2C_vTMNFR8KqaeYzcIn8uT9NIQcA_X0AxL69_R_rr8BTglAsae/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;
}
.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;
}
التصميم الخامس والأخير
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgboPxnwQ_DyGMDg_JS4Hod9ck9IENZqgtK9y5PX1McERwqkN0v_wwj74UEjQIPKoCoC-QgeP-Gbx2s4gaVMRmK8Xdl4xQlosxFtXOlWzx2-tNFY6NbscBJGBKF2845uXH93jne17n3EQWd/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
.contact-form-widget:before {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt8BpWp_YiNCf26H3ZJUH96bSXJC-EBtB9sZ9DtLvZQLzSY1TUBWdKTcPug1-2Fqlf89vCoZPNR0tvZs1TPR-R2AOcl4-DaMZk-_Zqo0Kz5wPgPf_VL7RdsmF1Qyp8IZpa_FE-rL0N4m22/s160/lazo.png);
background-repeat: no-repeat;
background-position: 100% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.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;
}
بعد اختيارك للشكل والتصميم الأفضل لمدونتك قم بحفظ القالب وعاين بنفسك.
كيف تستهدف كلمة مفتاحية عبر التعليقات في مدونتك
السلام عليكم ورحمة الله تعالى وبراكته
في هدا الموضوع الجديد أردت أن أريك طريقة استهداف
أفضل الإستراتيجيات للربح من شبكة حسوب للتسويق بالعمولة
التسويق بالعمولة: التسويق بالعمولة هو أن تقوم أنت (المسو
مات كاتس: أشهر 5 أخطاء في السيو
في هذا الفيديو الحديث المنسوب لـ مات كاتس – مسؤول جودة البحث والويب سبام وتحسين نتائج البحث ف
نشر المدونة في محرك البحث bing و yahoo - بالفيديو
مرحباً بكم زواري واعضاء المدونة
اليوم لدينا شرح نشر المدونة في محرك البحث ياهو وبينج bin
كيف تمنع أي شخص من الدخول إلى مدونتك أو موقعك
السلام عليكم ورحمة الله وبركاته
كثيرا ما تصادف أشخاص يحاولون إفشالك ببعض التعليقات الصب
طريقة اضافة الفوتوشوب اون لاين لبلوجر
اليوم سوف نتطرق لطريقة اضافة الفوتوشوب اون لاين
لمعاينت الكود قبل اضافته
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )
تحويل كودإخفاء محول الأكواد الإبتساماتإخفاء