أضافة تأثير تكبير الصور عند تمرير الفارة عليها

السلام عليكم جميعا كيفكم

جأت لكم بتأثير رائع للصور سيعطي مدونتك شكلا فريدا 

لتطبيق هذا التاثير في مدونتك أتبع تلك الخطوات




أولاً:أذهب الى www.blogger.com ثم المظهر ثم تحرير html ثم اضغط على ctrl +f و أبحث عن هذا الكود  </head>

وفوق هذا الكود ضع 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[this.imagePreview = function(){ /* CONFIG */xOffset = 200; // distancia do topo //yOffset = 30; // distancia a esquerda //// estas duas variáveis determinam a distância popup a partir do cursor// se precisar ajuste para obter o resultado correto/* END CONFIG */$("a.preview").hover(function(e){this.t = this.title;this.title = "";var c = (this.t != "") ? "<br/>" + this.t : "";$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");$("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px").fadeIn("fast");},function(){this.title = this.t;$("#preview").remove();});$("a.preview").mousemove(function(e){$("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");});};$(document).ready(function(){imagePreview();});//]]></script>

ثانياً:أبحث عن هذا الكود ]]></b:skin> بالضغط على ctrl +f

وضع هذا الكود فوقه 

ul#imagepreview{margin:0;padding:0;}ul#imagepreview li {list-style:none;float:left;display:inline;margin-right:10px;}#preview{position:absolute;border:1px solid #ccc;  /*---Edite cor da borda---*/background:#000;   /*---Edite cor de fundo---*/padding:5px;display:none;color:#fff;   /*---Edite cor da fonte---*/}

ثالثاً: الآن سنذهب الى التخطيط ثم أضافة أداة ثم نختار html/javescript
ونضع هذا الكود بعد ذلك 

<ul id="imagepreview"><li><a href="رابط الصوره الكبيره" class="preview"><img src="رابط الصورة المصغره" width="200" height="200" alt="" /></a></li>  </ul>