قالب مدون: كود الإعلانات البنرية مثل مدونة مدوّن

بسم الله الرحمن الرحيم

حبيت ان أقدم لكم كود التبادل الإعلانى البنرى لان الكثير طلبوه منى عبر البريد مع العلم إنه "متوفر" على الإنترنت ولكن حبيت ان أضعه لكم كود إحترافى وراح يعجبكم مثل الموجود حالياً فى مدونة مدوّن وهو ليس من تصميمنا .

الكود تركيبة سهل للغاية ستضع الكود التالى فى اداة جافاسكريبت

<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="http://arabe-eye.blogspot.com">
   <img src="http://i72.servimg.com/u/f72/17/70/27/78/arabe-10.gif" />
   <strong>عين العرب</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://www.alamfour.blogspot.com/">
   <img src="http://im42.gulfup.com/k40nO.gif" />
   <strong>Alamfour</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://a7trafy.blogspot.com">
   <img src="http://im31.gulfup.com/M3GmW.gif" />
   <strong>مدونة احترافي</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="/">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>اعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="/">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>اعلن</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>اعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOfrfvIVn6grDMaKhaabk_R4inHV6sueaGG4RYHGytDCdiCwvM2nhUv2rQmLtolHkRBsWhc6RipxadN8Lhpp0LZeXVEE1NTuvITXyCBM1oE5AWb5gf5rAgF47E_IUnyu3_VFJUUKKrCYN/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
</center>