اضافة الاشتراك في القائمة البريدية كما في مدونة تعلم الامن المعلوماتي

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

 اولا

تقوم بلبحث عن الكود التالي.

]]></b:skin>

بعدها نضيف قبله الكود التالي :

ins{width: 100%;
height:63px;
margin-top:19px;
}
.ins .txt2 {
border: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQGUn8QYj0yopRGeJ2wsCnSprg4kGv4CNr0t3LSlLqO7RH2moDOFginyiENXa6d4CNnrYBoOkIvFO3yB763dsk_jzJERjb5hgRCRQeL9xHxowH65o1ViPBNduKx0wmSa8aWHzUL-dEpM/s1600/back-sub.png);
font: 13px Tahoma, Geneva, sans-serif;
color: #adadad;
padding: 24px 7px 23px;
float: right;
margin: 0;
text-align: right;
width: 200px;
}
.ins .btn2 {
background: #ffb546 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiscwRPdf3QjaoqZAUi_r5P5iVVmzkofYZ-0UZzEm7D0vJg1Hqb_laS3VkxKM9yITuW7L_UcDGWdDg5pmT6dIyZkPcCacM5muyXFcNxoR1uIQzWVwThnrB1L1gQ0crEBl13XWJZC7oN_rc/s1600/btn-sub.png) center no-repeat;
float: right;
border: none;
border-right: 3px solid #ffa116;
width: 63px;
height: 63px;
cursor: pointer;
}
.ins .btn2:hover {
background: #ffb546 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTh2HlzT1PzlIY9UjXoD-nFJuQyrBAD5IFNB04JGCwHAvDuDHgq1XeH6KWz_YADBFkoxuPJp0-qLzKx4zpG8MpBMsHRcsR9I9P-zU5l3pKwMEkovZjvi5e-dmbtuHnjdo35MjOX7ox7hM/s1600/back-sub2.png) center no-repeat;
}

بعد اضافتك للكود قم بحفض القالب وبعدها توجه الى تخطيط اضافة اداة جافا سكريبت واضف الكود التالي .

<div class="ins">        <center>        <div id="sleek-subscribe">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=th3pf", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow">
<input class="follow-by-email-address txt2" name="email" placeholder=" ضع ايميلك هنا ليصلك كل جديد" type="text" /><input class="follow-by-email-submit btn2" type="submit" value="" /><input name="uri" type="hidden" value="th3pf" /><input name="loc" type="hidden" value="en_US" /></form></div></center></div>

بعدها قم بألتغيير ك الاتي : * قم بتغيير جميع الكلمات المؤشرة بلون الاحمر برابط التغذية الخاص بك والى القاء الى اضافة جديدة :) - 

Tweet

شرح اضافة نموذج اتصل بنا في صفحة خاصة

السلام عليكم ورحمة الله وبركاته

اليوم موضوعنا هو اضافة نموذج اتصل بنا في صفحة html خاصة

وعدم ضهوره في التخطيط وبشكل جميل جدا واحترافي وعدم الحاجة الى 

اكواد ال css 

ـــــــــــــــــــــــــــــــــ

الخطوات

ـــــــــــــــــــــــــــــــــــــــ

اذهب الى >>blogger << بعدها الى >>الصفحات<<

ومن ثم قم بانشاء صفحة جديدة وضع فيها كود ال html التالي :

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
أسمك الكريم
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
البريد الألكترونى
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
نص الرسالة
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="أرسال" />
<br />
<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>
</form>
</div>
</div>
</div>
<style>
/* Contact Form Container - www.cairo-pro.com */
.contact-form-widget {
text-align: right;
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
font-family: GESSTwoMediumRegular,Georgia;
font-size: 17px;
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* www.cairo-pro.com - Submit button on mouseover */
.contact-form-button-submit:hover{
cursor:pointer;
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
P.comment-footer ,.comments{  visibility:hidden; }
</style>
</div>

وبعدها قم بحفض الاضافة واستعراضها وستجدها في غاية الجمالية

Tweet