طريقة اضافة الاشتراك فى القائمة البريدية بشكل جميل وجذاب بتقنية css للمدونات

بسم الله الرحمن الرحيم والصلاة والسلام علي سيدنا رسول الله محمد صلي الله عليه وسلم

بكل ود وحب اقدم لكم اضافه رائعه وفى غايه الاهميه

لاتستغنى عنها اى مدونه

الاوهى الاشتراك بالقائمة البريدية وهذا سهل وللعلم جئتكم بشكل مميز ورائع

تتميز هذه القائمه بـ :

اضافة سهله وبسيطة
بها حقل لاضافة الاسم وليس البريد فقط
الشكل الجميل والمبهج

نقدمها لكم فى مدونه تقنيه

ولمعرفة كيفية الاضافة تابع الشرح معي

اولا بعد فتح صفحه تحكم مدونتك اضغط على قالب

ثم تحرير html

كما موضح بالشكل

بعد ذلك نبحث عن هذا الكود

ثم بعد ذلك نضيف فوقة اى قبله مباشرة هذا الكود

.rss {<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">width: 994px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">height: 80px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">padding: 10px 0px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">background: #F8F8F8;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">border-radius: 5px 5px 5px 5px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">box-shadow: 0 0 3px #ABABAB;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">margin: 0 auto 20px auto;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">}<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">.rss .btn2 {<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp4Px6PYvqLu-iInR2wLFxlFmF7qEgsZVr303-S4IEZu8RLDPDls9qQl8q1qWLewEndyIlYQUNfVLMwZwZqfghcVKLyDibV08B5WbU80vdj6fhyaO9mRBFrZeZJuT7kjTNactw-5Hrhj0/s1600/templateth3.png);<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">border: none;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">width: 117px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">height: 36px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">margin: 0px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">cursor: pointer;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">margin-top: 1px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">}<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">.rss .txt2 {<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">width: 178px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">padding: 10px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">border: 1px solid #D5D2D2;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">margin-left: 5px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">border-radius: 5px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">text-align: right;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">float: right;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">font-family: Tahoma;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">font-size: 13px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">color: #C1C1C1;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">}<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">.rss span {<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">font-family: Arial;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">font-size: 22px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">color: #7E7E7E;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">}<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">.rss form {<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">margin-top: 10px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">}<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">.rss center {<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">width: 550px;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">margin: 0 auto 0 auto;<br style="padding: 0px; margin: 0px; outline: none; list-style: none; border: 0px none; color: rgb(102, 102, 102); font-family: 'andale mono', 'lucida console', monospace; font-size: 11px; line-height: 19px;">}

ثم قم بحفظ القالب وتوجه للتخطيط وافتح ااداة Html/JavaScript
واضف الكود التالي

<div class=”rss”>
 
<center>
 <div id=”sleek-subscribe”>
 <div class=”newsheadline”>
توصل بمواضيعنا على ايميلك</div>
 <form action=”https://feedburner.google.com/fb/a/mailverify?uri=
blogspot/CfbLr” class=”signform” method=”post” target=”_new”> <input class=”txt2″ name=”name” onblur=”if (this.value == ”) {this.value = ‘إسمك الكريم’;}” onfocus=”if (this.value == ‘ إسمك الكريم ‘) {this.value = ”;}” value=”إسمك الكريم “> <input class=”txt2″ name=”email” onblur=”if (this.value == ”) {this.value = ‘أكتب بريدك الإلكتروني’;}” onfocus=”if (this.value == ‘ أكتب بريدك الإلكتروني’) {this.value = ”;}” value=”أكتب بريدك الإلكتروني”> <input class=”btn2″ value=”" type=”submit”> </form>
 <div class=”clear”>
 </div>
</div>
 </center>
 </div>

ثم غير ما باللون الاحمر باسم خلاصة مدونتك
احفظ الااداه بهذا الشكل

اضغط على حفظ واذهب لمدونتك ستجدها مضافة والف مبروك لك

لو واجهتك اى مشكله لاتتردد فى ان تتطرح مشكلتك وسنقوم بحلها بأذن الله

طريقة اضافة الاشتراك فى القائمة البريدية بشكل جميل وجذاب بتقنية css للمدونات

بقلم محمد شومان

مواضيع ذات صله

0 التعليقات :

المتابعون

اصدقاء المدونه على الفيس بوك