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

 
قديم 08-11-2012, 07:17 PM   #1
overboy
مدون نشيط
 
الصورة الرمزية overboy
 
تاريخ التسجيل: Jun 2012
المشاركات: 224
افتراضي كود التبادل الإعلاني بطريقة جميلة

أنا : 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
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد
- تبحث عن دروس إتش أم أل
- تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر
[url]http://cafe-arb.blogspot.com[/url}
من مواضيع overboy

الدعم العربي


التعديل الأخير تم بواسطة overboy ; 08-11-2012 الساعة 07:19 PM
overboy غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
قديم 08-11-2012, 09:04 PM   #2
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : admin




مشكور جدا أخي
تم إجراء بعض التعديلات على الموضوع حتى تظهر الألوان
تقبل مروري

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 09:16 PM   #3
overboy
مدون نشيط
 
الصورة الرمزية overboy
 
تاريخ التسجيل: Jun 2012
المشاركات: 224
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : overboy




شكرا لك أخي
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد
- تبحث عن دروس إتش أم أل
- تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر
[url]http://cafe-arb.blogspot.com[/url}
من مواضيع overboy

الدعم العربي

overboy غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 09:33 PM   #4
yosefssss
مدون نشيط
 
الصورة الرمزية yosefssss
 
تاريخ التسجيل: Apr 2012
الدولة: mecca
المشاركات: 253
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : yosefssss




رووووووعة أخي شكراً جزيلاً لك
__________________
مدونة تهتم بآخر البرامج الكاملة و الألعاب و التطبيقات و أجمل العروض الحصرية
http://flash-techno.blogspot.com
من مواضيع yosefssss

الدعم العربي

yosefssss غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 09:41 PM   #5
overboy
مدون نشيط
 
الصورة الرمزية overboy
 
تاريخ التسجيل: Jun 2012
المشاركات: 224
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : overboy




تسلم على الرد
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد
- تبحث عن دروس إتش أم أل
- تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر
[url]http://cafe-arb.blogspot.com[/url}
من مواضيع overboy

الدعم العربي

overboy غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 09:58 PM   #6
REDA
مدون مميز
 
الصورة الرمزية REDA
 
تاريخ التسجيل: Apr 2012
المشاركات: 441
إرسال رسالة عبر Yahoo إلى REDA
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : REDA




لم تشتغل الاداة معايا ..الصور لم تظهر

الدعم العربي

REDA غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 10:10 PM   #7
REDA
مدون مميز
 
الصورة الرمزية REDA
 
تاريخ التسجيل: Apr 2012
المشاركات: 441
إرسال رسالة عبر Yahoo إلى REDA
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : REDA




اخى جربتها فى مدونتين عندى وتظهر نفس النظام
هكذا بدون صور الاعلان





الدعم العربي

REDA غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 10:48 PM   #8
overboy
مدون نشيط
 
الصورة الرمزية overboy
 
تاريخ التسجيل: Jun 2012
المشاركات: 224
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : overboy




أخي تأكد من الكود جيدا
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد
- تبحث عن دروس إتش أم أل
- تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر
[url]http://cafe-arb.blogspot.com[/url}
من مواضيع overboy

الدعم العربي

overboy غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 10:59 PM   #9
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : admin




اقتباس:
المشاركة الأصلية كتبت بواسطة reda مشاهدة المشاركة
اخى جربتها فى مدونتين عندى وتظهر نفس النظام
هكذا بدون صور الاعلان





كان خطأ في الكود وتم تصحيحه

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس
قديم 01-07-2013, 02:51 PM   #10
noukrach
مدون جديد
 
تاريخ التسجيل: Dec 2012
الدولة: maroc
المشاركات: 71
إرسال رسالة عبر MSN إلى noukrach
افتراضي رد: كود التبادل الإعلاني بطريقة جميلة

أنا : noukrach




اخي الصور لا تظهر المرجوا التحقق من الكود من جديد






الدعم العربي

noukrach غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدليلية (Tags)
التبادل, الإعلاني, بطريقة, جميلة, كود


 
أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG]متاحة
كود HTML معطلة



المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
من يريد التبادل الإعلاني the-xp3rt.blogspot.com التبادل الإعلاني 0 03-23-2013 07:12 PM
من يريد التبادل الإعلاني the-xp3rt.blogspot.com التبادل الإعلاني 0 03-23-2013 07:08 PM
[ شرح ] إضافة المشاركات الشـآئعة بطريقة جميلة Mr Chafiai إضافات وأدوات بلوجر 1 12-29-2012 03:32 PM
صندوق اعجابات الفيس بوك ينزلق عندما تنزل اسفل صفحة المدونة بطريقة جميلة مصطفي جبر إضافات وأدوات بلوجر 5 09-04-2012 04:09 AM
أهمية التبادل الإعلاني BLOGGER التبادل الإعلاني 3 04-26-2012 11:44 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin™ Version 3.8.7
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved. منتديات
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 12:48 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)