کد و قالب اشتراک در خبرنامه

سلام دوستان عزیز ، مثل مطلب قبلی سایت امروز برای شما کد و اسکریپت اشتراک ایمیلی در خبرنامه یا همون خوراک سایت رو براتون آماده کرده ایم که می تونید شما اون رو در پایان مطالبتون قرار بدید تا بازدیدکننده بعد از خواندن مطلب سایت شما ، اگر از مطالب سایت شما خوشش اومد ( که حتما میاد !! ) خیلی راحت ایمیل خودشو وارد کنه و خودکار بعد از این که هربار شما مطلب جدید داخل سایت قرار دادید خودکار اون مطلب توسط گوگل براش ایمیل بشه.در ادامه یکم آموزش مقدماتی داریم ولی برای شما که خودتون استاد ما هستید یک راست برید و اسکریپت رو که در انتها قرار دادم دانلود کنید.

فیدبرنر (feedburner) چیست ؟

فیدبرنر در سال 2004 تاسیس شد و یکی از امکانات اون که ما داریم اینجا ازش استفاده می کنیم اینه که شما فید یا خوراک سایت خودتون رو بهش میدین و گوگل برای شما امکانی رو فراهم می کنه که بازدید کننده در خبرنامه شما مشترک بشن و خوده گوگل خودکار آخرین مطالب سایت شما رو برای مشترکان شما ایمیل کنه !

چگونه باید خبرنامه ساخت ؟

شما رجوع می کنید به http://feedburner.google.com و برای خودتون کانت می سازید و آدرس آر اس اس سایت خودتون رو وارد می کنید و بعدش امکان E-mail subscription رو فراهم می کنید وگوگل فیدبرنر یک کد به شما میده (حالا قراره در مطالب بعدی سایت آموزش کاملی برای همین کار قرار بدیم ، ولی خلاصه بگم باید برید به سربرگ publicize و بعد تو گزینه ها e-mail subscription رو پیدا کنید ).

سپس این کد رو هرکجای سایت که دوست داشتید قرار میدید تا بازدیدکنده ها در خبرنامه سایت شما عضو شوند.ما هم اینجا یک کد و استایل برای قشنگی عضویت در انتهای مطالب سایت شما اینجا قرار دادیم.

استایل اشتراک در خبرنامه ایمیلی در انتهای سایت

ابتدا استایل یا شیوه نامه زیر رو به انتهای فایل style.css اضافه کنید.

#picor-below-post-rss {
text-align:right;
text-direction:rtl;
background-image: url("https://doctorwp.com/wp-content/uploads/2013/05/rss-bg.png");
background-position: right top;
background-repeat: no-repeat;
clear: both;
display: block;
height: 81px;
padding-top: 27px;
position: relative;
width: 555px;
}
#picor {
padding-right: 90px;
color: #FFFFFF;
font-family: tahoma;
font-size: 11px;
}
#picor a {color:#FFF;text-decoration:underline;}
#picor form{display: inline;}
#picor .email-field{
float:left;
font-family:tahoma;
font-size: 10px;
 margin: 0;
 padding: 3px;
 width: 100px;
}
#picor .submitpicor{
 background: url("https://doctorwp.com/wp-content/uploads/2013/05/submit.gif") no-repeat scroll 0 0 transparent;
 border: 0 none;
 height: 28px;
 width: 56px;
float:left;
}

کد اشتراک خبرنامه سایت

سپس کد زیر رو با تغییراتی که در ادامه خواهم گفت هر کجای قالب ( ولی این کد بیشتر برای انتهای مطالب آماده شده ! ) قرار بدید.

<div id="picor-below-post-rss">
<div id="picor">
مشترک آخرین مطالب ما در ایمیل خود شوید
<form action="http://feedburner.google.com/fb/a/mailverify" class="feedburner" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=picor', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" class="email-field"value="ایمیل شما :" onfocus="this.value=''">
<input type="hidden" value="picor" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value=" " class="submitpicor">
</form>
</div>
</div>

خوب این کد برای اشتراک در خبرنامه ایمیلی سایت ما هستش ، شما باید اون قسمت رو که کدهایی که گوگل به ما داده رو ویرایش کنید و کدهای خودتون رو قرار بدید.الان برای این که روشن بشه کدهای خبرنامه ایمیلی خودمون رو جداگونه قرار میدم تا بدونید کجا رو باید ویرایش کنید.( کدهای زیر رو فقط جهت شفاف سازی !!! گذاشتیم ، قرار نیست شما جایی کپی کنیدش !! )

<form action="http://feedburner.google.com/fb/a/mailverify" class="feedburner" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=picor', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" class="email-field"value="ایمیل شما :" onfocus="this.value=''">
<input type="hidden" value="picor" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value=" " class="submitpicor">

نکته مهم : چندجا رو نباید تغییر بدید.یکی این قسمت از کد / class=”email-field”value=”ایمیل شما :” / و دیگری این / class=”submitpicor” / چون که اینا مربوط به شیوه نامه هستند.

دمو و دانلود اسکریپت عضویت در خبرنامه

مشاهده دمو اسکریپت

دانلود فایل

رمز فایل : www.doctorwp.com 

همچنین در مطالب قبلی سایت یک مجموعه خیلی فانتزی از آیکون های آر اس اس به شکل حیوانات برای دانلود قرار دادیم !