إعلانات في السايد بار بطريقة مميزة ( CSS و HTML )

السلام عليكم
اليوم أريد أن أقدم لكم كود خاص بإعلانات في السايد بار بطريقة مميزة و سهلة الإضافة , سأضع إن شاء الله الطريقة الخاصة بمدونات ووردبريس و مدونات بلوجر.
في هده الإضافة تظهر بنرات الإعلانات بألوان باهته يمكنكم مشاهدة السايد بار في مدونتي على الوورد بريس, و عند المرور فوقها بالماوس تأخد ألوانها الطبيعية مع ظهور تسمية البنر بطريقة مميزة .

• إليكم الكود الخاص بمدونة وورد بريس :

هدا الكود يتم وضعه في مكان المراد ظهور الإعلان فيه

/*-- Ads Anass 75 X 75 px sidebar------------*/�
<ul class='social' id='cssanime'>

  <li class='Anassads1'>
   <a href="رابط الموقع">
   <img src="رابط البنر" />
   <strong>العنوان</strong></a>
  </li>

  <li class='Anassads2'>
 <a href="رابط الموقع">
 <img src="رابط البنر" />
 <strong>العنوان</strong></a>
  </li>

  <li class='Anassads3'>
   <a href="رابط الموقع">
   <img src="رابط البنر" />
   <strong>العنوان</strong></a>
  </li>

  <li class='Anassads4'>
   <a href="رابط الموقع">
   <img src="رابط البنر" />
   <strong>العنوان</strong></a>
  </li>

  <li class='Anassads5'>
   <a href="رابط الموقع">
   <img src="رابط البنر " />
    <strong>العنوان</strong></a>
  </li>

  <li class='Anassads6'>
   <a href="رابط الموقع">
   <img src="رابط البنر" />
   <strong>العنوان</strong></a>
  </li>

  <li class='Anassads7'>
   <a href="رابط الموقع">
   <img src="رابط البنر" />
   <strong>العنوان</strong></a>
  </li>

  <li class='Anassads8'>
   <a href="رابط الموقع">
   <img src="رابط البنر" />
   <strong>العنوان</strong></a>
  </li>

  <li class='Anassads9'>
   <a href="رابط الموقع">
   <img src="رابط البنر" />
   <strong>العنوان</strong></a>
  </li>
</ul>
/*-- end Ads Anass 75 X 75 px sidebar------------*/

العنوان هو التسمية الخاصة بالبنر التي ستضهر عند مرور الماوس على البنرو هدا الكود في ملف الستايل styles.css

/*-- Ads Anass 75 X 75 px sidebar------------*/
 ul.social {
    list-style:none;
     margin-top:5px auto;
      margin: 0 15px 5px 15px;
       display:inline-block;
        text-align: center; }
 ul.social li {
    display:inline;
  float:right;
   background-repeat:no-repeat; }
 ul.social li a {
   display:block;
   width:75px;
    height:75px;
     padding-right:10px;
      padding-top: 5px;
      position:relative;
       text-decoration:none; }
 ul.social li 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);}

 ul.social li img { max-height: 75px; max-width: 75px; }

 #cssanime:hover li { opacity:0.2; }
 #cssanime li a strong { -webkit-transition-property: opacity;
  -webkit-transition-duration: 500ms;
  -moz-transition-property: opacity;
  -moz-transition-duration: 500ms; }
 #cssanime li a strong { opacity:0;
  -webkit-transition-property: opacity, top;
  -webkit-transition-duration: 300ms;
   -moz-transition-property: opacity, top;
   -moz-transition-duration: 300ms; }
 #cssanime li  { opacity:0.5;
  -webkit-transition-property: opacity, top;
   -webkit-transition-duration: 300ms;
    -moz-transition-property: opacity, top;
     -moz-transition-duration: 300ms; }
 #cssanime li:hover { opacity:1; }
 #cssanime li:hover a strong { opacity:1; top:-10px; }
/*-------end code Ads Anass--------------------------*/

• إليكم الكود الخاص بمدونة بلوجر :

  يتم وضع الكود في المكان المراد ضهور الإعلانات فيه

<style type="text/css">
/*-- Ads Anass 75 X 75 px sidebar------------*/
 ul.social {
    list-style:none;
     margin-top:5px auto;
      margin: 0 15px 5px 15px;
       display:inline-block;
        text-align: center; }
 ul.social li {
    display:inline;
  float:right;
   background-repeat:no-repeat; }
 ul.social li a {
   display:block;
   width:75px;
    height:75px;
     padding-right:10px;
      padding-top: 5px;
      position:relative;
       text-decoration:none; }
 ul.social li 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);}

 ul.social li img { max-height: 75px; max-width: 75px; }

 #cssanime:hover li { opacity:0.2; }
 #cssanime li a strong { -webkit-transition-property: opacity;
  -webkit-transition-duration: 500ms;
  -moz-transition-property: opacity;
  -moz-transition-duration: 500ms; }
 #cssanime li a strong { opacity:0;
  -webkit-transition-property: opacity, top;
  -webkit-transition-duration: 300ms;
   -moz-transition-property: opacity, top;
   -moz-transition-duration: 300ms; }
 #cssanime li  { opacity:0.5;
  -webkit-transition-property: opacity, top;
   -webkit-transition-duration: 300ms;
    -moz-transition-property: opacity, top;
     -moz-transition-duration: 300ms; }
 #cssanime li:hover { opacity:1; }
 #cssanime li:hover a strong { opacity:1; top:-10px; }
/*-------end code Ads Anass--------------------------*/
</style>

<ul class='socialx' id='cssanime'>

<li class='Anassads1'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

<li class='Anassads2'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

<li class='Anassads3'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

<li class='Anassads4'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

<li class='Anassads5'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

<li class='Anassads6'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

<li class='Anassads7'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

<li class='Anassads8'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

<li class='Anassads9'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

</ul>

يمكنكم زيادة عدد البنرات بزيادة هدا الكود مع تغيير الرقم 9 الى 10 ... 11 ...

<li class='Anassads9'>
<a href="رابط الموقع">
<img src="رابط البنر" />
<strong>العنوان</strong></a>
</li>

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