اضافة صندوق التبادل الاعلانى بشكل رائع جدا CSS

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى 

اقدم لكم اضافة اعلانات بطريقة مميزة ( css / HTML )  للتبادل الاعلانى 

خطوات التركيب بالمدونة :

• بعد التسجيل بمدونتك ودخول لوحة التحكم 
• اضغط على تخطيط 
• بعد ذلك نضغط اضافة اداة  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> <center> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="http://upload.traidnt.net/upfiles/qr456537.gif" /> <strong>اعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg" /> <strong> أعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg" /> <strong>أعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg" /> <strong>أعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg" /> <strong>أعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg" /> <strong>أعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg" /> <strong>أعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg" /> <strong>أعلن هنا</strong></a> </div> <div class="adss" id="adsanime"> <a href="http://add-b.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg" /> <strong>أعلن هنا</strong></a> </div> </center> <a href="http://add-b.blogspot.com/"></a>

التعديلات :

1- استبدل رابط مدونتي برابط مدونتك

www.proxelano.blogspot.com/

2- استبدل الاسم باسم مدونتك

اعلن هنا

3- استبدل الصورة بالصورة لمدونتك

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtkqdCps3mjf2igNK745qs6DV9ZMb4oQ1tbTz_b95M6aZ5hGCWhiRkYv9mBj5EtTBFv8ilcbN4sGcNroTTvH73X5jxZygrFDGJCn8qe2fEe0HlTM9XvmWQzq9-fs6Nr4teaXTSe0eeYNE/s1600/adschange_125-125.jpg

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

رجاءّ اذا واجهتك اى مشكلة فى وضع الاكواد لاتترد فى طرحها علينا

وسنقوم بأذن الله بحلها فوراّ

من فضلك شارك هذا الموضوع اذا اعجبك

الموضوع من طرف: عبد الحكيم الحماني

عبد الحكيم الحماني 19 سنة ،مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بتطوير المواقع والتجارة الالكترونية يمكنك متابعته من خلال الفيسبوك . تويتر . جوجل بلس

ضع تعليقا أخي الكريم