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