بلوجر: طريقة اضافة أداة التبادل الإعلاني مع تأثيرات CSS عند تمرير مؤشر الماوس

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

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

1.أولا قم بنسخ الكود التالي:

<center><font color="#444444"></font>
<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:95px; height:95px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; } .adss a strong { font-weight:normal; position:absolute; left:-5px; top:-1px; color:#fff; padding:2px; 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: 95px; max-width: 95px; } #adsanime:hover { opacity:0.5; } #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:-30px; } </style> <center> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'>

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'>

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'>

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'>

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> <div class="adss" id='adsanime'> 

<a href="http://astu-tech.blogspot.com/p/exchange-ad_2679.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJoI2r-53R-LDkzzNqszb3hydcRk4Z8KEaQnxk67zNkf-BrPxEUqKGIK6NfTCofAHtPXyQq0RJ8C_ePyxHovQxwORUPEweRJgcGfZ6PjKT9GEVSAFQGYQjWYQG3GuERvL3xkV6Ia3_g5s/s1600/tabadol+i3lani+150x150.png" /> <strong>ضع اعلانك هنا مجّانا</strong></a> </div> 
</center></center>

• أو قم بتحميله من هنا 

ملاحظة:
عليك بتغيير ما هو ملوّن:
بالأحمر: رابط صفحة التبادل الإعلاني الخاص بمدونتنا إلى رابط التبادل الإعلاني لمدونتك (قم بإنشاء صفحة سمها تبادل إعلاني تضع فيها شروطك ثم إنسخ رابطها هنا، هذه الصفحة تعتبر مكان يضع فيها الراغبون في التبادل الإعلاني معك رابط مدوناتهم و و البانر الخاص بهم، شاهد مثال من هنا ولكن عند عمل تبادل الإعلاني قم بوضع رابط المدونة التي تريد التبادل معها)
بالأخضر: رابط البانر (الصورة).
بالأزرق: إسم المدونة.

2.توجه إلى لوحة التحكم بلوجر ثم قم باختيار المدونة المستهدفة، كما في الصورة

3.إختر على اليسار تخطيط أو Layout

4.ثم إضافة أداة أو Add a Gadget

5.إختار HTML/ JavaScript

6.قم بلصق الكود الذي نسخته من قبل في المكان المخصص له ويمكنك كتابة في العنوان: "مدونات صديقة" أو "تبادل إعلاني"

ملاحظات:
1.الأداة تأخد نفس عرض المكان الذي توضع فيه
2.يمكنك تغيير حجم البانر بتغيير قيم max-width ،max-height، width، height 
3.يمكنك إضافة أماكن إعلانية أخرى (مربعات) أو حذفها بإضافة أو حذف فقرات كما في الصورة

مبروك عليكم الإضافة...