اضافة التبادل الاعلانى بشكل جديد ورائع لمدونات بلوجر شكل جديد و منزلق

اضافة التبادل الاعلانى بشكل جديد ورائع لمدونات بلوجر

موضوعنا اليوم عن اضافة التبادل الاعلانى ولكن بشكل مطور وجذاب والوان جميلة وبتاثير (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://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://http://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://http://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://http://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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://http://ahmedmohmed45.blogspot.com/2014/08/blog-post_37.html" 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>

اذا كانت الخطوات السابقة غير مفهومة بالنسبة لك او حدث خطأ ما حمل من الرابط التالى لاضافة الكود

Posted in: