التبادل النصى بشكل بسيط من مدونة ابداعاتى

شرح التركيب 

<div class='myebd3at'>

  <ul>

 <li>

<a rel="nofollow" dir="rtl" href="#"target='_blank'>ضع إعلانك هنا</a>

</li>

 <li>

<a rel="nofollow" dir="rtl" href="#"target='_blank'>ضع إعلانك هنا</a>

</li>

 <li>

<a rel="nofollow" dir="rtl" href="#"target='_blank'>ضع إعلانك هنا</a>

</li>

 <li>

<a rel="nofollow" dir="rtl" href="#"target='_blank'>ضع إعلانك هنا</a>

</li>

 <li>

<a rel="nofollow" dir="rtl" href="#"target='_blank'>ضع إعلانك هنا</a>

</li>

 <li>

<a rel="nofollow" dir="rtl" href="#"target='_blank'>ضع إعلانك هنا</a>

</li>

</ul>

</div>

<style>

.myebd3at ul{width:300px;float:center;display:block;}

.myebd3at li{margin: 0;text-align: center;list-style:none;width:50%;float:right;padding:0 2px 0 3px;}

.myebd3at li a{position:relative;display:block;padding:.6em .6em .6em .6em;margin:.1em 0 .1em 0.5em

;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYHNnDvxPmExt3xmAD1Q4LA4dDnw2XQ_5E9fcJaIs2h72GAzUZ8vdmwISrlAfdo-RKELkoHqUjDm_iETXESFwjME8aUUwxfZp3wLcuYPkxIATAj64hKBns_hD4mN6lBZw3N_ZfoqSjf4U/s1600/debut_light.png')

;border:1px solid #DDD

;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:13px DroidKufi-Regular;);border: 2px solid #3a98e2;}

.myebd3at li a:hover:after{left:-.5em;border-left-color:#000000;}

</style>

♦ التعديلات اللازمة على الكود ♦