Hover effect sur un Lire la suite automatique ?

[fxmartin]

Bonjour à tous,

je suis en train de coder un blogger avec le peu de connaissances HTML que j'ai et j'avoue ne pas réussir à résoudre ce petits soucis.

J'ai réussi à mettre en place un auto read more (Lire la suite) automatique généré par un script :

placé à la place de <dataost.body/> :

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

et placé avant le /head :

 <script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
[B]imgtag = '<span class="posts-thumb"; margin-right: 0px; margin-left: 0px"><a href="'+ pURL +'" title="'+ pTITLE+'"><p align="center"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></p></a></span>';[/B]
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Jusqu'ici ça fonctionne assez bien, j'ai changer pour placer l'image au centre et en plein format, jusqu'ici tout vas bien.

Mais après, j'ai trouvé un hover effect trouvé ici : [url]http://helplogger.blogspot.fr/2013/05/multi-hover-effect-on-blogger-images.html[/url], après quelques modifications ça donnera ce que je souhaite.

En théorie vous êtes censé placé le code (ci dessous) dans l'entête de l'article, ou pour le moins à l'image de l'article en rédigeant l'article.
<div class=multi-hover>
  <span>hover right</span>
  <span>hover top</span>
  <span>hover left</span>
  <span>hover bottom</span>
  <img src="URL de l'image">
</div>

Le problème c'est que le script de l'auto read more ne prends pas en compte l'effet. Donc je me suis dis qu'il fallait placer l'effet dans la partie du script que j'ai surligné en gras afin de l'appliquer à la division quelque part. Donc j'ai tenter d'insérer le code de cette manière : 

imgtag = '<span class="posts-thumb"; margin-right: 0px; margin-left: 0px"><a href="'+ pURL +'" title="'+ pTITLE+'">[B]<div class=multi-hover><span>hover right</span>[/B]<p align="center"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></p>[B]</div>[/B]</a></span>';

Mais aucun résultat...

Es ce que quelqu'un aurait une idée sur mon erreur ?

Merci par avance
-----