WALID28 Admin
عدد المساهمات : 131 نقاط : 156148 السٌّمعَة : 0 تاريخ التسجيل : 09/09/2013
| موضوع: إضافة كود التبادل الإعلاني إلى مدونات البلوجر مع تأثيرات على الصور الجمعة سبتمبر 13, 2013 12:43 pm | |
|
السلام عليكم و رحمة الله تعالى و بركاته, أخواني الكرام زوار و متتبعي مدونة mstaphabouh في هذا الموضوع سأشرح لكم كيفية إضافة كود التبادل الإعلاني إلى مدونات البلوجر مع تأثيرات على الصور قمة في الروعة, و قد سبق لي أن قدمت درسا لطريقة إضافة كود التبادل الإعلاني لكنه كان بسيطا بدون تأثيرات, و أنا متأكد أن إضافة اليوم ستنال إعجابكم.
مثال مباشر
إذا أعجبك التأثير و تريد إصافته إلى مدونتك كل ما عليك فعله هو تتبع المراحل البسيطة التالية :توجه إلى » لوحة التحكم الخاصة بمدونتك ثم » تصميم ثم » إضافة أداة و من النافذة المنبثقة اختر أداة HTML/Javascript الآن قم بنسخ ثم لصق الكود التالي داخل الأداة.
كود: <!--CSS Hover Effects To 125x125 Advertisement Banners-->
<style> .Mstaphabouh-Ads ul{ list-style-type:none; margin: 0px auto; padding: 10px 0px 10px 0px; width:300px; overflow:hidden; } .Mohamed-Ads ul li{ list-style-type:none; margin: 0px 5px 10px 5px; float:left; display:inline; background:orange; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; } .Mohamed-Ads ul li:hover { -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; -o-border-radius:15%; -webkit-border-radius:15%; -moz-border-radius:15%; border-radius:15%; } .Mohamed-Ads ul li:active { -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; -o-border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } .Mohamed-Ads ul li a img{ -webkit-box-shadow:0 0 8px rgba(0,0,0,0.5); -moz-box-shadow:0 0 8px rgba(0,0,0,0.5); box-shadow:0 0 8px rgba(0,0,0,0.5); padding:3px; } </style> <div class="Mohamed-Ads"> <ul> <li style="background:#e42b2b !important;"> <a href="رابط المعلن" rel="nofollow"> <img height="125" src="رابط صورة المعلن" width="125" /> </a></li> <li style="background:#FFE500 !important;"> <a href="رابط المعلن" rel="nofollow"> <img height="125" src=" رابط صورة المعلن" width="125" /> </a></li> <li style="background:#a800ff !important;"> <a href="رابط المعلن" rel="nofollow"> <img height="125" src=" رابط صورة المعلن" width="125" /> </a></li> <li style="background:#41d05f !important;"> <a href="رابط المعلن" rel="nofollow"> <img height="125" src=" رابط صورة المعلن" width="125" /> </a></li> </ul> </div> <!--CSS Hover Effects To 125x125 Advertisement Banners—> التعديل على الكود : رابط المعلن : رابط الموقع المعلن في مدونتك. رابط صورة المعلن : رابط صورة الموقع المعلن في مدونتك. | |
|