Thumbnail Σχετικές Post με το σχόλιό Hover Για Blogger

Σχετικά θέση είναι πιο χρήσιμο να κρατήσει 
τους επισκέπτες long.You σας ξέρετε πώς; Όταν οι 
επισκέπτες σας να τελειώσετε την ανάγνωση, τη θέση σας, 
θα πάρετε ένα παρόμοιο σύνδεσμο μήνυμα. Ως εκ τούτου 
οι περισσότεροι από είναι δύναμη για να διαβάσετε it.And εάν είστε 
χρησιμοποιήσετε κάποια επίδραση thumbnail με σχετικό μήνυμα. 
οι επισκέπτες θα περισσότερη δύναμη για να διαβάσετε άλλες σας 
μετά πάρα πολύ. Ελέγξτε την εικόνα για να δείτε αιωρείται αποτέλεσμα. 

1. Συνδεθείτε στο λογαριασμό blogger και Πηγαίνετε στο Σχεδιασμός >> Επεξεργασία HTML
    (βεβαιωθείτε ότι κάνετε backup το πρότυπό σας πρώτα) 2. Βάλτε ελέγχονται σημειώνονται με Expand Widget Πρότυπα 4. Βρείτε αυτό το tag χρησιμοποιώντας Ctrl + F ]]></b:skin> . 5 Επικόλληση παρακάτω κώδικα πριν ]]></b:skin> tag

/* Related Post Widget */

#related-posts{
float:left;
height:160px;
margin-bottom:10px; 
outline: 1px solid #fff;
border: 1px solid #ddd;
background: #f9fafb;
}

#related-posts h3{
    font-family: Francois One;
    font-size:20px;
    font-weight:400;
    color: #222222;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    margin-left: 0.5em;;
    padding-top: 0em;
}

#related-posts ul{
margin:5px;
width:613px;
padding-left:17px;
list-style:none;
display:block;
}
#related-posts ul li{
list-style:none;
position:relative;
float:left;
border:0 none;
margin-right:11px;
padding:2px;
width:86px;
}


#related-posts ul li:hover{z-index:100}
#related-posts ul li:hover img{border:3px solid #BBB}


#related-posts ul li:hover div{
font-size:7px;
text-transform:capitalize;
position:absolute;
top:20px;
left:-15px;
margin-left:0;
width:130px
}
#related-posts ul li img{
border:3px solid #DDD;
width:80px;
height:80px;
background:#FFF;
display:block;
}
#related-posts ul li div{
position:absolute;
z-index:99;
margin-left:-999em
}
#related-posts ul li .title{
text-align:center;
border:1px dotted #CCC;
background:#fff;
padding:5px 10px
}

6. Αναζήτηση σε αυτόν τον κώδικα και πάλι <data:post.body/> 

7. Επικόλληση παρακάτω κώδικα μετά την παραπάνω κώδικα

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Other Tutorials For You To See:</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

8.  Κάντε τώρα πρότυπο. τελειώσετε.