Hover Comment Link On Thumbnails Homepage
Enggak tahu ini namanya apa hehehee...saya sebut saja hover comment link atau hover link komentar di atas thumbnail homepage menyerupai pada gambar di sebelah ini. Scriptnya berasal dari Maskolis pada template Pakdhe Johny lalu saya modif dan diganti dengan link komentar atau jumlah komentar pada postingan tersebut.
Namun kalau Anda kreatif, script ini tidak hanya untuk blog yang memakai thumbnail di homepage-nya. Tinggal edit dan sesuaikan css-nya supaya sesuai dengan blog. Dan kali ini saya akan share cara membuatnya bagi Anda yang memakai thumbnail pada postingan di homepage-nya.
Demonya dapat Anda coba di homepage Kompi Ajaib, sorotkan mouse pada thumbnail postingannya.
Untuk mulai membuatnya silahkan copy instruksi 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj40RdjQCtgg8PoAdgEoU8HDFi6NiTgAzQ63m9fdSu9xnCrQYO09a7VbeqVPZeBnM_EYHAC9MsDjmzBjCSQail1yPLu6_CE6PSJrk4eA9HqO0fYxetrTPCKOKoKuwAch_PYVF_xfU2h1eAg/s1600/icon2.png);background-color:transparent;background-repeat:no-repeat;content:"";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 instruksi html untuk thumbnail postingan homepage di daerah <b:includable id='post' var='post'> biasanya berada di bawahnya dan tampak menyerupai instruksi di bawah ini, tapi jangan terpaku pada instruksi di bawah ini sebab kadang kala tiap template berbeda-beda untuk instruksi thumbnail homepagenya.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImMF0MYP_XmQ6iQO1Bggy6824VMTpXhnJJKzM07494xKKGpOBeF0JAlxIQ5J-4lAj03rTNnPfVrCJYNmB_aEZNmZcQuV5dM161lnQR4K0mnu6uZzIPurNzDsbAW0GE3fKxVPUNWKiIrM/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="Hover Comment Link On Thumbnails Homepage Hover Comment Link On Thumbnails Homepage" 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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>
</div>
</b:if></b:if> Kemudian apitkan instruksi di bawah ini ke instruksi 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 >= 2'><data:post.numComments/> comments</b:if></a>
</li>
</ul>
KODE THUMBNAIL DI ATAS
</div></div> <b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 >= 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImMF0MYP_XmQ6iQO1Bggy6824VMTpXhnJJKzM07494xKKGpOBeF0JAlxIQ5J-4lAj03rTNnPfVrCJYNmB_aEZNmZcQuV5dM161lnQR4K0mnu6uZzIPurNzDsbAW0GE3fKxVPUNWKiIrM/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="Hover Comment Link On Thumbnails Homepage Hover Comment Link On Thumbnails Homepage" 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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</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...
Sumber https://www.kompiajaib.com/
0 Response to "Hover Comment Link On Thumbnails Homepage"
Posting Komentar