اضافة صندوق التبادل الاعلاني للبلوجر بشكل جميل وانيق

 شكل الصندوق

اهلا ومرحبا بكم زوار موقعنا مدونة اللامي الكرام

درسنا اليوم حول كيفية إضافة كود التبادل الإعلاني بتقنية CSS بشكل انيق جدا وعصري إلى مدونات بلوجر مع تأثيرات رائعه على الصور يمكنك تخصيصها والتحكم بها عن طريق تغيير CSS و HTML وفقا للحاجة الخاصة بك ,,, ينصح لمن يستخدم هذه الاضافه ان يكون مقاس البنر الاعلاني 125x125 لتظهر بشكل جميل ولتاخذ الاضافه كامل احترافيتها

شرح و كيفية تركيب :
انتقل إلى لوح تحكم مدونتك،
إختر "تخطيط" ثم إضافة أداة ,ثم اختر 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-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} .adss img {-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 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="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> 
<strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="#"> <img src="http://dc598.4shared.com/img/-dM-oyydba/s3/143793e90a0/___online.gif" /> <strong>اعلن هنا</strong></a> </div> <a href='http:/ha1pc.blogspot.com/' style='display:none;' rel='nofollow'>Ha1Pc</a> </center>

في الاخير لا تنسى, فيمكنك تغيير الرابط الملون باللون البرتقالي برابط الصورة التي تفضل و ايضا يمكنك تغير (#) الملونة بالاخضر برامط الموقع الدي ستتبادل الاعلان معه ايضا يمكنك مشاركة هده المقالت مع اصدقائك المدونون في منصة بلوجر و ضع تعليق ادا واجهت اي مشكلة.

شارك الموضوع ..