أداة التبادل الإعلاني بتقنية Exchange advertising tool css3

أداة التبادل الإعلاني بتقنية Exchange advertising tool css3

السلام عليكم ورحمة الله تعالى وبركاته
يوجد الكثير من الإضافات الخاصة بالتبادل الإعلاني لكن تبقى هذه الإضافات تقليدية ولاتعطي جمالية للمدونة لكن ليس بعد الآن فقد أتيتكم بواحدة ستعجبكم فهي على عكس سابقاتها من الإضافت مصممة بتقنية الويب الحديثة ألا وهي CSS3 الإضافة سلسة وتعطي منظر جميل للمدونة يمكنك مشاهدة مثال على الإضافة من هنا،لاأطيل عليكم أترككم مع شرح تركيب الإضافة.

أولا من لوح تحكم مدونتك إختر تخطيط ثم إضافة أداة ثم HTML/JAVA SCRIPT وأضف الكود التالي.

كود:

 <style>
  .slide-up-boxes a { 
  display: block;
  margin: 10px -20px 0 0; 
  background: rgba(215, 215, 215, 0.5); 
  border: 1px solid #ccc; 
  height: 65px; 
  overflow: hidden;
  width:235px; 
  }
  .slide-up-boxes h5 { 
  color: #333; 
  text-align: center;
  height: 65px; 
  font: 18px/65px HelveticaNeue;    
  opacity: 1;
  -webkit-transition: all 0.2s linear; 
  -moz-transition: all 0.2s linear; 
  -o-transition: all 0.2s linear;
  }
  .slide-up-boxes a:hover h5 { 
  margin-top: -65px;opacity: 0; 
  }
  .slide-up-boxes div { 
  position: relative; 
  color: white; 
  font: 12px/15px HelveticaNeue - bold;
  padding: 10px; 
  opacity: 0; 
  -webkit-transform: rotate(6deg); 
  -webkit-transition: all 0.4s linear; 
  -moz-transform: rotate(6deg); 
  -moz-transition: all 0.4s linear; 

__________

أداة التبادل الإعلاني بتقنية css3 - اداة التبادل الاعلانى - اضافة التبادل الاعلانى - كود تبادل اعلانى - أداة التبادل الإعلاني بتقنية css3

ads

Posted in: تطوير مدونات بلوجر