معهد خبراء بلوجر - إضافة إعلانات بتأثيراتjQuery قمه في الروعه

الطريقه قديمه شويه بس جميله جدا
دي صوره من الاداه وطبعا انا مش بعلن عن اي مدونه فبعلن علي حسابي علي الفيسبوك:strongly:
http://www14.0zz0.com/2012/08/05/17/534864624.png

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم

كود بلغة HTML:

]]></b:skin>

>ثم قم بإضافة هذا الكود قبله مباشرة :

كود بلغة HTML:

ul.thumb { 

    float: left;

    list-style: none;

    margin: 0; padding: 10px;

    width: 360px;

    }

    ul.thumb li {

    margin: 0; padding: 5px;

    float: left;

    position: relative;

    width: 110px;

    height: 110px;

    }

    ul.thumb li img {

    width: 100px; height: 100px;

    -ms-interpolation-mode: bicubic;

    border: 1px solid #ddd;

    padding: 5px;

    background: #f0f0f0;

    position: absolute;

    left: 0; top: 0;

    }

    ul.thumb li img.hover {

    background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;  

    border: none;

    }

بعد ذلك إبحث عن هذا الكود :

كود بلغة HTML:

</head>

ثم ألصق الكود التالي قبله :

كود بلغة HTML:

<script src='http://code.jquery.com/jquery-latest.js'

type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){



//Larger thumbnail preview 



$(&quot;ul.thumb li&quot;).hover(function() { 

$(this).css({'z-index' : '10'});

$(this).find('img').addClass(&quot;hover&quot;)

.stop()

.animate({

marginTop: '-110px',

marginLeft: '-110px',

top: '50%',

left: '50%',

width: '174px',

height: '174px',

padding: '20px'

}, 200);



} , function() { 

$(this).css({'z-index' : '0'});

$(this).find('img').removeClass(&quot;hover&quot;)

.stop()

.animate({

marginTop: '0',

marginLeft: '0',

top: '0',

left: '0',

width: '100px',

height: '100px',

padding: '5px'

}, 400);

});



//Swap Image on Click 

$(&quot;ul.thumb li a&quot;).click(function() {



var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name 

$(&quot;#main_view img&quot;).attr({ src: mainImage });



}); 



});<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font> 

</script>

والآن قم بحفظ القالب

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :

كود بلغة HTML:

<ul class="thumb">

<li><a href="رابط المدونه المعلن عنها"><img src="http://www.cnbcarabia.com/wp-content/uploads/2012/07/facebook2-300x300.png" alt="" /></a></li>

<li><a href="رابط المدونه المعلن عنها"><img src="http://www.cnbcarabia.com/wp-content/uploads/2012/07/facebook2-300x300.png" alt="" /></a></li>

</ul>

لو عايز تغير الصوره هتغير طبعا اللينك ده

كود بلغة HTML:

http://www.cnbcarabia.com/wp-content/uploads/2012/07/facebook2-300x300.png

ولو اعلانين مش مكفيين ممكن تضيف اي عدد من الاعلانات بأضافه

كود بلغة HTML:

<li><a href="رابط المدونه المعلن عنها"><img  src="http://www.cnbcarabia.com/wp-content/uploads/2012/07/facebook2-300x300.png"  alt="" /></a></li>

قبل

كود بلغة HTML:

</ul>

ان شاء الله الموضوع يكون عجبكم