إضافة خاصية التبادل الإعلاني بشكل جميل لمدونات البلوجر

السلام عليكم ورحمة الله ..
موضوعنا اليوم عن اضافة التبادل الاعلانى ولكن بشكل مطور وجذاب والوان جميلة وبتاثير (hover) ،



تركيب الاضافة :

توجه الى بلوجر >> ثم التخطيط >> ومن ثما اضافة اداة جديدة >> ثم 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(12, 106, 205, 0.95);
-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://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

<div class="adss" id="adsanime">
<a href="http://hi-tech-eg.blogspot.com" target="_blank">
<img src="https://hi-tech.googlecode.com/svn/photos/%D8%A7%D8%B9%D9%84%D9%86-%D9%87%D9%86%D8%A7.png" class="hoverZoomLink" />
<strong>اعلن هنا</strong></a>
</div>

</center>


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

عن الكاتب

مدون مغربي مهتم بعالم التقنيات وبكل مايتعلق بعالم الانترنيت ، خصوصا الاشياء المجانية . اضع كل ما هو مفيد للزوار.

2 التعليقات لموضوع "إضافة خاصية التبادل الإعلاني بشكل جميل لمدونات البلوجر"


الابتسامات الابتسامات

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
[-(
:-?
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
$-)
(y)
(f)
x-)
(k)
(h)
(c)
cheer