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

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

بسم الله الرحمن الرحيم 
والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله وصحبة افضل الصلآة واتم التسليم 
السلآم عليكم ورحمة الله وبركاته 

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

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



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



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

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



كود:
<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://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNDrT1i8lBCVCRzTbjukEqYpZIAjBeNCJK2NaBL_Aao7hhpoloSks5xgJYFpVD5PI5_Oq14lETp3dB42ZE1XmF5BcRUgAzjADTCsvU33CWDQtiMrqe7oXZFPFbR8OerMDpiJ7p7FJgzw/s1600/%D8%A8%D8%AF%D9%88%D9%86-%D8%B9%D9%86%D9%88%D8%A7%D9%86-1.gif" />
   <strong>مدونة حلول بلوجر</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6kjnXFpZexstUf1fjiP-_0KsZOqD0Mv6mMfQy3Ws7csy66olrCt_kDSjt0xGd3n790WCYRaLGQdp97eLj5ekEGCqloOhvmXdOyUbXXT_n6gYbNkYhtiDDgKidm-I7Emw7iO1NSGCVCN4/s1600/adschange_125-125.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6kjnXFpZexstUf1fjiP-_0KsZOqD0Mv6mMfQy3Ws7csy66olrCt_kDSjt0xGd3n790WCYRaLGQdp97eLj5ekEGCqloOhvmXdOyUbXXT_n6gYbNkYhtiDDgKidm-I7Emw7iO1NSGCVCN4/s1600/adschange_125-125.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6kjnXFpZexstUf1fjiP-_0KsZOqD0Mv6mMfQy3Ws7csy66olrCt_kDSjt0xGd3n790WCYRaLGQdp97eLj5ekEGCqloOhvmXdOyUbXXT_n6gYbNkYhtiDDgKidm-I7Emw7iO1NSGCVCN4/s1600/adschange_125-125.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6kjnXFpZexstUf1fjiP-_0KsZOqD0Mv6mMfQy3Ws7csy66olrCt_kDSjt0xGd3n790WCYRaLGQdp97eLj5ekEGCqloOhvmXdOyUbXXT_n6gYbNkYhtiDDgKidm-I7Emw7iO1NSGCVCN4/s1600/adschange_125-125.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6kjnXFpZexstUf1fjiP-_0KsZOqD0Mv6mMfQy3Ws7csy66olrCt_kDSjt0xGd3n790WCYRaLGQdp97eLj5ekEGCqloOhvmXdOyUbXXT_n6gYbNkYhtiDDgKidm-I7Emw7iO1NSGCVCN4/s1600/adschange_125-125.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6kjnXFpZexstUf1fjiP-_0KsZOqD0Mv6mMfQy3Ws7csy66olrCt_kDSjt0xGd3n790WCYRaLGQdp97eLj5ekEGCqloOhvmXdOyUbXXT_n6gYbNkYhtiDDgKidm-I7Emw7iO1NSGCVCN4/s1600/adschange_125-125.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6kjnXFpZexstUf1fjiP-_0KsZOqD0Mv6mMfQy3Ws7csy66olrCt_kDSjt0xGd3n790WCYRaLGQdp97eLj5ekEGCqloOhvmXdOyUbXXT_n6gYbNkYhtiDDgKidm-I7Emw7iO1NSGCVCN4/s1600/adschange_125-125.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://7loll.blogspot.com/2013/01/blog-post_26.html">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6kjnXFpZexstUf1fjiP-_0KsZOqD0Mv6mMfQy3Ws7csy66olrCt_kDSjt0xGd3n790WCYRaLGQdp97eLj5ekEGCqloOhvmXdOyUbXXT_n6gYbNkYhtiDDgKidm-I7Emw7iO1NSGCVCN4/s1600/adschange_125-125.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
</center>
<a href="http://www.7loll.blogger.com/"></a>
للإعلان هنا يرجى الإتصال بنا <br />


0 commentaires:

إرسال تعليق