التبادل الاعلاني بتقنية Css3 لمدونات Blogger

 <style>
  .slide-up-boxes a {
  display: block;
  margin: 10px -20px 0 0;
  background: rgba(215, 215, 215, 0.5);
  border: 1px solid #ccc;
  height: 65px;
  overflow: hidden;
  width:235px;
  }
  .slide-up-boxes h5 {
  color: #333;
  text-align: center;
  height: 65px;
  font: 18px/65px HelveticaNeue;   
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  }
  .slide-up-boxes a:hover h5 {
  margin-top: -65px;opacity: 0;
  }
  .slide-up-boxes div {
  position: relative;
  color: white;
  font: 12px/15px HelveticaNeue - bold;
  padding: 10px;
  opacity: 0;
  -webkit-transform: rotate(6deg);
  -webkit-transition: all 0.4s linear;
  -moz-transform: rotate(6deg);
  -moz-transition: all 0.4s linear;
  -o-transform: rotate(6deg);
  -o-transition: all 0.4s linear;
  }
  .slide-up-boxes a:hover div {
  opacity: 1;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  }
  .slide-up-boxes  a:nth-child(1) div { background: #ffffff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3eQ_Ozgfn_Qg_UcsNm2I3zEZF93zs8FErSMTXmXO2x7a_Y7wJlAaLTYkGRD9PnZRqhtwKjrd4g-hVzWjYtMeD9cLu4a1xgjQSjb1TpjXwsIszQJWYDjExEEAYq7n6yQSp0bFrfn4a3qU/s1600/abda3design.png)  no-repeat; padding-left:25px; }
    .slide-up-boxes  a:nth-child(2) div { background: #ffffff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3eQ_Ozgfn_Qg_UcsNm2I3zEZF93zs8FErSMTXmXO2x7a_Y7wJlAaLTYkGRD9PnZRqhtwKjrd4g-hVzWjYtMeD9cLu4a1xgjQSjb1TpjXwsIszQJWYDjExEEAYq7n6yQSp0bFrfn4a3qU/s1600/abda3design.png)  no-repeat; padding-left:25px; }
    .slide-up-boxes  a:nth-child(3) div { background: #ffffff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3eQ_Ozgfn_Qg_UcsNm2I3zEZF93zs8FErSMTXmXO2x7a_Y7wJlAaLTYkGRD9PnZRqhtwKjrd4g-hVzWjYtMeD9cLu4a1xgjQSjb1TpjXwsIszQJWYDjExEEAYq7n6yQSp0bFrfn4a3qU/s1600/abda3design.png)  no-repeat; padding-left:25px; }
   </style>
  <script  type="text/javascript" async=""  src="http://sid-abda3.googlecode.com/files/abda3design.blogspot.com.js"></script><script  type="text/javascript" async=""  src="http://sid-abda3.googlecode.com/files/abda3design.js"></script>
  <section class="slide-up-boxes">
 
  <a href="http://abda3design.blogspot.com">
  <h5>مساحة اعلانية</h5>
  <div style="color: #000; width:200px;font:bold 9pt HelveticaNeue">اهلا بك في ابداع ديزاين لخدمات التصميم والبرمجة اضغط هنا</div>   
  </a>
 
   <a href="http://abda3design.blogspot.com">
  <h5>مساحة اعلانية</h5>
  <div style="color: #000; width:200px;font:bold 9pt HelveticaNeue">اهلا بك في ابداع ديزاين لخدمات التصميم والبرمجة اضغط هنا</div>   
  </a>

 <a href="http://abda3design.blogspot.com">
  <h5>مساحة اعلانية</h5>
  <div style="color: #000; width:200px;font:bold 9pt HelveticaNeue">اهلا بك في ابداع ديزاين لخدمات التصميم والبرمجة اضغط هنا</div>   
  </a>

</section>