02-08-2014, 02:56 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' >
$( document ). ready (function(){
//Larger thumbnail preview
$(& quot ; ul . thumb li & quot ;). hover (function() {
$( this ). css ({& #39;z-index' : '10'});
$( this ). find (& #39;img').addClass("hover")
. stop ()
. animate ({
marginTop : & #39;-110px',
marginLeft : & #39;-110px',
top : & #39;50%',
left : & #39;50%',
width : & #39;174px',
height : & #39;174px',
padding : & #39;20px'
}, 200 );
} , function() {
$( this ). css ({& #39;z-index' : '0'});
$( this ). find (& #39;img').removeClass("hover")
. stop ()
. animate ({
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
$(& quot ; ul . thumb li a & quot ;). click (function() {
var mainImage = $( this ). attr (& quot ; href & quot ;); //Find Image Name
$(& quot ; #main_view img").attr({ src: mainImage });
});
});< font size = "0" >< a href = " http://www.pergola-aluminium.org" ></ a ></ font >
</script>
وقم بحفظ القالب وأذهب الي التخطيط وأضف ادارة بالمكان الذي تريد اظهار البنرات به واضف الكود التالي
كود PHP:
< ul class= "thumb" >
< li >< a href = "رابط المعلن" >< img src = "http://www.arabsharing.com/uploads/1391871304531.jpg" alt = "" /></ a ></ li >
< li >< a href = "رابط المعلن" >< img src = "http://www.arabsharing.com/uploads/1391871304531.jpg" alt = "" /></ a ></ li >
< li >< a href = "رابط المعلن" >< img src = "http://www.arabsharing.com/uploads/1391871304531.jpg" alt = "" /></ a ></ li >
< li >< a href = "رابط المعلن" >< img src = "http://www.arabsharing.com/uploads/1391871304531.jpg" alt = "" /></ a ></ li >
</ ul >
وثم بالحفظ ومبروك وتمنياتي لك بالتوفيق
__________________
من مواضيع Blog-Add