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

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

حبيت ان أقدم لكم كود التبادل الإعلانى البنرى لان الكثير طلبوه منى عبر البريد مع العلم إنه "متوفر" على الإنترنت ولكن حبيت ان أضعه لكم كود إحترافى وراح يعجبكم مثل الموجود حالياً فى مدونة كلوب اوب وهو ليس من تصميمنا .
الكود تركيبة سهل للغاية ستضع الكود التالى فى اداة جافاسكريبت
طريقة التركيب : 
  • ادخل مدونتك .
  • ثم التخطيط .
  • ثم اختر اداة جديده 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:120px; 
height:120px; 
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-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
 .adss img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; 
max-height: 120px; 
max-width: 120px; 
}
 #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="هنا ضع رابط الموقع">
   <img src="هنا ضع رابط الصورة" />
   <b>PsyBoys Security</b></a>
    </div>
<div class="adss" id="adsanime">
<a href="هنا ضع رابط الموقع">
   <img src="هنا ضع رابط الصورة" />
   <b>أعلن هنا</b></a>
    </div>
<div class="adss" id="adsanime">
<a href="هنا ضع رابط الموقع">
   <img src="هنا ضع رابط الصورة" />
   <b>أعلن هنا</b></a>
    </div>
<div class="adss" id="adsanime">
<a href="هنا ضع رابط الموقع">
   <img src="هنا ضع رابط الصورة" />
   <b>أعلن هنا</b></a>
    </div>
</center>



أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

0 commentaires:

إرسال تعليق

Twitter Delicious Facebook Digg Stumbleupon Favorites More