• صفحة 1 من%
  • 1
إعلانات في الحاوية مميزة ( CSS و HTML )
ياسين
مشاركات: 1369
السمعة: 11
مشاركة # 1 | 15:32
السلام عليكم
كود خاص للاعلانات في الحاوية مميز و سهلة الاضافة, ساضع إان شاء الله الطريقة الخاصة لكيفية وضع الكود
في هده الاضافة تظهر بنرات الإعلانات بالوان و عند المرور فوقها بالماوس تاخد الوانها الطبيعية مع ظهور تسمية البنر بطريقة مميزة .
ملاحظة: الكود يوضع اين شئت لكن لاصحب الحواية الاولى والثانية
اما اصحاب المواقع ذات الحاوية الاولى فان الكود مناسب لهم

نبدا العمل من لوحة التحكم جدول اساليب css
نضع الكود
كود
/*-- Ads elilhame.ucoz 75 X 75 px sidebar------------*/
  ul.social {
  list-style:none;
  margin-top:5px auto;
  margin: 0 15px 5px 15px;
  display:inline-block;
  text-align: center; }
  ul.social li {
  display:inline;
  float:right;
  background-repeat:no-repeat; }
  ul.social li a {
  display:block;
  width:75px;
  height:75px;
  padding-right:10px;
  padding-top: 5px;
  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 img { max-height: 75px; max-width: 75px; }

  #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; }
/*-------end code Ads elilhame.ucoz--------------------------*/

ممكن التعديل على حجم الاطار الطول او العرض
ثم نضيف قسم عن طريق الباني في html نضيف الكود في الاسفل
كود
<ul class='social' id='cssanime'>

  <li class='Anassads1'>
  <a href="رابط الموقع">
  <img src="http://montada.ucoz.net/Icons/link410.png" />
  <strong>العنوان</strong></a>
  </li>

  <li class='Anassads2'>
  <a href="رابط الموقع">
  <img src="http://montada.ucoz.net/Icons/link410.png" />
  <strong>العنوان</strong></a>
  </li>

  <li class='Anassads3'>
  <a href="رابط الموقع">
  <img src="http://montada.ucoz.net/Icons/link410.png" />
  <strong>العنوان</strong></a>
  </li>

  <li class='Anassads4'>
  <a href="رابط الموقع">
  <img src="http://montada.ucoz.net/Icons/link410.png" />
  <strong>العنوان</strong></a>
  </li>
</ul>


يمكنكم زيادة عدد البنرات بزيادة هدا الكود مع تغيير الرقم 4 الى 5 او 6 وهكذا
كود
<li class='elilhameads[color=blue]4[/color]'>
  <a href="رابط الموقع">
  <img src="http://montada.ucoz.net/Icons/link410.png" />
  <strong>العنوان</strong></a>
  </li>


مثال حي في موقع تجريبي لكنب انصح التركيب لاصحاب المواقع الحاوية فقط اما المواقع التي لديها حاويتين فعليها جعل الكود مستطيل لا ان يكون مربع
مثال للكود


اظافات ucoz | دعم مواقع ucoz | الدعم المتقدم لمواقع ucoz دروس، اضافات، قوالب, دعم وتطوير مواقع ucoz



انطلاقتك نحو انشاء المواقع تبدا من اول نقطة
الحماحمى
مشاركات: 684
السمعة: 0
مشاركة # 2 | 17:00
حياك الله اخى الكريم ، دائماً تأتى بالاضافات المميزة

ملحوظة : الموقع الذي وضعته كمثال للكود ( مغلق ) ..

حياك الله
ياسين
مشاركات: 1369
السمعة: 11
مشاركة # 3 | 19:07
جزاك الله خيرا اخي الحماحمى, وشكرا لتنبيهي نسيت ضبط الاعدادات العامة

اظافات ucoz | دعم مواقع ucoz | الدعم المتقدم لمواقع ucoz دروس، اضافات، قوالب, دعم وتطوير مواقع ucoz



انطلاقتك نحو انشاء المواقع تبدا من اول نقطة
fr3onegypt
مشاركات: 258
السمعة: 1
مشاركة # 4 | 19:59
[color=blue]تسلم ايدك دائما تاتى بكل جديد[/color]
www.egmrkt.ucoz.com
  • صفحة 1 من%
  • 1
بحث: