03-13-2014, 11:07 PM
#1
مدون نشيط
تاريخ التسجيل: Feb 2014
المشاركات: 124
اضافة بنرات اعلانية بتأثير الجي كويري - اضافات بلوجر
السلام عليكم ورحمة الله وبركاته
اقدم لكم اليوم اضافة جميلة وهي اضافة بنرات اعلانية بتأثير الجي كويري الرائع
التركيب :
اذهب الي صفحة القالب ثم تحرير HTML وابحث عن : ]]></b:skin>
واضف الكود التالي اعلاها :
كود PHP:
ul . thumb {
float : left ;
list- style : none ;
margin : 0 ; padding : 10px ;
width : 360px ;
}
ul . thumb li {
margin : 0 ; padding : 5px ;
float : left ;
position : relative ;
width : 110px ;
height : 110px ;
}
ul . thumb li img {
width : 100px ; height : 100px ;
- ms - interpolation - mode : bicubic ;
border : 1px solid #ddd;
padding : 5px ;
background : #f0f0f0;
position : absolute ;
left : 0 ; top : 0 ;
}
ul . thumb li img . hover {
background : url ( https : //sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;
border : none ;
}
ثم ابحث عن : </head> واضف اعلاه الكود التالي :
كود PHP:
< script src = 'http://code.jquery.com/jquery-latest.js'
type = 'text/javascript' />
< script type = 'text/javascript' >
$undefineddocument ). readyundefinedfunctionundefined ){
//Larger thumbnail preview
$undefined & quot ; ul . thumb li & quot ;). hoverundefinedfunctionundefined ) {
$undefinedthis ). cssundefined {& #39;z-index' : '10'});
$undefinedthis ). findundefined & #39;img').addClassundefined"hover")
. stopundefined )
. animateundefined {
marginTop : & #39;-110px',
marginLeft : & #39;-110px',
top : & #39;50%',
left : & #39;50%',
width : & #39;174px',
height : & #39;174px',
padding : & #39;20px'
}, 200 );
} , functionundefined ) {
$undefinedthis ). cssundefined {& #39;z-index' : '0'});
$undefinedthis ). findundefined & #39;img').removeClassundefined"hover")
. stopundefined )
. animateundefined {
marginTop : & #39;0',
marginLeft : & #39;0',
top : & #39;0',
left : & #39;0',
width : & #39;100px',
height : & #39;100px',
padding : & #39;5px'
}, 400 );
});
//Swap Image on Click
$undefined & quot ; ul . thumb li a & quot ;). clickundefinedfunctionundefined ) {
var mainImage = $undefinedthis ). attrundefined & quot ; href & quot ;); //Find Image Name
$undefined & quot ; #main_view img").attrundefined{ src: mainImage });
});
});
</script>
واحفظ العمل واذهب الي صفحة التخطيط واضف اداة جديدة HTML واضف بها الكود التالي :
كود PHP:
< ul class= "thumb" >
< li >< a href = "رابط المعلن" >< img src = "http://im32.gulfup.com/px4oW.gif" alt = "" /></ a ></ li >
< li >< a href = "رابط المعلن" >< img src = "http://im32.gulfup.com/px4oW.gif" alt = "" /></ a ></ li >
< li >< a href = "رابط المعلن" >< img src = "http://im32.gulfup.com/px4oW.gif" alt = "" /></ a ></ li >
< li >< a href = "رابط المعلن" >< img src = "http://im32.gulfup.com/px4oW.gif" alt = "" /></ a ></ li >
</ ul >
وضع رابط المعلن وعنوانه واحفظ العمل
__________________
من مواضيع Blog-Add