طريقة إضافة رسالة ترحيبية عائمة لمدونات بلوجر

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

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

لعاينة الإضافة

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

1- أدخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : </head>

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

<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>

4- بعد ذلك إبحث عن الوسم : </body>

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

<!-- jQuery HB-Box [ Begin ] -->
<div id="hb-box">
<a class="close-popup" href="#">&#215;</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#link"><img src="http://i38.servimg.com/u/f38/17/70/27/78/a12.jpg" alt="Judul"/></a>
</div>
</div>
<script type='text/javascript'>
// JavaScript hb-Box
$(window).bind("load", function() {
$('#hb-box').animate({top:"100px"}, 2000);
$('a.close-popup, .kaluar').click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>
<!-- jQuery HB-Box [ End ] -->

6- التعديلات :

1- ماهو باللون الأحمر صورة تناسب مدونتك حجم الصورة : - العرض : 600 .

                                                                             - الارتفاع أو الطول : 400 .

2- أو إذا أحببت أن تضع الصورة التالية :

- فقط إنسخ رابط الصورة واستبدله بما هو باللون الأحمر .

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .