كيفية اضافة هذه القطعه الى مدونتك
1- انتقل إلى لوحة تحكم مدونتك2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي
]]></b:skin>
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; }
بعد ذلك إبحث عن هذا الكود :
</head>
و ألصق الكود التالي قبله :
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $undefineddocument).readyundefinedfunctionundefined){ //Larger thumbnail preview $undefined"ul.thumb li").hoverundefinedfunctionundefined) { $undefinedthis).cssundefined{'z-index' : '10'}); $undefinedthis).findundefined'img').addClassundefined"hover") .stopundefined) .animateundefined{ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , functionundefined) { $undefinedthis).cssundefined{'z-index' : '0'}); $undefinedthis).findundefined'img').removeClassundefined"hover") .stopundefined) .animateundefined{ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $undefined"ul.thumb li a").clickundefinedfunctionundefined) { var mainImage = $undefinedthis).attrundefined"href"); //Find Image Name $undefined"#main_view img").attrundefined{ src: mainImage }); }); });<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font> </script>
والآن قم بحفظ القالب
<ul class="thumb"><li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li><li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li><li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li><li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li></ul>
واخيرآ قم باستبدل ماباللون الازرق برابط صورة المعلن