القائمة الرئيسية

الصفحات

إضافة أداة إتصل بنا عائمة لمدونة بلوجر



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





البداية من المعاينة المباشرة ، ستجدون ظرف في الطرف الأيمن للمدونة ومع تمرير شارة الفأرة عليه ستنزلق أداة إتصل بنا :

معاينة مباشرة


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

من لوحة تحكم المدونة أدخل إلى :
التخطيط إضافة أداة ( أضف الأداة في أي مكان لأنها في كل الحالات ستظهر بشكل عائم)،
ثم إختر أداة HTML/JavaScript وأضف داخلها الكود التالي :


12345678910111213141617182021222324252627282930313233353637394041424344454647484951525354555658596061636465666768697071727374757677787980818283848586
<style type="text/css">.form-float {  width: 323px;  height: auto;  background: transparent urlundefined'https://1.bp.blogspot.com/-zibAlG5Gdz4/XpIkH_ubElI/AAAAAAAACnI/rEwP5gO3_XkaQ-j17uCpgXEmU8rQ69QZwCLcBGAsYHQ/s1600/contact-button.png') no-repeat left 10px;  position: fixed;  top: 150px;  right: -275px;  z-index: 9999999;  transition: all ease .6s;  -moz-transition: all ease .6s;  -webkit-transition: all ease .6s;  -o-transition: all ease .6s;}.form-float:hover {  right: 0;}.nf-float-form {  background: -moz-linear-gradientundefinedtop, #2b2 5%, #00248E 100%);  background: -webkit-linear-gradientundefinedtop, #2b2 5%, #00248E 100%);  background: -o-linear-gradientundefinedtop, #2b2a2b 5%, #0a0a0a 100%);  background: -ms-linear-gradientundefinedtop, #2b2a2b 5%, #0a0a0a 100%);  background: linear-gradientundefinedto bottom, #2b2a2b 5%, #0a0a0a 100%);  color: #fafafa;  padding: 10px;  width: 250px;  border: 2px solid #000;  border-radius: 5px;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;}#ContactForm1 {  display: none;}.contact-form-area {  background: #176bab;  width: 245px;  padding: 10px 0px;  border: 1px solid #111;  box-shadow: -2px 2px 2px #111 inset;  -webkit-box-shadow: -2px 2px 2px #111 inset;  font-family: Verdana, Geneva, sans-serif;  color: #fafafa;  font-size: 12px;}#nf {  float: left;  font-size: 9px;  margin-top: -10px;  color: #777;}#cc a {  color: #777;  text-decoration: none;}</style><div class='form-float'><form name="contact-form" class="nf-float-form"><p></p>الإسم:<br /><input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" /><p></p>الإيميل:<span style="color:red;">*</span><br /><input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" /><p></p>النص <span style="color:red;">*</span><br /><textarea class="contact-form-area" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea><p></p><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="أرسل" type="button" /><p></p><div style="text-align: center; max-width: 222px; width: 100%"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div>


أحفظ الأداة وقم بتحديث الصفحة وإستمتع بالإضافة.
أتمنى أن يعجبكم الشرح و الإضافة ، 

تعليقات