إضافة الاشترك في النشرة البريدية

طــريـقـة إضـافـة صـنـدوق الإشـتـراك فـي الــقـائمـة الــبــريـديـة لــمــدونــتـكـم إضـافـة بــســيـطـة وفــعـالـة تــمـكـن زوار مــوقـعـك مـن الإشــتـراك فـي الـقــائمـة الــبـريــديـة الـخــاصـة بــمـوقــعـك حــيـث يــســتـلــمـون نــشـرة دوريـة لــمـواضــيـع مـدونــتـك الــمـتــجـددة، مــهـلا لـحــظـة ! هـل لــهـا أهـمــيـة وهـل ســيـشــتـرك بــهـا الـزوار فعلا؟ هـذا يــعـتــمـد عــلـى نــشـاط مـوقــعـك ومـا تـقــدمـه مـن مـواضــيـع ويــمـكــنـك تـعــزيـز الإشــتـراك عــبـر وضـع هــديـة مــثـلا لــكـل مـن اشــتـرك.

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

الآن كـالــعــادة أحــب أن أوفــر لـمـتـابـعــيــنــا ســتــايــلات لـيــخــتــاروا بـيــنــهــا وبــهــذا أعـطــيــكــم ثــلاثــة أشــكــال بـســيــطــة، جـمــيــلــة، جــذابــة لـلــعــيــن وكــذلــك خــطــوط مـتـنــاســقــة مــاذا عــســاي أذكــر آخر؟ إلا أن أتــركــكــم مــع الـمـعــايــنــة لـتـحــكــمــوا بـأنـفــســكــم.

المعــاينة

شرح طريقة التركيب
مراحل تركيب الإضافة

1. ادخل إلى لوحة تحكم المدونة في بلوجر.
2. اختر قالب المدونة التي تود تطبيق الشرح فيها.
3. من لوحة التحكم اتجه إلى التخطيط وأضف أداة HTML/Javascript جديدة بالسيدبار وضع بها الشكل الذي أعجبك

<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
#subscribe-box {background-color:#47cf73;}
#subscribe-box p {font-size: 18px; color: #fff; padding: 10px 20px 0 20px; margin: 0; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; text-align: center;    font-weight: bold;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background: #f9f9f9; color: #bbb; padding: 10px; margin-top: 10px; font-size: 13px; width: 100%; border: 0; transition: all 0.4s ease-in-out; font-family: tahoma; border-radius: 2px!important;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background: #4D504F; color: #fff;font-weight: 700; font-size: 16px; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; border: none; outline: none; width: 100%; cursor: pointer; border-radius: 3px!important; transition: all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
</style>
<div id="subscribe-box">
<p class="teqniwebsub">
اشترك لتصلك حصرياتنا! تطبيقات، ألعاب والمزيد...</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=teqniweb92" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=teqniweb92, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="الاسم الكريم" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="البريد الالكتروني" />
<input name="uri" type="hidden" value="teqniweb" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="اشترك الآن" />
</form>
</div>
</div>

<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700;font-family: 'Noto Sans Kufi Arabic', sans-serif!important; line-height: 3em;}
.follow-subscribe-social{padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin-left: 20px;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height: 45px; font-weight: 700; font-size: 16px; color: #fff; text-transform: uppercase; border: none; background-color: #4FC4F6; transition: background-color .2s ease-in-out; font-family: 'Droid Arabic Naskh', serif;}
.subscribe-button:hover{background-color:#00A3CE}
.subscribe-button:focus{outline:0}
</style>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>اشترك في النشرة البريدية</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=teqniweb/TFDh' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=teqniweb92, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='اسمك المستخدم'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='بريدك الالكتروني'/>
<input class="subscribe-button" type="submit" value="اشترك الان" />
</form>
</div>

<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
/* Subscribe Box */
.widget-content{padding:0}
.subscribe-wrapper h3{font-weight: 700; margin: 0 auto 10px auto; text-align: center; font-size: 20px; line-height: 1.8; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}
.subscribe-wrapper h3 span{display:inline-block;font-weight:bold;font-size:33px;}
.subscribe-wrapper p{margin:0 auto;opacity:.95;text-align:center;font-family: 'Droid Arabic Naskh', serif; font-size: 14px;}
.subscribe-wrapper{color:#fff;background:#e83e3b;margin:0;padding:20px;}
.subscribe-form{clear:both;display:block;margin:5px 0 10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:rgba(0,0,0,0.2);color:#fff;margin:0 0 15px;padding:0.962em 1.847em;width:100%;border:none;text-align:center;outline:0}
.subscribe-css-button{background: #fff!important; color: #E83E3B!important; cursor: pointer; font-weight: 700; padding: 7px; width: 100%; border: 0; font-size: 15px; text-transform: uppercase; transition: all .3s; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}
.subscribe-css-button:hover{color:#aaa!important;transition:all 0.3s ease-in;}
</style>
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h3>احصل على أجدد مواضيعنا
<span>أول بأول</span></h3>
<p>اشترك بنشرتنا البريدية وتوصل بأشياء مثيرة للإهتمام.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=teqniweb92" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=teqniweb92', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="teqniweb" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="ادخل بريدك الإلكتروني" />
<input class="subscribe-css-button" title="" type="submit" value="اشترك الآن" />
</form>
</div>
</div></div>

التغييرات الأساسية :

• في الإضافة قم بتغيير كل ما به teqniweb92 بإسم رابط خلاصتك
• إذا أردت تغيير لون الصناديق فهي محددة بالبرتقالي في كل شكل.

مـجــددًا لــو واجــهـتــك مـشــكـلــة فـبــاب الـتـعـلــيـقــات مــفـتــوح لا تـتــردد ! وادعــمـنــا بـمــشـاركــة الـتــدويـنــة.

المصدر : http://www.teqniweb.com/