إضافة كود التبادل الاعلاني بشكل جميل و انيق للمدونة CSS3 !

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته

إضافة كود التبادل الاعلاني بشكل جميل للمدونة CSS3 :

إضافة كود إعلانات بطريقة مميزة ( CSS و HTML ) للتبادل الاعلاني
في هذه الإضافة تظهر بنرات الإعلانات بألوان باهته, و عند المرور فوقها بالماوس تأخد ألوانها الطبيعية مع ظهور تسمية البنر بطريقة مميزة .

طريقة التركيب : 

1. ادخل مدونتك .
2. ثم التخطيط .
3. ثم اختر اداة جديده HTML/JavaScript .
4. اخيرا انسخ الكود مع استبدال الروابط والصور بما يلزم .

<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-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}

 .adss img { 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://the6professional.blogspot.com/">

   <img src="http://www3.0zz0.com/2014/09/10/16/718816544.jpg" />

   <strong>مدونة مهووس التدوين</strong></a>

    </div>

<div class="adss" id="adsanime">

<a href="http://the6professional.blogspot.com/">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lngq4eLPuhS6cwGNiJIbQ_vHaQ9lUCqmDSHTz9iOii6aWyJM8_V-9hIz3b52P6adep0rQSATF_lTb0CuKckMoYTD7LUYM9sR1M2MzP758yMlCh1b9KLDqCkhVTcmL3Q-cNwJ6s3fveOR/s1600/adschange_125-125.jpg" />

   <strong>أعلن هنا</strong></a>

    </div>

<div class="adss" id="adsanime">

<a href="http://the6professional.blogspot.com/">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lngq4eLPuhS6cwGNiJIbQ_vHaQ9lUCqmDSHTz9iOii6aWyJM8_V-9hIz3b52P6adep0rQSATF_lTb0CuKckMoYTD7LUYM9sR1M2MzP758yMlCh1b9KLDqCkhVTcmL3Q-cNwJ6s3fveOR/s1600/adschange_125-125.jpg" />

   <strong>أعلن هنا</strong></a>

    </div>

<div class="adss" id="adsanime">

<a href="http://the6professional.blogspot.com/">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lngq4eLPuhS6cwGNiJIbQ_vHaQ9lUCqmDSHTz9iOii6aWyJM8_V-9hIz3b52P6adep0rQSATF_lTb0CuKckMoYTD7LUYM9sR1M2MzP758yMlCh1b9KLDqCkhVTcmL3Q-cNwJ6s3fveOR/s1600/adschange_125-125.jpg" />

   <strong>أعلن هنا</strong></a>

    </div>

<div class="adss" id="adsanime">

<a href="http://the6professional.blogspot.com/">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lngq4eLPuhS6cwGNiJIbQ_vHaQ9lUCqmDSHTz9iOii6aWyJM8_V-9hIz3b52P6adep0rQSATF_lTb0CuKckMoYTD7LUYM9sR1M2MzP758yMlCh1b9KLDqCkhVTcmL3Q-cNwJ6s3fveOR/s1600/adschange_125-125.jpg" />

   <strong>أعلن هنا</strong></a>

    </div>

<div class="adss" id="adsanime">

<a href="http://the6professional.blogspot.com/">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lngq4eLPuhS6cwGNiJIbQ_vHaQ9lUCqmDSHTz9iOii6aWyJM8_V-9hIz3b52P6adep0rQSATF_lTb0CuKckMoYTD7LUYM9sR1M2MzP758yMlCh1b9KLDqCkhVTcmL3Q-cNwJ6s3fveOR/s1600/adschange_125-125.jpg" />

   <strong>أعلن هنا</strong></a>

    </div>

<div class="adss" id="adsanime">

<a href="http://the6professional.blogspot.com/">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lngq4eLPuhS6cwGNiJIbQ_vHaQ9lUCqmDSHTz9iOii6aWyJM8_V-9hIz3b52P6adep0rQSATF_lTb0CuKckMoYTD7LUYM9sR1M2MzP758yMlCh1b9KLDqCkhVTcmL3Q-cNwJ6s3fveOR/s1600/adschange_125-125.jpg" />

   <strong>أعلن هنا</strong></a>

    </div>

<div class="adss" id="adsanime">

<a href="http://the6professional.blogspot.com/">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lngq4eLPuhS6cwGNiJIbQ_vHaQ9lUCqmDSHTz9iOii6aWyJM8_V-9hIz3b52P6adep0rQSATF_lTb0CuKckMoYTD7LUYM9sR1M2MzP758yMlCh1b9KLDqCkhVTcmL3Q-cNwJ6s3fveOR/s1600/adschange_125-125.jpg" />

   <strong>أعلن هنا</strong></a>

    </div>

<div class="adss" id="adsanime">

<a href="http://the6professional.blogspot.com/">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lngq4eLPuhS6cwGNiJIbQ_vHaQ9lUCqmDSHTz9iOii6aWyJM8_V-9hIz3b52P6adep0rQSATF_lTb0CuKckMoYTD7LUYM9sR1M2MzP758yMlCh1b9KLDqCkhVTcmL3Q-cNwJ6s3fveOR/s1600/adschange_125-125.jpg" />

   <strong>أعلن هنا</strong></a>

    </div>

</center>

<a href="http://the6professional.blogspot.com/"></a>