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

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

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

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

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

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

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

الآن ستظهر لك نافذة تحتوي على أكواد القالب. اضغط على 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=muh-pro', '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>

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

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

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

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

_______________________________________________

يمكنك مشاركة الموضوع اذا اعجبك

الموضوع من طرف :: محمد عليان

أنا محمد عليان 15 سنة مدوّن سوري مهووس بجديد تكنولوجيا المعلوميات ،أحب كل جديد في عالم الإنترنت من مواقع وبرامج وأحب التدوين ودائماً أبحث عن الجديد لتطوير مهاراتي في مختلف الميادين التي تعجبني ،أنشأت هذه المدونة المهتمّة بكل ما يتعلق عالم الإنترنت من تقنيات وشروحات وتطوير للمواقع والمدونات

ما رأيك؟!