إضافة صندوق إتصل بنا بتصميم جميل لمدونات بلوجر


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


  1. 1 - تذهب الى بلوجر .
  2. 2 - تذهب الى القالب .
  3. 3 - تدخل الى تحرير HTML.
  4. 4 - تقوم بنسخ الكود CCS الذي في الاسفل وتقوم بلصقه فوق ]]></b:skin>
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html{ background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;
background-size: cover;
height:100%;
}
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: Droid Arabic Kufi,Roboto;
font-weight:700;
font-size: 15px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
padding-bottom: 7px;
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
/* Icons ---------------------------------- */
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: Droid Arabic Kufi;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:15px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
@media only screen and (max-width: 580px) {
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}


  1. 5 - تقوم نسخ كود HTML  التالي و تضعه في صفحة جديدة او اينما تريد ان يظهر الصندوق  
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="الاسم" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="الايميل" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="تعليق"></textarea>
</p>
<div class="submit">
<input type="submit" value="ارسال" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
إضافة صندوق إتصل بنا بتصميم جميل لمدونات بلوجر إضافة صندوق إتصل بنا بتصميم جميل لمدونات بلوجر Reviewed by Moulai Amine on 8:16:00 م Rating: 5

هناك 6 تعليقات

  1. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. فقط لاضافة مواضيع ههه

      حذف
    2. أزال المؤلف هذا التعليق.

      حذف
  2. نرجو منك الشرح بالفيديو خويا

    ردحذف
  3. شكرًا أخ أمين / www.self-educ.com

    ردحذف