أداة التبادل الإعلاني بتقنية CSS3

السلام عليكم ورحمة الله تعالى وبركاته لعل هناك الكثير من الإضافات الخاصة بالتبادل الإعلاني المنتشرة لكن تبقى هذه الإضافات تقليدية ولاتعطي جمالية للمدونة لكن ليس بعد الآن فقد أتيتكم بواحدة ستعجبكم فهي على عكس سابقاتها من الإضافت مصممة بتقنية الويب الحديثة ألا وهي 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: #c73b1b url(http://cdn1.iconfinder.com/data/icons/dellipack/48/interact.png) no-repeat; padding-left:25px; }

.slide-up-boxes a:nth-child(2) div { background: #c73b1b url(http://cdn1.iconfinder.com/data/icons/dellipack/48/interact.png) no-repeat; padding-left:25px; }

.slide-up-boxes a:nth-child(3) div { background: #c73b1b url(http://cdn1.iconfinder.com/data/icons/dellipack/48/interact.png) no-repeat; padding-left:25px; }

</style>

<script type="text/javascript" async="" src="//s3.buysellads.com/ac/bsa.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>

<section class="slide-up-boxes">

<a href="http://blogg-face.blogspot.com">

<h5>مساحة الاعلانية</h5>

<div style="width:200px;font:bold 9pt HelveticaNeue;">اهلا بك في مدونة كمبيوتر العرب للتبادل الاعلاني اضغط هنا</div>

</a>

<a href="http://arabs-c.blogspot.com">

<h5>مساحة الاعلانية</h5>

<div style="width:200px;font:bold 9pt HelveticaNeue">اهلا بك في مدونة كمبيوتر العرب للتبادل الاعلاني اضغط هنا</div>

</a>

<a href="http://arabs-c.blogspot.com">

<h5>مساحة اعلانية</h5>

<div style="width:200px;font:bold 9pt HelveticaNeue">اهلا بك في مدونة كمبيوتر العرب للتبادل الاعلاني اضغط هنا</div>

</a>

<a href="http://arabs-c.blogspot.com">

<h5>مساحة الاعلانية</h5>

<div style="width:200px;font:bold 9pt HelveticaNeue;">اهلا بك في مدونة كمبيوتر العرب للتبادل الاعلاني اضغط هنا</div>

</a>

<a href="http://arabs-c.blogspot.com">

<h5>مساحة الاعلانية</h5>

<div style="width:200px;font:bold 9pt HelveticaNeue">اهلا بك في مدونة كمبيوتر العرب للتبادل الاعلاني اضغط هنا</div>

</a>

<a href="http://arabs-c.blogspot.com">

<h5>مساحة اعلانية</h5>

<div style="width:200px;font:bold 9pt HelveticaNeue">اهلا بك في مدونة كمبيوتر العرب للتبادل الاعلاني اضغط هنا</div>

</a></section>

&&إذا أعجبك الموضوع قم بمشاركته ولاتكن ممن يحتكر المعلومة&&