معهد خبراء بلوجر - كود التبادل الإعلاني بطريقة جميلة

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

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

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

مثـال

http://2.bp.blogspot.com/-_GH-u_Jlyv...%25D9%2585.png

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

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

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

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

تصميم >> عناصر الصفحة >> اضافة اداة >> 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)ـ لتغير نسبة الشفافية والوضوح استبدل الأرقام التي في

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

http://i45.servimg.com/u/f45/14/45/57/61/link110.png http://i45.servimg.com/u/f45/14/45/57/61/link210.png http://i45.servimg.com/u/f45/14/45/57/61/link310.png http://i45.servimg.com/u/f45/14/45/57/61/link410.png http://i45.servimg.com/u/f45/14/45/57/61/link510.png

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

المصدر : AMS90