|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
08-11-2012, 07:17 PM | #1 |
مدون نشيط
تاريخ التسجيل: Jun 2012
المشاركات: 224
|
كود التبادل الإعلاني بطريقة جميلة
السلام من الله عليكم ورحمته وبركاته أحببت أن أشرح طريقة تركيب التبادل الإعلاني مع الكود .. وهذا درسي اليوم كود التبادل الإعلاني عن طريق تقنية الـ 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:
2)ـ لتغيير الحجم والعرض والقرب مابين الصور استبدل الأرقام التي في كود PHP:
3)ـ لتغير نسبة الشفافية والوضوح استبدل الأرقام التي في ~ صور للمساعدة ~
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد - تبحث عن دروس إتش أم أل - تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر [url]http://cafe-arb.blogspot.com[/url} التعديل الأخير تم بواسطة overboy ; 08-11-2012 الساعة 07:19 PM |
08-11-2012, 09:04 PM | #2 |
مدير عام
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
|
رد: كود التبادل الإعلاني بطريقة جميلة
مشكور جدا أخي
تم إجراء بعض التعديلات على الموضوع حتى تظهر الألوان تقبل مروري
__________________
|
08-11-2012, 09:16 PM | #3 |
مدون نشيط
تاريخ التسجيل: Jun 2012
المشاركات: 224
|
رد: كود التبادل الإعلاني بطريقة جميلة
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد - تبحث عن دروس إتش أم أل - تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر [url]http://cafe-arb.blogspot.com[/url} |
08-11-2012, 09:33 PM | #4 |
مدون نشيط
تاريخ التسجيل: Apr 2012
الدولة: mecca
المشاركات: 253
|
رد: كود التبادل الإعلاني بطريقة جميلة
__________________
مدونة تهتم بآخر البرامج الكاملة و الألعاب و التطبيقات و أجمل العروض الحصرية http://flash-techno.blogspot.com |
08-11-2012, 09:41 PM | #5 |
مدون نشيط
تاريخ التسجيل: Jun 2012
المشاركات: 224
|
رد: كود التبادل الإعلاني بطريقة جميلة
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد - تبحث عن دروس إتش أم أل - تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر [url]http://cafe-arb.blogspot.com[/url} |
08-11-2012, 09:58 PM | #6 |
مدون مميز
|
رد: كود التبادل الإعلاني بطريقة جميلة
__________________
|
08-11-2012, 10:10 PM | #7 |
مدون مميز
|
رد: كود التبادل الإعلاني بطريقة جميلة
اخى جربتها فى مدونتين عندى وتظهر نفس النظام
هكذا بدون صور الاعلان
__________________
|
08-11-2012, 10:48 PM | #8 |
مدون نشيط
تاريخ التسجيل: Jun 2012
المشاركات: 224
|
رد: كود التبادل الإعلاني بطريقة جميلة
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد - تبحث عن دروس إتش أم أل - تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر [url]http://cafe-arb.blogspot.com[/url} |
08-11-2012, 10:59 PM | #9 |
مدير عام
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
|
رد: كود التبادل الإعلاني بطريقة جميلة
كان خطأ في الكود وتم تصحيحه
__________________
|
01-07-2013, 02:51 PM | #10 |
مدون جديد
|
رد: كود التبادل الإعلاني بطريقة جميلة
__________________
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
التبادل, الإعلاني, بطريقة, جميلة, كود |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
من يريد التبادل الإعلاني | 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 |
الساعة الآن 12:37 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |