Cum se face zoom deasupra pozei in Blogspot

Acest tutorial este realizat la cererea utilizatorului dommino1971 de pe site-ul MyExpert.ro
Tutorialul este despre cum se face zoom deasupa pozei in Blogspot / Blogger (zoom la mouseover, zoom la mouse hover).
Puteti vedea o demonstratie a acestui efect aici (pur si simplu plimbati mouse peste poza cu paunul).

Primul pas este sa intrati in contul Blogspot/Blogger si sa accesati categoria Layout. Apoi accesati optiunea Edit HTML si bifati Expand Widget Templates.

In casuta de editare a codului HTML trebuie sa cautati linia ]]></b:skin>
Exact inainte de acel rind, trebuie sa inserati codul de mai jos.
Dupa adaugare, apsati butonul Save Template.
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-8tUNMmf3Iv0AXmnDnWuK9J_wajRQ2JUi_HnXFwKFd7xCGs7zViw4N8OztxIGosxkwTBgM9NyN3tHXscXF-s0-Mk4qu-bqtpA0MLRZtXQm2zukdOsPBBWiRfSEyhcb6_U-yplTqLQqxeM/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Dupa aceea, in aceeasi fereastra de editare, trebuie sa cautati rindul </head>. De obicei este foarte aproape dupa rindul de mai sus.
Exact inainte de </head>, trebuie adaugat scriptul de mai jos. Din nou, dupa adaugare, apasati Save Template.

<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({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 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 });
return false;
});
});
</script>


In continuare, puteti sa adaugati o poza intr-un post (articol), dupa cum urmeaza: mergeti la New Post si adaugati textul urmator:
<ul class="thumb">
<li>
<a href="#">
<img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; DISPLAY: block; CURSOR: hand" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1kNjhhkYgQcd_YIevFMcHz8TOQMmhceT8LW88tFfaqQma9SSBcwN9dupWITDmXkKuDHT49I_fvvVaAjEUZlvh5BDkDhfcKbTRDNvMo7EGnrlkSsxtlkhkyqIxseRTWsZL_mZ57DMPw0/s320/DSC_0015.JPG" />
</a>
</li>
</ul>
Bineinteles ca trebuie sa puneti adresa spre poza dvs. (in loc de https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1kNjhhkYgQcd_YIevFMcHz8TOQMmhceT8LW88tFfaqQma9SSBcwN9dupWITDmXkKuDHT49I_fvvVaAjEUZlvh5BDkDhfcKbTRDNvMo7EGnrlkSsxtlkhkyqIxseRTWsZL_mZ57DMPw0/s320/DSC_0015.JPG)

Puteti vedea o demnstratie a acestui efect aici (pur si simplu plimbati mouse peste poza cu paunul).