الجمعة، 25 يوليو 2014

إضافة صندوق التبادل الإعلاني بتقنية css لمدونة بلوجر

بقلم: BR MED يوم الجمعة، 25 يوليو 2014 القسم : 3 التعليقات
السلام عليكم و رحمة الله و بركاته
مرحبا بكم متتابعي ورشة مدون الأوفياء كما عهدنا دائما اليوم موضوعنا هي إضافة صندوق التبادل الإعلاني بشكل رائع و إحترافي بتقنية  CSS  بشكل انيق جدا وعصري إلى مدونات بلوجر مع تأثيرات رائعة على الصور بخلفيات ملونه بعدة الوان يمكنك تنسيقها والتحكم بها عن طريق تغيير CSS و HTML وفقا للحاجة الخاصة بك وينصح إستخدام بانر بحجم 125x125 فبهذا الحجم ستظهر الإضافة بكل جمالية وأناقة.
انتقل إلى لوح تحكم مدونتك،
     إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
     والآن الصق داخل المستطيل الكود التالي :

 <!--Advertisement Banners By warch-mo.blogspot.com-->
<style>
.FoulsCode-Ads ul{
list-style-type:none;
margin: 0px auto;
padding: 10px 0px 10px 0px;
overflow:hidden;
}
.FoulsCode-Ads ul li{
list-style-type:none;
margin: 0px 5px 10px 5px;
float:left;
display:inline;
background:orange;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
border-radius:100%;
-webkit-border-radius:100%;
-moz-border-radius:100%;
-o-border-radius:100%;
}
.FoulsCode-Ads ul li:hover {
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
-o-border-radius:15%;
-webkit-border-radius:15%;
-moz-border-radius:15%;
border-radius:15%;
}
.FoulsCode-Ads ul li:active {
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-o-border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
.FoulsCode-Ads ul li a img{
-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);
box-shadow:0 0 8px rgba(0,0,0,0.5);
padding:3px;
}
</style>
<div class="FoulsCode-Ads">
<ul>
<li style="background:#e42b2b !important;">
<a href="رابط المعلن الاول" rel="nofollow">
<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloTu2x3BSiDR_ZuyfcNzi2pt2_IgQRyNHI-640tNfzjNLEwEGUaYWqYCdTWQAT43YejnvdjBZ1F23VjEGL-JC2A15qBPhhjvKcK2TGRWtgfjzSPYDLC_DioP3VuGixxNNrxFEdRm1Mcc/s1600/728x90.png" title=" width="118" />
</a></li>
<li style="background:#FFE500 !important;">
<a href="رابط المعلن الثاني" rel="nofollow">
<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloTu2x3BSiDR_ZuyfcNzi2pt2_IgQRyNHI-640tNfzjNLEwEGUaYWqYCdTWQAT43YejnvdjBZ1F23VjEGL-JC2A15qBPhhjvKcK2TGRWtgfjzSPYDLC_DioP3VuGixxNNrxFEdRm1Mcc/s1600/728x90.png" title=" width="118" />
</a></li>
<li style="background:#a800ff !important;">
<a href="رابط المعلن الثالث" rel="nofollow">
<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloTu2x3BSiDR_ZuyfcNzi2pt2_IgQRyNHI-640tNfzjNLEwEGUaYWqYCdTWQAT43YejnvdjBZ1F23VjEGL-JC2A15qBPhhjvKcK2TGRWtgfjzSPYDLC_DioP3VuGixxNNrxFEdRm1Mcc/s1600/728x90.png" title=" width="118" />
</a></li>
<li style="background:#41d05f !important;">
<a href=" رابط المعلن الرابع " rel="nofollow">
<img height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloTu2x3BSiDR_ZuyfcNzi2pt2_IgQRyNHI-640tNfzjNLEwEGUaYWqYCdTWQAT43YejnvdjBZ1F23VjEGL-JC2A15qBPhhjvKcK2TGRWtgfjzSPYDLC_DioP3VuGixxNNrxFEdRm1Mcc/s1600/728x90.png" title=" width="118" />
</a></li>
</ul>
</div>
<!--Advertisement Banners By warch-mo.blogspot.com-->
لاتنسى تغير رابط المعلن و الرابط الأزرق بما يناسبك’
تم قم بحفظ التغيرات و مبروك عليك الإضافة
دمتم بود في أمان الله

هناك 3 تعليقات:

  1. الردود
    1. شكرا على التنبيه أخي الكريم =s
      لقد تم إصلاح المشكل شاهد المعاينة
      http://test-add-blog.blogspot.com/

      حذف

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r