|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
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 |
مواقع النشر (المفضلة) |
الكلمات الدلالية (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 |
الساعة الآن 05:37 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |