Wednesday, July 31, 2013

Tooltip Sederhana on Related Post


 



Pada Postingan ini saya kana share mengenai tooltip on related post mungkin agan sudah tau maksudnya yaitu memberi efek tooltip pada related post untuk penggunaannya sebagai berikut..

Masuk blog agan
pilih menu template
kemudian cari kode  ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian
setelah ketemu letakan kode dibawah ini tepat diatasnya

/* EMP-BLOG Related Posts --- */
        .related-post .post-thumbnail {
        z-index: 1;
        position: relative;
        width: 98px;
        height: 98px;
        margin: 0;
        display: block;
        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: inset 2px 2px 5px #444;
        -moz-box-shadow: inset 2px 2px 5px #444;
        box-shadow: inset 2px 2px 5px #555;
        }
        .related-post {
        float: left;
        position: relative;
        width: 98px;
        height: 98px;
        margin: 0 10px 10px 0;
        background: #333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        }
        .related-post .related-post-title {
        display: none;
        float: left;
        background: #000;
        color: #fff;
        text-shadow: none;
        font-weight: bold;
        padding: 10px;
        position: absolute;
        top: -75px;
        left: 40px;
        z-index: 2;
        width: 200px;
        -webkit-box-shadow: 0 0 2px #444;
        -moz-box-shadow: 0 0 2px #444;
        box-shadow: 0 0 2px #444;
        }
        .related-post:hover .related-post-title {display: block;}

Selanjutnya paste kode dibawah ini dimana anda ingin menempatkan related postnya
misalnya agan ingin menempatkan dibawah postingan maka cari kode <data:post.body/>
kemudian paste kode dibawah ini tepat diatasnya

<div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=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;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=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){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.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+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';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>
    </b:if>
    </div>
    <div class='clear'/>

untuk penyusuaiannya silahkan di edit lagi kode yang diatas  ]]></b:skin> sesuaikan dengan tampilan blog agan,selamat mencoba semoga bermanfaat...

0 comments:

Post a Comment