طريقة عمل القائمة البريدية مدونة و موقع

بسم الله الرحمن الرحيم

والصلاة على سيدنا محمد وعلى آله واصحابه آجمعين

عند عمل مدونة أو موقع غالباً ما نفكر في أن نقدم عمل شكل مميز ورائع بحيث

يكون شكل  متناسق وجميل والوانه تكون متناسبة. 

القائمةالبريدية 

هي من أهمالقوائم التي نتهم بها ويجب ان تكون سهلة الاستخدام
وذات مظهرأنيق حتى يدخل الزائر ايميله بسهولة لأن هناك قوائم بريدية معقدة
وتتطلب من الزائر تقديم معلومات تجعل الزائر غير راغب في التسجيل. 

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

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

وهي علىالشكل الاتي :

1-    ندخل الى المدونة

2-    ومن نختار التخطيط

3-    ثم نختار اضافة أداة من سيدبار او حسب المكان المطلوب وضعها فيه .

4- نختار أداة HTML/javascript

5-    نضع الكود التالي كما هو في النص ولا داعي لإضافة عنوان لأنها يضاف تلقائيا

الكود

<style type="text/css">

#subscribe-wrapper {

background: url(http://softglad.at.ua/images/border.png) repeat scroll 0 0 transparent;

padding: 3px;

}

#subscribe-box {

background: url(http://softglad.at.ua/images/bg.png) repeat scroll 0 0 #F7F7F7;

border-radius: 15px;

padding:5px;

overflow: hidden;

}

a.linkopacity img {

filter:alpha(opacity=75);

-moz-opacity: 0.5;

opacity: 0.5;

-khtml-opacity: 0.5;

-webkit-transition:All .5s ease;

-moz-transition:All .5s ease;

-ms-transition:All .5s ease;

-o-transition:All .5s ease;

transition:All .5s ease;

padding: 3px;

border: 1px solid #999;

}

a.linkopacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1;

opacity: 1;

-khtml-opacity: 1;

-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);

-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);

box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);

}

#subscribe-box:hover table {

    top: 0;

}

#subscribe-box h1{

margin-top: 5px;

color: black;

font-family: arial;

font-size: 15px;

margin-bottom: 5px;

line-height: 14px;

font-weight: bold;

text-align: center;

letter-spacing: -1px;

}

#subscribe-box table {

position: relative;

top: 40px;

-webkit-transition:All .5s ease;

-moz-transition:All .5s ease;

-ms-transition:All .5s ease;

-o-transition:All .5s ease;

transition:All .5s ease;

margin-bottom: 0px;

}

#subscribe-box td {

padding: 2px;

}

#subscribe-box input{

background: white;

border: medium none;

font-size: 12px;

padding: 10px;

width: 150px;

color: #666;

font-family: arial;

margin-bottom: 3px;

width: 55%;

}

#subscribe-box input:focus{outline:none;}

#subscribe-box .submit{

background: #E73827;

color: #fff;

cursor: pointer;

font-weight: bold;

text-shadow: 0 1px 2px black;

width: 90px;

font-family: arial;

margin-left: -3px;

font-size: 14px;

}

</style>

<div id="subscribe-wrapper">

<div id="subscribe-box">

<h1>أشترك معنا لتحصل على جديد المدونة</h1>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=add-b', 'add-b', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<center>

<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;ضع ايميلك هنا&quot;;}" onfocus="if (this.value == &quot;ضع ايميلك هنا&quot;) {this.value = &quot;&quot;}" size="20" type="text" value="ضع ايميلك هنا" />

<input name="uri" type="hidden" value="add-b" />

<input name="loc" type="hidden" value="en_us" />

<input class="submit" type="submit" value="أشترك" /></center></form>

<center>

<table>

<tbody><tr><td><a href="http://feeds.feedburner.com/add-b" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/rss.png" /></a></td>

<td>

<a href="http://www.facebook.com/additions.blogger" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/facebook.png" /></a>

</td>

<td>

<a href="https://twitter.com/add_blogger" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/twitter.png" /></a>

</td>

<td>

<a href="https://plus.google.com/108902431338077770336" class="linkopacity" target="_blank"><img border="0" src="http://softglad.at.ua/images/Google.png" /></a>

</td>

</tr></tbody></table>

</center>

</div></div>

6-    ثم نضغط على حفظ  وبذلك نكون انهينا خطوات تركيب القائمة البريدية .

7-    نذهب الى عرض المدونة لنشاهد شكل القائمة البريدية الجديدة كما هو 
الشكل الآتي :

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

أتمنى أن يستفيد الجميع اوتمنى النشر والمشاركة حتى تعم الفائدة لنا جميعاً

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

Facebook Google+

تدوينات مفيدة :