[overboy]

السلام من الله عليكم ورحمته وبركاته

أحببت أن أشرح طريقة تركيب التبادل الإعلاني مع الكود .. وهذا درسي اليوم

كود التبادل الإعلاني عن طريق تقنية الـ CSS3

مثـال





طريقة التركيب


إذهب في المكان الذي تريد أن تضع فيه " التبادل الإعلاني "

والأفرض جدلاً أنك تريد أن تضعه في القائمة الجانبية

من لوحة التحكم اذهب إلى

تصميم >> عناصر الصفحة >> اضافة اداة >> HTML/JavaScript


أضف الكود التالي

<style type="text/css">

  ul.social { list-style:none; margin:5px auto;display:inline-block; }
 ul.social li { display:inline; float:right; background-repeat:no-repeat; }
 ul.social li a { display:block; width:70px; height:94px; padding-right:24px; position:relative; text-decoration:none; }
 ul.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}

  ul.social li.ams1 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png "); }
 ul.social li.ams2 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png "); }
 ul.social li.ams3 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png "); }
 ul.social li.ams4 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png "); }
 ul.social li.ams5 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png "); }
 ul.social li.ams6 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/link410.png "); }

  #cssanime:hover li { opacity:0.2; }
 #cssanime li a strong { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
 #cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
 #cssanime li  { opacity:0.5; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
 #cssanime li:hover { opacity:1; }
 #cssanime li:hover a strong { opacity:1; top:-10px; }

</style>

  <ul class='social' id='cssanime'>

   <li class='ams1'>
   <a href="http://cafe-arb.blogspot.com/"><strong> مدونة عرب كافي 1</strong></a>
  </li>

   <li class='ams2'>
 <a href="http://cafe-arb.blogspot.com/"><strong> مدونة عرب كافي 2</strong></a>
  </li>

   <li class='ams3'>
   <a href="http://cafe-arb.blogspot.com/"><strong> مدونة عرب كافي 3</strong></a>
  </li>

   <li class='ams4'>
   <a href="http://cafe-arb.blogspot.com/"><strong> مدونة عرب كافي 4</strong></a>
  </li>

   <li class='ams5'>
   <a href="http://cafe-arb.blogspot.com/"><strong> مدونة عرب كافي 5</strong></a>
  </li>

   <li class='ams6'>
   <a href="http://cafe-arb.blogspot.com/"><strong> مدونة عرب كافي 6</strong></a>
  </li>

  </ul>
 

شرح الكود

ما باللون الأزرق | رابط الصور

ما باللون الأحمر | رابط الموقع

ما باللون الأخضر | الاسم الذي سيظهر


بالطبع كل صورة مرتبطة مع الاسم والرابط الخاص بها


ملاحظات

1)ـ بإمكانك حذف أو إضافة صورة عن طريق حذف الاسم الخاص به من الصور والراوبط

مثلاً حذف الصورة السادسة

كود PHP:

  ul.social li.ams6 { background-image:url("http://i45.servimg.com/u/f45/14/45/57/61/ams9012.png"); }
-------------------------------------
  <li class='ams6'>
   <a href="http://www.ams90.com/"><strong>Ams</strong></a>
  </li> 


2)ـ لتغيير الحجم والعرض والقرب مابين الصور استبدل الأرقام التي في

كود PHP:

"   ul.social li a " 


3)ـ لتغير نسبة الشفافية والوضوح استبدل الأرقام التي في

~ صور للمساعدة ~

الى هنا إنتهى الدرس وأتمني أن أجد واحد فقط يقوم بحط تعليق ولايك +++

المصدر : AMS90