شرح إضافة صندوق التبادل الأعلانى بالمدونه ~ مدونة الإحتراف - تكنولوجيا - شروحات - أنترنت - فيس بوك - جوجل

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

النهارده هنشرح أزاى نضيف صندوق التبادل الأعلانى فى المدونه بشكل جميل جداً بأكواد CSS

يستخدم الكثير منا التبادل الإعلانى لكسب الزوار و المتابعين للمدونه الخاصه بهم فاليوم أقدم لكم شرح إضافة هذا الصندوق بشكل جميل

والآن مع الشرح :

أولاً : نقوم بدخول لوحة التحكم الخاصه بالمدونه

ثانياً : نضغط على تخطيط

ثالثاً : نقوم بإضافة HTML/JavaScript

رابعاً : نقوم بوضع هذا الكود داخل المحتوى الخاص بالأداه .:

<style>

#advertise{

margin: auto;

}

.adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }

.adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }

.adss 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);}

.adss img { max-height: 75px; max-width: 75px; }

#adsanime:hover { opacity:0.2; }

#adsanime a strong {

-webkit-transition-property: opacity;

-webkit-transition-duration: 500ms;

-moz-transition-property: opacity;

-moz-transition-duration: 500ms; }

#adsanime a strong {

opacity:0;

-webkit-transition-property: opacity, top;

-webkit-transition-duration: 300ms;

-moz-transition-property: opacity, top;

-moz-transition-duration: 300ms; }

#adsanime {

opacity:0.5;

-webkit-transition-property: opacity, top;

-webkit-transition-duration: 300ms;

-moz-transition-property: opacity, top;

-moz-transition-duration: 300ms; }

#adsanime:hover { opacity:1; }

#adsanime:hover a strong { opacity:1; top:-10px; }

</style>