6 قائمة البريدية بتقنية css

الاثنين، 27 فبراير 2012
تعتبر خدمة فيد برنر من انجح المواقع التي تقدم خدمة تحليل الخلاصات وكذلك خدمة القوائم البريدية عبر الخلاصات في هذا الموضوع نشرح خطوات تركيب القائمة البريدية مع تعديلها بخصائص css لتتناسب مع المدونات ومع القالب الدي تستخدمه



قبل تركيب الاضافة يجب ان تكون مسجل في موقع FeedBurner لن أشرح طريقة التسجيل سوف تجد الكتير من الشروحات فقط أبحت ما يهمنا هنا هو فقط تركيب الاضافة مع خصائص css.ولتركيب الاضافة من لوحة تحكم مدونتك توجه إلى صفحة "التصميم" ثم "تحرير HTML" و قبل أي تعديل رجاء احفظ نسخة احتياطية من قالب مدونتك على جهازك
ابحث عن   ]]></b:skin>  و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القالب:

#social-block {
background: url(http://3.bp.blogspot.com/-zGPJNGnFoRY/TdglSa6vmZI/AAAAAAAABT4/WC2leEwsU54/s1600/Untitled-1.png) no-repeat;
height: 157px;width:253;
padding:20px 5px 0 0;
social-block h3 {
text-align:center;
}
#font: bold 12pt Arial;
tp://3.bp.blogspot.
margin: 10px 0 0 0;
color: #000;
text-shadow: 1px 1px 0px #FFF;
clear: both;
}
.mail-list {
background: url(h
tcom/-Hc4kKexsNLY/Tdgm8L6hPUI/AAAAAAAABT8/AXvirpvXigk/s1600/Untitled-2.png) no-repeat top;
width: 240px;
height: 31px;
: right;
padding:
margin: 10px auto;
overflow: hidden;
}
.mail-list input {
border: 0 none !important;
background: none !important;
floa
t4px 3px 0 !important;
color: #000 !important;
}
.mail-list .subscribe_textield {
width: 185px;
padding: 7px 5px 0 0 !important;
}
.mail-list .subscribe {
cursor: pointer;
width: 46px;
height: 31px;
text-indent: -999px;
}
ولتغير صورة الخلفية أو زر الارسال يمكنك عبر الكود أعلاه  بتغير الصور . لآن بعد حفظ القالب سنتعرف طريقة وضع الكود بالمدونة  كل ما عليك وهو نسخ الكود أسفله الآتي :
<div id="social-block">
<h3>اضف ايميلك ليصلك جديد المدونة :</h3>
<div class="mail-list">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedname', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input value="بريدك الإلكتروني" class="subscribe_textield" onfocus="if (this.value == &#39;بريدك الإلكتروني&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;بريدك الإلكتروني&#39;;}" name="email" type="text" />
<input value=" feedname " name="uri" type="hidden" />
<input name="loc" value="en_US" type="hidden" />
<input value="اشترك" class="subscribe" type="submit" />
</form>
</div><p> by <a href="http://www.younes3.info" target="_blank">younes3</a></p></div>

تم قم بوضعه في أي مكان في المدونة ولا تنس تغيير ما أشير إليه بالألوان كما يلي  feedname  بحسابك في  FeedBurner  
كاتب الموضوع

بقلم يونس

يونس من بلاد المغرب عمري 20 سنة طالب و أهتم حاليا بعلوم التصميم وفوتوشوب كلك كوريل و الستيرتور وافتر افكت وجميع برامج التصميم وانا اسعي دائما للاحتراف ومن لا يسعى الى الاحتراف

6 تعليق على قائمة البريدية بتقنية css

عرب أندرويد يقول...

رائع .. شكراً لك أخ يونس

قصر بلوجر يقول...

الموضوع ده منحوت من مدونة قصر بلوجر ولم تكتب المسدر وشكرا

مدونة عالم يونس يقول...

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

مدونة عالم يونس يقول...

أخي لو كتن لديك دليل فتفضل بضرحه قبل أن تتهمني بسرقة يا أخي

المطور يقول...

السلام عليكم ورحمة الله تعالى وبركاته
تتسحق الشكر على هذا الأمر الجميل أخي يونس أحييك وأشكرك ..أخوك أيوب/ المطور

Soufien Boukarroum يقول...

قيد التجربة ان شاء الله ...
شكرا ^^ ...



-----
تحياتي : سفيان
http://www.al-moubdi3.blogspot.com/

أضف تعليق

رجاء تجنب استعمال التعليقات لبث روابط إعلانية. كذلك ننبه إلى ضرورة الالتزام بصلب الموضوع و عدم الخروج عليه. تدكر ( مَا يَلْفِظُ مِنْ قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ))

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

اضف ايميلك ليصلك جديد المدونة :

اعلانات

مدونة تكنو
مدونة فياض
memolia
مدونة ماروتك

احصائيات المدونة

المتابعون

اعلانات