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

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

مرسلة بواسطة ma7moud 3lam يوم الأحد، 9 يونيو 2013 0 التعليقات

بسم الله الرحمن الرحيم

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

السلآم عليكم ورحمة الله وبركاته

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

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

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHI9Ql0TS9iR2H6kQWxlcEZiAnE6zu0358d5HobtT0t7jLrQ3lHruKYC3hU9H4YjmxmvYyspe3YM2JfwaZ7kKRqflshVM4JXFUXgf-MhwwnLhrbpu52-UzUOjiwVbiURCmvXgUpCK_ek/s1600/4-slide.png

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

ادخل مدونتك .
ثم التخطيط .
ثم اختر اداة جديده 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/AVvXsEiMjwtiWS1d0bpeYE134ZcGlzqobWqW4OFONcscFG_OOHYPTLQiMacds9yUVi29kXrMZ3wEi3jhPVYR0c4V7c1YwlN7TCOicxDgdiWCJZtGw1V9VrYdnOLmwH7FUUh1PCJCT-vw4QP3hqg/s1600/%D8%A8%D8%AF%D9%88%D9%86-%D8%B9%D9%86%D9%88%D8%A7%D9%86-1.gif" />
   <b>مدونة حلول بلوجر</b></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/AVvXsEiR1OeHnvyjCYkYej4EGl4nAIzUc_BfoX1IsqFOu-De5bExI5Y1bZCqHi_7uNDZP1fPPFLQi_AUqyoliDYaMGHhdWyQVXWSzwg1QTCK_NLA0a6tECoyTOwoaZVMbASGYHlBc6vEaptDRrQF/s1600/adschange_125-125.jpg" />
   <b>أعلن هنا</b></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/AVvXsEiR1OeHnvyjCYkYej4EGl4nAIzUc_BfoX1IsqFOu-De5bExI5Y1bZCqHi_7uNDZP1fPPFLQi_AUqyoliDYaMGHhdWyQVXWSzwg1QTCK_NLA0a6tECoyTOwoaZVMbASGYHlBc6vEaptDRrQF/s1600/adschange_125-125.jpg" />
   <b>أعلن هنا</b></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/AVvXsEiR1OeHnvyjCYkYej4EGl4nAIzUc_BfoX1IsqFOu-De5bExI5Y1bZCqHi_7uNDZP1fPPFLQi_AUqyoliDYaMGHhdWyQVXWSzwg1QTCK_NLA0a6tECoyTOwoaZVMbASGYHlBc6vEaptDRrQF/s1600/adschange_125-125.jpg" />
   <b>أعلن هنا</b></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/AVvXsEiR1OeHnvyjCYkYej4EGl4nAIzUc_BfoX1IsqFOu-De5bExI5Y1bZCqHi_7uNDZP1fPPFLQi_AUqyoliDYaMGHhdWyQVXWSzwg1QTCK_NLA0a6tECoyTOwoaZVMbASGYHlBc6vEaptDRrQF/s1600/adschange_125-125.jpg" />
   <b>أعلن هنا</b></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/AVvXsEiR1OeHnvyjCYkYej4EGl4nAIzUc_BfoX1IsqFOu-De5bExI5Y1bZCqHi_7uNDZP1fPPFLQi_AUqyoliDYaMGHhdWyQVXWSzwg1QTCK_NLA0a6tECoyTOwoaZVMbASGYHlBc6vEaptDRrQF/s1600/adschange_125-125.jpg" />
   <b>أعلن هنا</b></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/AVvXsEiR1OeHnvyjCYkYej4EGl4nAIzUc_BfoX1IsqFOu-De5bExI5Y1bZCqHi_7uNDZP1fPPFLQi_AUqyoliDYaMGHhdWyQVXWSzwg1QTCK_NLA0a6tECoyTOwoaZVMbASGYHlBc6vEaptDRrQF/s1600/adschange_125-125.jpg" />
   <b>أعلن هنا</b></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/AVvXsEiR1OeHnvyjCYkYej4EGl4nAIzUc_BfoX1IsqFOu-De5bExI5Y1bZCqHi_7uNDZP1fPPFLQi_AUqyoliDYaMGHhdWyQVXWSzwg1QTCK_NLA0a6tECoyTOwoaZVMbASGYHlBc6vEaptDRrQF/s1600/adschange_125-125.jpg" />
   <b>أعلن هنا</b></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/AVvXsEiR1OeHnvyjCYkYej4EGl4nAIzUc_BfoX1IsqFOu-De5bExI5Y1bZCqHi_7uNDZP1fPPFLQi_AUqyoliDYaMGHhdWyQVXWSzwg1QTCK_NLA0a6tECoyTOwoaZVMbASGYHlBc6vEaptDRrQF/s1600/adschange_125-125.jpg" />
   <b>أعلن هنا</b></a>
    </div>
</center>
<a href="http://ma7moud-3llam.blogspot.com/"></a>
للإعلان لدينا يرجى الإتصال بنا <br />

0 التعليقات:

إرسال تعليق