كيفية إضافة أداة الإشتراك في القائمة البريدية بشكل أحترافي وجديد لمدونات بلوجر

زوار ومتابعي المدونة الكرام

اسعد الله اوقاتكم بكل خير ومحبة

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

للمعاينة أنقر هنا

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

1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ثم اختر تحرير قالب .

3- ابحث عن الوسم :
<head>

4- ضع الكود التالي تحته .

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"></link>
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" type="text/css"></link>

5- بعد ذلك ابحث عن الوسم :
]]></b:skin>

6- ضع الكود التالي فوقه .

 #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}
.follow-subscribe-social{margin:0 0 15px;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:0 0 0 15px;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:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: left; font-size: 8px;}

7- بعد ذلك اذهب إلى تخطيط ثم أختر اضافة أداة : HTML/JavaScript

8- ضع الكود التالي في صندوق الأداة ثم احفظ .

 <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-linkedin"></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-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></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=يوزرنيم' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=يوزرنيم, &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;بريدك الالكتروني&quot;;}' onfocus='if (this.value == &quot;بريدك الالكتروني&quot;) {this.value = &quot;&quot;;}' value='بريدك الالكتروني'/>
<input class="subscribe-button" type="submit" value="انقر هنا للإشتراك" />
</form>
</div>

- التعديلات :

1- عدل هذه الاشارة " # " بروابط على المواقع الاجتماعية .

2- عدل " يوزرنيم " بخاصيتك على على feedburner .