السلام عليكم اخواني اخواتي ,,ومرحبا بكم في كل جديد من مدونة محترفي الحاسوب, اليوم باذن الله سنتعلم معا كيفية إضافة كود التبادل الإعلاني بتقنية 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>
- في الاخير لا تنسى, فيمكنك تغيير الرابط الملون باللون البرتقالي برابط الصورة التي تفضل و ايضا يمكنك تغير (#) الملونة بالاخضر برامط الموقع الدي ستتبادل الاعلان معه ايضا يمكنك مشاركة هده المقالت مع اصدقائك المدونون في منصة بلوجر و ضع تعليق ادا واجهت اي مشكل
السلام عليكم اخواني اخواتي ,,ومرحبا بكم في كل جديد من مدونة محترفي الحاسوب, اليوم باذن الله سنتعلم معا كيفية إضافة كود التبادل الإعلاني بتقنية 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>
- في الاخير لا تنسى, فيمكنك تغيير الرابط الملون باللون البرتقالي برابط الصورة التي تفضل و ايضا يمكنك تغير (#) الملونة بالاخضر برامط الموقع الدي ستتبادل الاعلان معه ايضا يمكنك مشاركة هده المقالت مع اصدقائك المدونون في منصة بلوجر و ضع تعليق ادا واجهت اي مشكل
