أداة جديدة للإشتراك عبر البريد الإلكتروني

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

بعد هذا التقديم البسيط يمكنكم مشاهدة مثال مباشر لهذه الأداة عبر الرابط التالي : مثال مباشر

إذا أعجبتك هاته الأداة و تريد إضافتها إلى مدونتك, فكل ما عليك فعله هو تتبع الخطوات التالية :

الخطوة الأولى :

اذهب إلى لوحة التحكم الخاصة بمدونتك ثم اختر قالب كما هو موضح في الصورة : الآن ستظهر لك نافذة تحتوي على أكواد القالب. اضغط على Ctrl+F من لوحة المفاتيح و ابحث عن هذا الكود :

]]></b:skin>

بعد إيجاده انسخ الكود التالي و ضعه فوقه مباشرة.

#optin-sidebar {
background: #DDDDDD;
border-bottom: 1px dashed #CCCCCC;
padding: 15px 0;
text-align: center;
width: 100%;
}
#optin-sidebar h4 {
font-weight: bold;
margin: 10px 0 20px;
}
#optin-sidebar input[type="text"] {
border: 1px solid #AAAAAA;
font-size: 18px;
margin: 0 0 15px 0;
padding: 10px;
width: 80%;
color:#888;
}
#optin-sidebar input {
box-shadow: 0 2px 2px #AAAAAA;
-moz-box-shadow: 0 2px 2px #AAAAAA;
-webkit-box-shadow: 0 2px 2px #AAAAAA;
}
#optin-sidebar input.name {
background: url(http://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF;
}
#optin-sidebar input.email {
background: url(http://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF;
}
#optin-sidebar input[type="submit"] {
background: #00748f;
border: 1px solid #158CA7;
color: #FFFFFF;
cursor: pointer;
font-family: arial;
font-size: 22px;
font-weight: bold;
height: 40px;
margin-top: 5px;
padding: 8px 0;
text-shadow: -1px -1px #158CA7;
text-transform: capitalize;
width: 87%;
}
#optin-sidebar input[type="submit"]:hover {
background: none repeat scroll 0 0 #158CA7;

اضغط حفظ و انتقل إلى الخطوة الثانية.

الخطوة الثانية :

اذهب مرة أخرى إلى لوحة التحكم الخاصة بمدونتك ثم اختر التخطيط كما هو موضح في الصورة.

بعد ذلك ستظهر لك نافذة اختر منها إضافة أداة و الصورة توضح ذلك :

الآن ستظهر لك نافذة منبثقة اختر منها أداة HTML/Javascript و الصورة توضح ذلك :

ستظهر لك نافذة الأداة كل ما عليك فعله هو اختيار عنوان للأداة و نسخ كود الأداة و وضعه في المكان المناسب له كما في الصورة :

كود الأداة :

<div id="optin-sidebar">
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=arabegoogle', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="arabegoogle" /><input type="hidden" value="en_US" name="loc" />
<input type="text" id="name" name="name" onfocus="this.value=&#39;&#39;" value="الإسم الكامل" placeholder="الإسم الكامل" />
<input type="text" id="email" name="email" onfocus="this.value=&#39;&#39;" value="البريد الإلكتروني" placeholder="البريد الإلكتروني" />
<input type="submit" value="اشترك الآن" id="submit" name="submit" />
</form>
</div>

التعديل على الكود :

arabegoogle : غيره باسم المستخدم الخاص برابط التغذية أو الخلاصات.

إلى هنا نكون قد انتهينا من شرح إضافة هاته الأداة.

إذا واجهتك أي مشكلة في تركيب الأداة المرجو طرحها في تعليق.