25‏/12‏/2015

طريقة إضافة صندوق الاشتراك في القائمة البريدية لمدونتكم اضافة بسيطة و فعالة تمكن زوار موقعك من الاشتراك في القائمة البريدية الخاصة بموقعك حيث يستلمون نشرة دورية لمواضيع مدونتك المتجددة، مهلا لحظة! هل لها أهمية وهل سيشترك بها الزوار فعلا؟ هذا يعتمد على نشاط موقعك وما تقدمه من مواضيع ويمكنك تعزيز الاشتراك عبر وضع هدية مثلا لكل من اشترك
أما بالنسبة لأهميتها فطبعا وبكل تأكيد... إنها تحسب لك كمية كبيرة من حركة المرور بموقعك فبالإشتراك بها عن طريق الFeedburner سيتوصل المشترك دائمًا بتحديثات مواضيعك أول بأول، كفانا من ذكر دورها فكل شخص يعرف دورها 😊 ندخل لشكلها
الآن كالعادة أحب أن أوفر لمتابعينا ستايلات ليختاروا بينها وبهذا أعطيكم ثلاثة أشكال بسيطة، جميلة، جذابة للعين وكذلك خطوط متناسقة ماذا عساي أذكر آخر؟ إلا أن أترككم مع المعاينة لتحكموا بأنفسكم
شرح طريقة التركيب
1. من لوحة التحكم اتجه إلى التخطيط وأضف أداة 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="ar1websub">
اشترك لتصلك حصرياتنا! تطبيقات، ألعاب والمزيد...</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh, '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="ar1web" />
<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=ar1web/TFDh' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh, &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=ar1web/TFDh" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="ar1web" />
<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>
التغييرات الأساسية
1. لمن لا يتوفر على رابط للفيدبانر فالشرح موجود هنا بعد انشائك للحساب لا تنسى تفعيل خاصية الإشتراك  وهي مذكورة في الشرح
2. في الإضافة قم بتغيير كل ما به ar1web/TFDh بإسم رابط خلاصتك
3. إذا أردت تغيير لون الصناديق فهي محددة بالبرتقالي في كل شكل
مجددًا لو واجهتك مشكلة فباب التعليقات مفتوح لا تتردد! وادعمنا بمشاركة التدوينة
طريقة إضافة صندوق الاشتراك في القائمة البريدية لمدونتكم اضافة بسيطة و فعالة تمكن زوار موقعك من الاشتراك في القائمة البريدية الخاصة بموقعك حيث يستلمون نشرة دورية لمواضيع مدونتك المتجددة، مهلا لحظة! هل لها أهمية وهل سيشترك بها الزوار فعلا؟ هذا يعتمد على نشاط موقعك وما تقدمه من مواضيع ويمكنك تعزيز الاشتراك عبر وضع هدية مثلا لكل من اشترك
أما بالنسبة لأهميتها فطبعا وبكل تأكيد... إنها تحسب لك كمية كبيرة من حركة المرور بموقعك فبالإشتراك بها عن طريق الFeedburner سيتوصل المشترك دائمًا بتحديثات مواضيعك أول بأول، كفانا من ذكر دورها فكل شخص يعرف دورها 😊 ندخل لشكلها
الآن كالعادة أحب أن أوفر لمتابعينا ستايلات ليختاروا بينها وبهذا أعطيكم ثلاثة أشكال بسيطة، جميلة، جذابة للعين وكذلك خطوط متناسقة ماذا عساي أذكر آخر؟ إلا أن أترككم مع المعاينة لتحكموا بأنفسكم
شرح طريقة التركيب
1. من لوحة التحكم اتجه إلى التخطيط وأضف أداة 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="ar1websub">
اشترك لتصلك حصرياتنا! تطبيقات، ألعاب والمزيد...</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh, '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="ar1web" />
<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=ar1web/TFDh' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh, &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=ar1web/TFDh" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="ar1web" />
<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>
التغييرات الأساسية
1. لمن لا يتوفر على رابط للفيدبانر فالشرح موجود هنا بعد انشائك للحساب لا تنسى تفعيل خاصية الإشتراك  وهي مذكورة في الشرح
2. في الإضافة قم بتغيير كل ما به ar1web/TFDh بإسم رابط خلاصتك
3. إذا أردت تغيير لون الصناديق فهي محددة بالبرتقالي في كل شكل
مجددًا لو واجهتك مشكلة فباب التعليقات مفتوح لا تتردد! وادعمنا بمشاركة التدوينة
15 Blogger تعليقات
Disqus
15 التعليقات
المشرف
avatar

رووعة اخي حسام ،، تكويد خالي من الاخطاء ومثقن

المشرف
avatar

الإضافة مفيدة جدًا لمحبي مدونتي :v
بهذه الحال سيُمكنهم التوصل بأحدث التدوينات
التي سأضعها في أجلٍ قريب :3 باركك الله حسام كن، بانتظار
جديدك، وبانتظار ذاك الطلب الغريب بتاع الفيس بوك xD

المشرف
avatar

مشكور اخي حسام... تم استعمالها حقيقي رائعه بارك الله فيك

المشرف
avatar

اضافاتك كلها رائعه.مزيد من التقدم باذن الله.
بس عندى سؤال كيف اجعل المشاركات الشكل المربع (مشاركتان بجانب بعض)
كالاتى فى مدونتك الان عوضا عن الشكل التقليدى ,خالص تحياتى

أزال أحد مشرفي المدونة هذا التعليق. - حذف
المشرف
avatar

شكرا على مروركم اخواني، لكم خالص تحياتي :
@سامي المسعودي
@ Leo San :لقد نسيت طلبك ذكرني؟
@ جمال عبدالحميد
@ Ahmed Abdallaah :إن شاء الله سيكون شرح لها
@ اكادمية دوراتي :أعتذر عن حذف التعليق فلا يمكننا نشر روابط خارجية

المشرف
avatar

السلام عليكم أخي حسام ,
ممكن تقولي على طريقة لجلب وصف الموضوع عند نشر الموضوع على الفيس بوك ,
بمعنى , عندما اعمل مشاركة لموضوع في المدونة على الفيس بوك يظهر في المشاركة وصف للموضوع (محتوي الموضوع) , بدل ما يظهر وصف المدونة في كل المواضيع ,

المشرف
avatar

خخخ، ذاك الطلب بصفحة الفيس بوك، لا يمكنني إخبارك به هنا
الأفضل أن تراجع رسائل الصفحة، في رسالتي ستجد الطلب :)

المشرف
avatar

السلام عليكم أخي حسام ,
ممكن تقولي على طريقة لجلب وصف الموضوع عند نشر الموضوع على الفيس بوك ,
بمعنى , عندما اعمل مشاركة لموضوع في المدونة على الفيس بوك يظهر في المشاركة وصف للموضوع (محتوي الموضوع) , بدل ما يظهر وصف المدونة في كل المواضيع ,

المشرف
avatar

عليكم السلام جرب وضع أكواد السيو التي هنا :
http://www.ar1web.com/2015/12/seo-meta-tags-pack-2016.html

المشرف
avatar

أخي العزيز مالمقصود برابط خلاصتك ؟
هل تقصد رابط المدونة ؟

المشرف
avatar

هو رابط الفيدبانر للمزيد من المعلومات إقرأ التدوينة :
http://www.ar1web.com/2015/12/create-blogger-feed.html
أي مشكل نحن رهن الإشارة بالتوفيق

المشرف
avatar
المشرف
avatar

المزيد من التقدم

المشرف
avatar

شكرااا لك على جهودك سوف اضع احد القوائم

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة