ثلاث قوائم بريدية احترافية لا تفوتها

السلام عليكم ورحمة الله وبركاتة مازلنا في دروس البلوجر واليوم ساعطيكم ثلاث اكواد للقوائم البريدة بشكل احترافي

القوائم البريدية البريدية من اهم عوامل المدونة الناجحة تكون ضمنت زوار ثابتين لموقعك لن اطيل في الوصف تابعو معنا...

✔ طريقة التركيب :

كل ما عليك هو الذهاب الى تخطيط ثم قم بتحرير اداة في السايدبار او الفوتر ، و أضف داة 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="technologysub">

اشترك لتصلك احدث مواضيعنا...</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=cre5" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cre5, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="الاسم " />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="البريد الالكتروني" />
<input name="uri" type="hidden" value="cre5" />
<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);
/* 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=cre5" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cre5', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="cre5" />
<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>

✔ الشكل الثالث

<style>

@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',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=cre5' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=cre5, 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='بريدك الالكتروني'/>
<input class="subscribe-button" type="submit" value="اشترك الان" />
</form>
</div>

غير كل ما بالون الاحمر بما يناسبك

هذا كان درسنا اليوم انتظرونا في دروس جديدة