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

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

العديد من مدونات بلوجر لا تحتوي على صفحة إتصل بنا الخاصة بالتواصل بين الزوار ومدير الموقع ولهذا يلجأ الزوار إلى كتابة استفساراتهم أو طلباتهم في التعليقات. فلا يجب أن نغفل أبداً الدور المهم لصفحة إتصل بنا لجميع المواقع وليس المدونات فقط كما أن وجود هذه الصفحة تشجع الزوار على التواصل مع المدون أو مدير الموقع بكل حرية دون الحاجة لكتابة تعليقات على المقالات والتدوينات. وفي مقالنا اليوم سنوضح لكم كيفية إنشاء صفحة اتصل بنا لمدونات بلوجر بكل سهولة .

معاينة الاضافه

اولاد : نقوم بنسخ الكود CCS الذي في الاسفل ونقوم بلصقه فوق ]]>

@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%;
 }
}

ثانيا : نقوم بنسخ كود HTML الذي في الاسف ونضعه في صفحه جديده