كيفية عمل ركن للتبادل الاعلاني لمدونات بلوجر

في هذا الدرس احببت ان اوضح طريقة لاضافة ركن للتبادل الاعلاني بشكل جميل كما في الشكل التالي :

لمشاهدة نموذج عن الكود على مدونة تجريبية اضغط هنا 

طريقة التركيب:-

1-الذهاب الى صفحة اعدادات مدونتك

2-قم بالذهاب الى تبويب (التخطيط) كما في الصورة ادناه

3-قم بالضغط على اختيار اداة في القسمالذي تود ان تعرض فيه (يفضل وضعها فوق الرسائل الالكترونية)

4-قم باختيار ( اضافة html/javascript )

قم بنسخ الكود التالي وضعه في الفراغ السفلي مع تغيير ما يلي :-

1- غير ما كتب باللون الاحمر "www.ahmad1996.com" بعنوان المدونة التي تود الاعلان عنها 

2- غير ما كتب باللون الازرق >اسم المدونة المعلن عنها<   باسم المدونة التي تود الاعلان عنها 

3- غير ما كتب باللون الاخضر"http://im33.gulfup.com/4ylL2.gif" بصورة بنر المدونة التي تود الاعلان عنها 

<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> <center> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com"> <img src=" http://im33.gulfup.com/4ylL2.gif " /> <strong>اسم المدونة المعلن عنها</strong></a> </div> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com"> <img src="http://im33.gulfup.com/4ylL2.gif" /> <strong>اسم المدونة المعلن عنها</strong></a> </div> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com"> <img src="http://im33.gulfup.com/4ylL2.gif" /> <strong>اسم المدونة المعلن عنها</strong></a> </div> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com"> <img src="http://im33.gulfup.com/4ylL2.gif" /> <strong>اسم المدونة المعلن عنها</strong></a> </div> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com"> <img src="http://im33.gulfup.com/4ylL2.gif" /> <strong>اسم المدونة المعلن عنها</strong></a> </div> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com"> <img src="http://im33.gulfup.com/4ylL2.gif" /> <strong>اسم المدونة المعلن عنها</strong></a> </div> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com" /> <img src="http://im33.gulfup.com/4ylL2.gif" /> <strong>اسم المدونة المعلن عنها</strong></a> </div> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com"> <img src="http://im33.gulfup.com/4ylL2.gif" /> <strong>اسم المدونة المعلن عنها</strong></a> </div> <div class="adss" id='adsanime'> <a href="www.ahmad1996.com"> <img src="http://im33.gulfup.com/4ylL2.gif" /> <strong>اسم المدونة المعلن عنها</strong></a> </div> </center>