جعبه اشتراک ایمیل به بازدیدکنندگان این امکان را می دهد که در یک وبلاگ مشترک شوند و از آخرین مطالب منتشر شده مستقیماً در صندوق ورودی ایمیل خود مطلع شوند، بدون اینکه دوباره به وب سایت مراجعه کنند. و اجازه دادن به بازدیدکنندگان برای اشتراک از طریق ایمیل می تواند به رشد وبلاگ کمک کند و مخاطبان خاصی را هدف قرار دهد. این باحال نیست؟
در ابتدا، ما در مورد سرویس ایمیل پیش فرض بلاگر بحث خواهیم کرد و بعداً آن را مجدداً طراحی خواهیم کرد تا ظاهری عالی داشته باشد. توجه: این ویجت بلاگر بخشی از “مجموعه پلاگین های بلاگر ممتاز“.
Blogger خدمات اشتراک ایمیل پیش فرض را ارائه می دهد: FeedBurner. به گفته گوگل، FeedBurner یک ارائه دهنده مدیریت فید وب است که فیدهای RSS سفارشی و ابزارهای مدیریتی را برای وبلاگ نویسان، پادکست ها و سایر ناشران محتوای مبتنی بر وب ارائه می دهد. برای افزودن ویجت اشتراک ایمیل شیک خود، ابتدا باید سرویس ایمیل feedburner را فعال کنید.
چگونه سرویس ایمیل FeedBurner را فعال کنیم؟
- به این لینک بروید
- فیدهایی را که می خواهید استفاده کنید از لیست فیدهای من انتخاب کنید.
- کلیک کنید بر روی “عمومی کردنبرگه > اشتراک ایمیل > فعال کنید.
- شما کدی مانند این خواهید داشت:
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=YOUR_FEEDBURNER_ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="YOUR_FEEDBURNER_ID" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>
کد بالا به صورت زیر نتیجه خواهد گرفت:
طراحی چطوره؟ آیا با قالب وبلاگ نویس شما مطابقت دارد و مناسب است؟ صندوق ایمیل پیش‌فرض فیدبرنر منسوخ شده است و نیاز به اصلاح دارد. حالا بیایید با ما شروع کنیم طراحی جعبه اشتراک ایمیل ممتاز.
ویژگی های جعبه اشتراک ایمیل پاک در زیر پست های بلاگر
- طراحی شیک
- CSS و HTML خالص.
- آسان برای سفارشی کردن.
- سبک وزن.
- پویا به نظر می رسد و کاملاً با چیدمان مطابقت دارد.
- Font Awesome 5.8.2 آیکون استفاده شده است.
در اینجا یک نسخه نمایشی زنده است:
چگونه می توان جعبه اشتراک ایمیل تمیز را زیر پست ها در بلاگر اضافه کرد؟
این راهنمای گام به گام را دنبال کنید تا جعبه اشتراک ایمیل زیبا را در پست های وبلاگ نویس خود اضافه کنید.
مرحله 1: نصب فونت Awesome 5.8.2 در قالب بلاگر شما (اختیاری)
رفتن به وبلاگ نویس > قالب > HTML را ویرایش کنید > جستجو برای </head> و کد زیر را در بالا اضافه کنید </head>
<script type="text/javascript">
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
</noscript>
مرحله 2: اضافه کردن کد CSS
جستجو برای ]]></b:skin> کد CSS زیر را در بالا اضافه کنید ]]></b:skin>.
/* Email Subscription Box By BlogTipsnTricks.com */
#twistblogg-sbox-below-post {
padding: 0;
margin: 0;
width: 100%;
height: auto;
border-radius: 1px;
border: 0;
display: inline-block;
background: #4d4d4d;
}
#twistblogg-sbox-below-post p {
font-size: 19px;
color: #FFFFFF;
line-height: 30px;
text-align: center;
font-weight: normal;
padding: 15px 0px 0px;
margin: 0px 0px 25px 0px;
text-transform: capitalize;
}
#twistblogg-sbox-below-post .fas {
color: #FFF;
font-family: 'Font Awesome 5 Free';
font-weight:900;
font-size: 25px;
margin-right: 10px;
padding: 0 9px;
}
#twistblogg-sbox-below-post .rssform {
padding: 0px 0px;
margin: 30px auto 30px;
display: block;
width: 300px;
}
#twistblogg-sbox-below-post .rssform input {
text-align: center;
padding: 8px;
color: #000;
font-size: 13px;
border-radius: 1px;
font-weight: normal;
width: 100%;
height: 45px !important;
line-height: 1.5em;
overflow: hidden !important;
text-transform: capitalize;
outline: none !important;
display: block;
background-color: #FFF4F4;
border: 1px solid #4d4d4d;
box-sizing: border-box !important;
}
#twistblogg-sbox-below-post .rssform .button {
background: #c14e4e;
color: #FFFFFF;
border: 1px solid #4d4d4d;
margin-top: 15px;
border-radius: 1px;
outline: none!important;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
padding: 4px!important;
float: none;
font-size: 17px;
font-weight: normal;
cursor: pointer;
}
مرحله 3: اضافه کردن بخش HTML برای صندوق ایمیل
جستجو برای <div class="post-footer"> یا <data:post.body/> (ممکن است چندین بار ظاهر شود، دومی را انتخاب کنید) و کد HTML زیر را بالای آن اضافه کنید.
<div id='twistblogg-sbox-below-post' oncontextmenu='return false'> <p><i class="fas fa-envelope"/> Stay connected, You'll not be disappointed!</p> <div class="rssform"> <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=YOUR_FEEDBURNER_ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="email" placeholder="Enter your email address..." type="text"/> <input name="uri" type="hidden" value="YOUR_FEEDBURNER_ID"/> <input name="loc" type="hidden" value="en_US"/> <input class="button" type="submit" value="Join!"/> </form> </div> </div>
تغییر را فراموش نکنید YOUR_FEEDBURNER_ID با شناسه فیدبرنر شما..
انجام شده. شما با موفقیت نصب کردید جعبه اشتراک ایمیل تمیز و شیک در زیر هر پست در بلاگر. در صورت عدم امکان نصب پیام دهید یا با ما تماس بگیرید. وبلاگ نویسی مبارک
