recent
أخبار ساخنة

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

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


  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="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="
</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="
</p><div class="submit"><input type="submit" value="ارسال" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
<div class="ease"></div></div></form></div>
google-playkhamsatmostaqltradent