الاشتراك في النشرة البريدية وازرار التواصل الاجتماعي في اداة واحدة

بسم الله الرحمن الرحيم


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

لمعاينة الاضافة " اضغط هنا "

لتركيب الاضافة نتوجه الى لوحة التحكم > القالب > تحرير HTML ونبحث عن الوسم <head/>
ونلصق تحته الكود التالي :

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

ثم نبحث عن الوسم  ]]></b:skin> ونلصق الكود التالي فوقه :

#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 15px 0 0;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:#798187}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

ثم نتوجه الى لوحة التحكم > التخطيط > اضافة اداة > HTML/JavaScript ونلصق بداخلها الكود التالي :

<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=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<'input name='uri' type='hidden' value='user '/>
<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='Your Email'/>
<input class="subscribe-button" type="submit" value="اشترك الان" />
</form>
</div>
<div class="creadit">
</div>

ثم نغير كلمة user بمعرف حسابنا في القائمة البريدية و نقوم بتغير # بالروابط  الخاصة بصفحات المدونة على مواقع التواصل الاجتماعي ثم نحفظ الاداة , لاتتردد في طرح استفساراتك حول هذه الاضافة او غيرها فقط اكتب ماتريد الاستفسار عنه في تعليق ونحن نجيب ^_^ , وشكرا لكم .

الكاتب :

مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر


اظهر الابتساماتإخفاء