كيفية إضافة انضمام لهذا الموقع بشكل جديد واحترافي لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته .

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

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

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

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

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

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

 <style type="text/css">
/* HomeBlogger Box CSS */
@media (max-width:800px){ #HB-box { display:none; } }
#HB-box {
position:fixed !important;
position:absolute;
top:-700px;
left:39%;
margin:0px 0px 0px -182px;
font:normal Dosis, Georgia, Serif;
color:#333;
-webkit-box-shadow:0px 0px 10px #333;
-moz-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
background:#fff;
}
#HB-box a.close-popup {
position:absolute;
top:-25px;
right:0px;
font:25px Arial, Sans-Serif;
text-decoration:none;
text-align:center;
color:#f2f2f2;
cursor:pointer;
}
#HB-box a.close-popup:hover { color:#fff; }
#HB-box a.close-popup:active { opacity:0; }
#HB-box div.black-bg { background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmnQie9Sq5MBIW5LRBEZX6G3vCcqXiqOC7j1FWrEkdWyz03Yx3jpRo891DPiLsZfNRKscj-4eJ5j7cTkfPgN-kieTJDx8efwQCOKS7VMkyaaN5564TvD4GcVhG21yN9yJZDsHCUOg_2cl/s1600/ajax-loader-apps.gif) no-repeat center;position:fixed;top:0px;left:0px;width:100%;height:100%;opacity:.6;z-index:-500; }
#HB-box div.gambar-space { border:5px solid #fff; position:relative; background:#fff;border-bottom:0px;}
#HB-box div.gambar-space img { width:600px; height:400px; }
</style> 

5- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

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

 <!-- jQuery HB-Box [ Begin ] -->
<div id='HB-box'>
<a class='close-popup' href='#'>&#215;</a>
<div class='black-bg kaluar'/>
<div class='gambar-space'>
<a href='https://www.blogger.com/follow-blog.g?blogID=ضع هنا أي دي مدونتك'><img alt='Judul' src='http://e.top4top.net/p_642vr21.png'/></a>
</div>
</div>

<script type='text/javascript'>
// JavaScript HB-Box
$(window).bind(&quot;load&quot;, function() {
$(&#39;#HB-box&#39;).animate({top:&quot;100px&quot;}, 2000);
$(&#39;a.close-popup, .kaluar&#39;).click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>
<!-- jQuery HB-Box [ End ] --> 

7- ستبدل عبارة " ضع هنا أي دي مدونتك" بالكود  بــ أي دي مدونتك .

 - ابحث بالكود عن رابط الصورة التالي : http://e.top4top.net/p_642vr21.png  واستبدلها برابط هذه الصورة أعددنها فارغة غير مكتوب عليها ، تسطيع تنزليها والكتابه عليها ، رابط الصورة : http://a.top4top.net/p_644bo51.png

8- احفظ القالب .

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