Hover Comment Link On Thumbnails Homepage

Hover Comment Link
Enggak tahu ini namanya apa hehehee...saya sebut saja hover comment link atau hover link komentar di atas thumbnail homepage seperti pada gambar di sebelah ini. Scriptnya berasal dari Maskolis pada template Pakdhe Johny kemudian saya modif dan diganti dengan link komentar atau jumlah komentar pada postingan tersebut.

Namun jika Anda kreatif, script ini tidak hanya untuk blog yang menggunakan thumbnail di homepage-nya. Tinggal edit dan sesuaikan css-nya agar sesuai dengan blog. Dan kali ini saya akan share cara membuatnya bagi Anda yang menggunakan thumbnail pada postingan di homepage-nya.

Demonya bisa Anda coba di homepage Kompi Ajaib, sorotkan mouse pada thumbnail postingannya.

Untuk mulai membuatnya silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>
.comm_on{background-clip:padding-box;box-shadow:0 14px 2px -10px #CCC;cursor:pointer;display:inline-block;vertical-align:top;width:100%;margin:0 11px 30px 0;padding:0}
.comm_on .none-efect{border:none;position:relative;margin:0;padding:0}
ul.comm_onpanjang{clear:both;float:left;list-style:none outside none;position:absolute;z-index:10;margin:0;padding:5px 0 0 5px}
ul.comm_onpanjang li{transition:opacity 300ms ease 0;margin-bottom:10px;opacity:0}
.comm_on:hover .comm_onpanjang li{opacity:1}
ul.comm_onpanjang li a:before{transition:all 300ms ease-out 100ms;background-image:url(http://2.bp.blogspot.com/-vzZEPABNC_8/UkQyWH0G3EI/AAAAAAAAaCw/eIG3eOiaynQ/s1600/icon2.png);background-color:transparent;background-repeat:no-repeat;content:&quot;&quot;;display:inline-block;height:25px;position:absolute;width:25px}
ul.comm_onpanjang li a.icomm{color:#464646}
ul.comm_onpanjang li a.icomm:hover:before{background-position:2px -48px}
ul.comm_onpanjang li a.icomm:before{background-position:2px 0;left:2px;top:2px}
ul.comm_onpanjang li a{transition:width 300ms ease-out 100ms;background-clip:padding-box;background-color:#fff;background-repeat:no-repeat;border-radius:4px;display:block;opacity:0.6;overflow:hidden;text-align:left;text-transform:uppercase;white-space:nowrap;width:0;position:relative;margin:3px;padding:7px 0 6px 33px}
ul.comm_onpanjang li a:hover{width:100px;opacity:1}
ul.comm_onpanjang li a{display:block;font-weight:700;vertical-align:baseline}
Kemudian cari kode html untuk thumbnail postingan homepage di daerah <b:includable id='post' var='post'> biasanya berada di bawahnya dan tampak seperti kode di bawah ini, tapi jangan terpaku pada kode di bawah ini karena kadang-kadang tiap template berbeda-beda untuk kode thumbnail homepagenya.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='cutter'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=200;
var show_default_thumbnail=true;
var default_thumbnail="http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'" width="'+image_size+'" height="'+image_size+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url' expr:title='data:post.title'><script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>
</div>
</b:if></b:if>
Kemudian apitkan kode di bawah ini ke kode tersebut.
<div class='comm_on'>
<div class='none-efect'>
<ul class='comm_onpanjang'>
        <li>
<a class='icomm' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a>
</li>
</ul>
KODE THUMBNAIL DI ATAS
</div></div>
Sehingga penampakannya akan seperti di bawah ini.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='cutter'>
<div class='comm_on'>
<div class='none-efect'>
<ul class='comm_onpanjang'>
        <li>
<a class='icomm' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a> 
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=200;
var show_default_thumbnail=true;
var default_thumbnail="http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'" width="'+image_size+'" height="'+image_size+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url' expr:title='data:post.title'><script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>
</div></div></div>
</b:if></b:if>
Kemudian coba pada pratinjau apakah sudah muncul pada thumbnail postingan. Jika sudah OK tinggal SAVE templatenya.

Selesai... Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments