إضافة صورة تهنئة بحلول شهر رمضان الكريم floating image

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

 

أتمنى أن يكون الجميع بخير إن شاء الله. موضوع اليوم أخي الكريم هو بخصوص وصع صورة في مدونتك في الجانب الأيمن من مدونتك و تتميز بأنها تطفو مع باقي النص كما يمكنك إغلاقها عبر زر الإغلاق.

 

 

 

و هي هدية بمناسبة قرب حلول شهر رمضان الكريم أعاده الله علينا بالخير إن شاء الله. يمكنك معاينة الإضافة من هنا.

 

اقرا ايضا :تحديث إضافة Tabbed Sidebar بمظهر جديد

لكي لا أطيل عليك أتركك مع طريقة تركيب الإضافة.

 

توجه إلى تحرير HTML و ابحث عن الكون عن طريق الزرين Ctrl+F (لمعرفة المزيد عن طريقة البحث)

 

 

 

بعد ذالك قم بالبحث عن الوسم التالي:

 

</head>

بعد ذالك قم بلصق الكود التالي فوقه مباشرة

 

<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;

اقرا ايضا :مربع إعلان لبلوغر مع خاصية الإغلاق Box warning

this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}
function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}

اقرا ايضا :قائمة جانبية أنيقة و جميلة بتقنية CSS

function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>
</script>

 

الأن قم بالبحث عن الوسم التالي:

 

</body>

بعد ذالك قم بلصق الكود الثاني فوقه مباشرة

 

<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkF8Jb9Vxhr_m__LdJG7PKClYX1igV2RLWvK9h9o0y6oDcvWasUalD1oWwVk5YIfS5cxUapPW4od8kybc6HcKnae6DlUWG9B6UNGNV1O89mc9SCKtA31kjWSc3sq-3q4nyAMkKmT2FW7Y/s200/iconClose.gif'/>
</div>

 

بعد ذالك قم بالبحث عن الوسم الأخير

 

]]></b:skin>

الأن قم بلصق الكود الأخير قبله مباشرة

 

#ftr_imagen {

اقرا ايضا :حل مشكلة صندوق الفيس بوك Like Box

background: url(URL YOUR IMAGE) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}

 

أضف رابط الصورة في مكان URL YOUR IMAGE يجب أن تكون الصورة بنفس المقاس الموجود بالكود لكي تظهر كاملة كما يمكنك التغير في قيم الطول و العرض كما تشاء.

 

تحياتي لك