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

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

فیدبرنر (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 

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

امتیاز شما برای این مقاله
37 نظرات
  1. جلالی می گوید

    مطلب مفید و زیبایی بود ممنون ازتون

  2. نیما می گوید

    ممنون برم ببینم چی میشه

  3. جلالی می گوید

    سلام و تشکر
    یه مشکل هست و اونم اینکه عکس سبز رنگ دکمه اشتراک ظاهر نمیشه از چی میتونه باشه؟

  4. جلالی می گوید

    سلام
    من کد رو که قرار میدم با کد فید بنر خودم جایگزین میکنم ولی وقتی ایمل تاییدی رو میخوام بفرستم به فید سایت شما وارد میشه
    اینم کد من

    مشترک آخرین مطالب ما در ایمیل خود شوید

    مشکلش چیه؟

  5. .... می گوید

    سلام ببخشید یک سوال داشتم

    شما از چه کدی برای قسمت فوتر بخش آخرین دیدگاه ها استفاده می کنید؟

    افزونه وردپرس هست یا کد ؟

  6. َآذین می گوید

    سلام
    ممنون از مطالب کاربردی و مفیدتون :)
    سایت من اصلا RSS نداره ! راهی به نظرتون میرسه برای اشتراک خبرنامه ؟
    منتظر نظر کارشناسیتون هستم
    با تشکر فراوان!

  7. تقی پور می گوید

    سلام
    واقعا عالی بود دستتون درد نکنه
    در ضمن امکانش هست که استایل رو عوض کنید و یکی دیگه رو بزارید با شکل و شمایل متفاوت؟

  8. محمد می گوید

    با سلام خدمت آرش عزیز
    من هرکاری کردم سایت http://feedburner.google.com باز نشد
    میشه بدون مراجعه به این سایت از کدهای قرار داده شده در این پست استفاده کنم؟؟؟

  9. عماد می گوید

    با سلام دوست گرامی . من خودم برای سایتم قالب طراحی کردم اما تا اونجا که من میدونم سایتم آدرس feed نداره و این امکان رو باید چطور به سایتم اضافه کنم ؟ و وقتی توی http://feedburner.google.com آدرس سایتم رو میزنم با خطای زیر مواجه میشم . لطفا کمک کنید . The URL does not appear to reference a valid XML file. We encountered the following problem: Error on line 7: The string “–” is not permitted within comments.

  10. مرتضی می گوید

    باسلام
    برای اینکه فیدبرنر در ادامه مطلب زیر هر پست قرار بگیره کد را باید کدام قسمت قالب قرار داد..
    باتشکر فرآوان.

  11. مرتضی می گوید

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

  12. ایمان تیموری می گوید

    سلام استاد
    من که نفهمیدم کجا رو کجا جایگذاری کنم :)

    1. آرش حیدری می گوید

      سلام
      کجای مطلب رو مشکل دارید بفرمایید راهنمایی کنم …

  13. علی می گوید

    سلام و ممنون. استایل جم و جور، ساده و قشنگیه :)

  14. مصطفی می گوید

    سلام عزیز خسته نباشید

    من کدهایی که توی استایل قالبم میذارم مثل همین اشتراک و جعبه دانلود اینجا توی قالب نشون داده نمیشه یعنی فقط به صورت متن نشون داده میشه مشکل از کجاست؟

    1. آرش حیدری می گوید

      اگر که کدها رو توی فایل style.css قالب به درستی قرار میدید و ذخیره می کنید ، نباید مشکلی باشه.
      شاید تو کش مرورگرتون و متوجه تغییرات نمیشید ، صفحه رو reload کنید یکبار با مرورگر فکر کنم مشکلتون این باشه !

      1. مصطفی می گوید

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

  15. کاوه می گوید

    سلام
    خوبی
    چرا دکتر وردپرس گذاشتی اسم سایتتو
    میدونی که دکتر وردپرس رو روی بیل مکانیکی سوار میکنن برای کندن زمینهای سخت و سنگی و یا آسفالتهای کلفت
    مهندس و معمار هم که نیستی ؟؟؟

    1. آرش حیدری می گوید

      آره بعد از این که دامنه رو ثبت کردم فهمیدم دکتر وردپرس چیه !! عیب نداره فقط یک اسمه دیگه مهم محتواست !!

  16. رضا می گوید

    سلام
    ممنون از شما و تمامی زحماتی که میکشید.
    این رو فیکس کردم و به صورت متحرک همراه با سایت قرار دام خیلی خوب شد.

    مجدد ازتون ممنونم برای آموزشهای خوب و کاملتون.

    1. آرش حیدری می گوید

      خواهش می کنم ، موفق باشید.

  17. سهراب می گوید

    سلام
    سوالی داشتم ممنون میشم راهنماییم کنید. چطور میتونم من فیدبرنر رو مثل شما سفارشی کنم. منظورم مثل ایمیل اشتراکی که بالای سایتتون گذاشتین و این ایا امکانش هست که کد شو برام ایمیل کنید. مرسی.

    1. آرش حیدری می گوید

      سلام
      راست کلیک کنید و سورس اون جعبه اشتراک ایمیل رو بردارید مشکلی نیستش… بعدش تنظیمات فیدبرنر خودتون رو بجای تنظیمات سایت من قرار بدید
      تشکر

  18. محمد می گوید

    سلام
    دوست عزیز شاید سوالم خیلی ابتدایی باشه میخواستم بدون با این فایلی که دانلود کردم باید چیکار کنم منظورم اسکریپته. مرسی

    1. آرش حیدری می گوید

      سلام ، نه خواهش می کنم ، هر کجا مشکل دارید بفرمایید
      اون فایل در واقع همون کدها هستند که داخل نوشته توضیح دادم ، توضیحات نوشته رو با دقت بخونید ، اگر جاییش مشکل داشتید بفرمایید تا کمک کنیم
      تشکر

  19. سهیل می گوید

    سلام.من کدهایی رو که تو وبلاگم گذاشتم اینجا میذارم لطفا ببینید مشکلش چیه…باتشکر
    (در ضمن این کد چپ چینه….من میخوام راست چین باشه)

    1. آرش حیدری می گوید

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

  20. سهیل می گوید

    همه اینکارا رو انجام دادم ولی باز هم استایلش مشکل داره…

    1. آرش حیدری می گوید

      عکسی که فرستاده بودید دیدم ، نباید مشکلی داشته باشه چون پیش نمایش کدها رو هم قرار دادیم ، یکم فایل های قالبتونو نگاه کنید لطفا …
      منظور از کدهای گوگل فیدبرنر که باید جایگزین کنید همون هایی هستش که در کادر آخر قرار دادیم
      سپاس

  21. سهیل می گوید

    سلام.من هنوز متوجه نشدم که چجوری باید به کدی که از فیدبارنر گرفتیم استایل بدم

    1. آرش حیدری می گوید

      سلام
      اگر کد رو درست گرفته باشید دقیقا شبیهشو داخل کدهای ما میبینید ، بجای اونها قرارش بدید.

  22. یک قدمی می گوید

    بسیار عالی و ممنون از شما جناب حیدری عزیز

  23. حسین می گوید

    سلام
    دنبال یه اسکریپت میگردم برای اشتراک ایمیل
    فقط میخوام نام و ایمیل کاربر بگیره خیلی گشتم چیزی پیدا نکردم میشه راهنکایی کنید

    1. آرش حیدری می گوید

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

  24. Farshad می گوید

    جالب بود خیلی ممنون

  25. روناس می گوید

    سلام،چگونه میتونیم نمایشگر آی پی مخصوص وب خودمون داشته باشیم اگه میشه کامل بگید

    1. آرش حیدری می گوید

      سلام ، اگر وبلاگ دارید باید از کدهای جاوااسکریپت موجود استفاده کنید و اگر برای خودتون هاست دارید کدهای php هستش و اگرم از سیستم های مدیریت محتوا مثل وردپرس دارید افزونه های این کار داخل خوده سایت هستش میتونید استفاده کنید !

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.