كيفية اضافة اداة المتابعة عبر البريد الالكتروني لمدونات بلوجر
تعد اضافة اداة المتابعة عبر البريد الالكتروني لمدونات بلوجر من اضافات بلوجر المهمة ، والتي يجب على كل مدونة تسعى للارتقى على محركات البحث وتصدره ، ان تحتوي على اضافة أداة الاشتراك عبر البريد الالكتروني ، وذلك بسبب انها تساعد زوار مدونتك المسجلين بها على الحصول على جديد المدونة مباشرة بعد نشره على الموقع. وذلك من خلال البريد الالكتروني المسجلين به في مدونتك ، وهذا يساعدك في كسب المزيد من الزوار المستهدفين لمدونتك.
كيفية اضافة اداة المتابعة عبر البريد الالكتروني:
* قم باضافة الخط المستعمل في اضافة، اذا كانت مدونتك تحتوي على هذا الخط فلا تقم بضافته وانتقل للمرحلة الثانية.
* اذا لم تكن مدونتك تحتوي على هذا الخط فتابع معي كيفية اضافته لمدونتك.
* قم بالبحث عن الوسم التالي.
/head
عند ايجاده قم بوضع الكود التالي فوقه (اعلاه).
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
* بعدها قم بنسخ الكود التالي.
<style type="text/css">
.hbzsub {
background-color: rgb(87, 98, 105);
width: 100%;
height: 100%;
padding: 5px;
box-shadow: 0px 0px 5px rgb(87, 98, 105);
}
.hbzform-inner {
text-align: center;
color: rgb(255, 255, 255);
font: bold 16px “trebuchet MS”,”Tahoma”;
}
.hbzform-inner h4 {
margin: 5px 0px 0px 0px;
color: #fff;
font: 600 15px Droid Arabic kufi, cursive;
}
.hbzemailform {
width: 240px;
margin: 10px auto;
}
#hbzemailbox {
background-color: #ffffff;
color: #576269;
width: 208px;
border: 1px solid #697780;
padding: 15px;
text-align: center;
height: 18px;
box-sizing: content-box;
font: 600 11px Droid Arabic kufi, cursive;
}
#hbzemailbutton {
background-color: rgb(243, 93, 92);
border: 1px solid rgb(215, 84, 83);
color: rgb(255, 255, 255);
width: 240px;
padding: 10px;
text-align: center;
height: 50px;
margin: 10px auto;
cursor: pointer;
font: 600 15px Droid Arabic kufi, cursive;
}
#hbzemailbutton:hover {
background-color: #E64C4B;
border: 1px solid #BF4A49;
}
.hbzsignup-form {
margin-top: 15px;
}
.hbzsocial-icons {
overflow: hidden;
text-align: center;
border-bottom: 1px solid rgb(133, 133, 133);
width: 230px;
display: block;
margin: 20px auto;
}
.hbzsocial-icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}
.hbzsocial-icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important;
float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 2px !important;
}
.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
display: none !important;
}
.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV2be75n8fppkqo4vrxGKxE2u1F76ksCj5bI9uFd31XWeErKv3g4fuEh0g_f0eP3PWusPstp9sssB3N_0-c4YFuTLSSWMQMElZM30eF7eD4QyLWgTefl5dBTntTInyXhiZZmI8Ndnxsomg/s1600/sprite_32x32.png") no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
height: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}
.hbzsocial-icons ul li.social-facebook a {
background-position: -62px 1px;
}
.hbzsocial-icons ul li.social-facebook a:hover {
background-color: #3b5998;
}
.hbzsocial-icons ul li.social-twitter a {
background-position: -254px 1px;
}
.hbzsocial-icons ul li.social-twitter a:hover {
background-color: #00aced;
}
.hbzsocial-icons ul li.social-gplus a {
background-position: -95px 0px;
}
.hbzsocial-icons ul li.social-gplus a:hover {
background-color: #dd4b39;
}
.hbzsocial-icons ul li.social-pinterest a {
background-position: -159px 1px;
}
.hbzsocial-icons ul li.social-pinterest a:hover {
background-color: #cb2027;
}
.hbzsocial-icons ul li.social-rss a {
background-position: -190px 0px;
}
.hbzsocial-icons ul li.social-rss a:hover {
background-color: #F87E12;
}
</style>
<div class="hbzsub">
<div class="hbzsocial-icons">
<ul>
<li class="social-facebook"><a href="FbLink" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="TwitterLink" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="Google+Link" target="_blank" title="Google+">Google+</a></li>
<li class="social-pinterest"><a href="PinterestLink" target="_blank" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="RSSLink" target="_blank" title="RSS">RSS</a></li>
</ul>
</div>
<div class='hbzsignup-form'>
<div class='hbzform-inner'>
<h4>إشترك في النشرة البريدية</h4>
</div>
<div class='hbzemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedBornerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='FeedBornerID'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='hbzemailbox' name='email' required='' type='text' placeholder='البريد الالكتروني الخاص بك'/>
<input id='hbzemailbutton' title='' type='submit' value='إشترك'/>
</form>
</div>
</div>
</div>
* ثم قم بدخول الى مدونتك بعدها الى التخطيط ثم انتقال الى اضافة أداة ثم أضف أداة Html/JavaScript.
وقم بلصق الكود داخل هذه اداة.
ملاحظة: اذا لم تكن مدونتك تحتوي على مكتبة font awesome، فلن تظهر لك ايقونات الفيس بوك وتويتر…الخ. ولحل هذه المشكلة كل ما عليك فعله هو اضافة هذه المكتبة لمدونتك.
* لاتنسى تغير الكلمات التالية والموجودة في الكود السابق والكلمات هي:
FbLink هذه الكلمة قم بتغييرها برابط صفحتك على الفيس بوك.
TwitterLink وهذه قم بتغيير هذه برابط صفحتك على تويتر.
Google+Link وهذه برابط صفحتك على جوجل بلس.
PinterestLink ام هذه برابط صفحتك على بنترست.
RSSLink وهذه برابط خلاصتك.
FeedBornerID وهذا قم تغيره بـ ID الخاص بخلاصة feedburner الخاصة بمدونتكم.
كان هذا كل شيء عن كيفية اضافة صندوق المتابعة بالبريد الكتروني لمدونات بلوجر ، اتمنى ان تنال التدوينة اعجابكم ، اذا كان لديك اي استفسار قم بتركه في تعليق وسنرد عليك في اقرب وقت.