اَمني للمعلوميات اَمني للمعلوميات
حصريات

آخر الأخبار

حصريات
random
جاري التحميل ...

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


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


  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>

عن الكاتب

Moulai Amine ، مدون عربي جزائري الجنسية اصيب بجنون التدوين و متابعة الجديد و حب المنافسة في هذا المجال ، وأهتم بجديد التقنيات وتطوير البرامج هدفي من خلال هذه المدونة هو مشاركة كل ما اراه مناسب و جديد و يأتي بالفائدة على الجميع انشاء الله ،
  1. أزال المؤلف هذا التعليق.

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

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

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

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

    ردحذف

التعليقات



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

إتصل بنا

عن الموقع

موقع أمني للمعلوميات مختص في مجال التكنلوجيا و التقنيات و كل ما يخص الهواتف الذكية و الحواسيب ، و هدفنا هو تصحيح االأفكار و الدروس الخاطئة في المحتوى العربي عن طريق دروس و حلقات في قناتنا على اليوتيوب ، كما يسهر على إشراف و سير الموقع الشاب الجزائري ذو 24 ربيع ' مولاي أمين ' الذي يحييكم و يشجعكم على الزيارة الدائمة و الإشتراك في موقعنا للتوصل بكل جديد منا .

حمل تطبيقنا !

Get it on Google Play

تغريداتي

جميع الحقوق محفوظة

اَمني للمعلوميات