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

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

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

أولا من لوح تحكم مدونتك إختر تخطيط ثم إضافة أداة ثم HTML/JAVA SCRIPT وأضف الكود التالي.

 <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/AVvXsEis6XhKYtZ6BUgK2ddaXINK7AWPH31pnnWnXex16udY5DtSgU417dBG3rIuxBPCfTLsDlRwgVUCx5tO8sj9OskT9wGtciYZ3BNOuWhJR2romBeeOctP1Yzh1mEoMLc4GEhT1enjJz7LvRY/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/AVvXsEis6XhKYtZ6BUgK2ddaXINK7AWPH31pnnWnXex16udY5DtSgU417dBG3rIuxBPCfTLsDlRwgVUCx5tO8sj9OskT9wGtciYZ3BNOuWhJR2romBeeOctP1Yzh1mEoMLc4GEhT1enjJz7LvRY/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/AVvXsEis6XhKYtZ6BUgK2ddaXINK7AWPH31pnnWnXex16udY5DtSgU417dBG3rIuxBPCfTLsDlRwgVUCx5tO8sj9OskT9wGtciYZ3BNOuWhJR2romBeeOctP1Yzh1mEoMLc4GEhT1enjJz7LvRY/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>

يمكنك التعديل على الكود عن طريق الطول والعرض الموضح في الكود وايضا الروابط والعناوين
ومبروك عليك الاضافة .