• الرئيسية
  • القران الكريم
  • البرامج
  • الحماية
  • الويندوز
  • العاب
  • فوتوشوب
  • شروحات
  • فيسبوك
  • بلوجر
  • خدماتى
  • خمسات
    • الأربعاء، 23 أبريل 2014
    6:39 ص
    » » » 5 تصميمات أنيقة لنماذج إتصال مخصصة لمدونات بلوجر

    5 تصميمات أنيقة لنماذج إتصال مخصصة لمدونات بلوجر

    الطريقة هي من خلال إضافة كود 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/AVvXsEheDF5PCqrWloknlR_kh0z8NClCNqFjGvZWJAwze4bd8o4ODmjM9ohOJrWC8FDHU57qXQKFae9vI6xRCDByctIaqfqXHfREoY5TvJ6QpN2u8sA4qHwKdmU__0ux_y4uOEx5OGeTdcs4aQ6P/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/AVvXsEjVmNOX8gNb7OZbDCGQaOBlbnXrdWuVYV19fPSpYyOwZ2NUNAeWtP0Xj7WpKeLk_t9OLGxMyq30_myxUkN39R3K3D6Nk_5RMC71Xm4UWyJae3EQQ0L65ZxPsxRGYGM5a0VlQhp6FBAn5KF0/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/AVvXsEh7OgIuwvSv4k1Lmt19qZmu4iT_zqx879y7a085rrVL6P_pAc7EZRVSaZSg_7jooBzMtKx5xmjSYJLtYh7gf6QUBhciTqfryoRsgqB-nKK8xTSZm_ETI_9VBpE921Vo4lwR-Xjof-1NOPO6/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/AVvXsEjfDt_H3dQHVjOqaNV4g_Tu-0EqQLcty9EQpKayOh9OcNn55pDLmnp6qika_IsaxGzaeLvvfGfqxMjY87PvTBn-qAVFSC6W6cjv32WmcAHg1sg6erjKj_9oLy17c9PfV-RSVbyzc3Fdfehh/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/AVvXsEj_Ejae1a5rEeK3PRulDs0qZT_qmoMXfDkZNpvgn7-5kCIvP1O9wrXv7hYp9tKG_bAK4vjEY9XVKuV3A7fKrA_1Nd0e6v1Zgqm-QIuR56XNr1s_aLh6548GW7gdR8Uv4We90-sSvsr8Qm0w/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;
    }
    بعد اختيارك للشكل والتصميم الأفضل لمدونتك قم بحفظ القالب وعاين بنفسك.
    مرسلة بواسطة في 6:39 ص
    شارك الموضوع علي

    0 التعليقات:

    إرسال تعليق

    الاشتراك في: تعليقات الرسالة (Atom)