Hover Comment Link On Thumbnails Homepage

Hover Comment Link On Thumbnails Homepage

Bola Hero Gawai

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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

64 Comments Add Comment

Mas Saya Mau tanya Ini Juga Tentang Postingan mas ... masalahnya kenapa Post saya Tidak Bisa membuka Halaman (Page) /p/ mas

ini contohnya http://www.center60.com/p/blog-page_24.html
(isinya ngga keluar) kenapa ya mas ?

Balas

mas kompi, itu bisa langsung loncat ke comment-form ya?? punya saya kok ngga loncat ke comment form mas??
apa salah kode?

Balas

Jika telah menggunakan threaded koment hack, itu tidak bisa loncat ke comment form, ini sebenarnya untuk threaded comment biasa. :D
Saya belum sempat kutak-katik lagi kodenya :D

Balas

Wah saya udah ada mas hehe :)
Hatur nuhun tos berbagi ^_^

Balas

@Mas Febrianto, mungkin kode data post body untuk statis page-nya kehapus mas. Coba periksa kode ini

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

<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>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Nah kode <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if> ini yang mengatur halaman statis.

Balas

Keren Kang.. kalo di ditambah tombol share atau like facebook bisa nggak ya...

Balas

Hehehehe kalau udah ada jangan ditambah lagi biar ga double :D

Balas

oh pantes,saya juga ngga bisa loncat :p
kode agar bisa loncat gimana ya mas? :)

Balas

Kalau itu tinggal copy aja langsung dari templat Pakdhe Johny Dari Maskolis kang... posisinya sama seperti itu :D

Balas

scriptnya banyak emonya kang :)

Balas

Hehehe iya belum saya kasih pengecualian :D

Balas

Blog demonya sudah di hapus Si Mbah kang....

Balas

Langsung aja download templatenya kang :D

Balas

Saya coba periksa dulu ya mas

Balas

kenapa masih tetap ya mas ?

Balas

keren mas :) makasih udah berbagi :D kapan2 bisa dicoba :p

Balas

heheh ini dari pertanyaan saya ya? tankyu mas kompi

Balas

ternyata saya gabungkan kode ini malah ga berfungsi kode CSS nya

<li>
<a class='t-share' 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>


berarti harus saya gabungkan sama fb like baru bisa, kesel deh

Balas

Jika pakai kode CSS di atas, perhatikan class pada link komentnya.

Balas

Silahkan mas Nandar :D

Balas

Maaf saya salah tulis classnya :D

Balas

Sudah saya perbaiki :D

Balas

tuhh pan.. dishare juga akhirnya :)

Balas

Hehehehe muhun kang... :D biasa :D

Balas

Biar jadi tambah keren blog nya dipakai ini ^_^ tetapi rasanya untuk blog saya tidak cocok kang ^_^, hehehe :D

Balas

Lumayan banyak kodenya, :D
Kang atasi gambar pada GTMetrix gimana ya, supaya loading blog bisa tambah cepet.

Balas

Iya mas jangan maksain kalau memang tidak cocok :D

Balas

Usahakan gambar selalu gunakan dimensinya (height dan width), selalu menggunakan gambar yang dikompres dengan size sekecil mungkin (tapi tetap perhatikan kualitas gambarnya).

Balas

gak cocok gan buat blog saya,ditunggu gan tutorial selanjutnya,mau tanya gan ccara menambah gambar header blog lewat kode template gimana?

Balas

Coba di sini http://www.kompiajaib.com/2013/03/memanipulasi-title-blog-dengan-gambar-agar-terdetek-h1.html

Atau di sini http://www.kompiajaib.com/2013/06/membuat-logo-blog-bisa-diklik-dan-h1.html

Balas

kemarin sempat jugabikin kayak bginian, tapi hasil nya jelek.,
ane coba yang dari agan ini dlu deh gan.,

makasih ya tutor nya.,

Balas

mas adhy, css diatas sepertinya ada yang salah mas, gambar gak mau muncul lho

Balas

Sudah saya betulkan hehehe maaf sis :D coba lagi...

Balas

Sama2 mas Yogi :D Silahkan dicoba :)

Balas

ini seperti mirip sosial bookmark template pakdhe johny :D keren2 pak

Balas

ini seperti mirip sosial bookmark template pakdhe johny :D keren2 pak

Balas

Memang ini scriptnya dari sana mas, hanya modif dikit aja heheheh :D

Balas

Keren-keren mas, dengan mengedit-editnya jadilah sseperti ini :D

Balas

Iya mas jika kita kreatif bisa menjadi sesuatu yang lain :D

Balas

nah kalau untuk yang ini biar saya yang berikan julukannya mas Andi..
yaitu SUPER HOVER IMAGE :-d :-d

Balas

Heheheehe...makasih julukannya mas Imron... :D
Maaf mas untuk postingannya hari ini saya komen di sini aja ya...
Saya udah baca postingannya tapi ga berani komen hehehee takut salah bicara :)
Yang jelas semoga permasalahannya cepat selesai... untuk kebaikan di kedua belah pihak dan untuk kita semua.

Balas

tuh kan, padahal saya kutak katik kok ga muncul gambarnya, setelah saya teliti kembali ternyata ada kode css yang salah.. hampir satu jam mas saya edit, hhuhuhu.. oh ya mas kompi, mohon ke blog saya bentar dan lihat apakah blog saya ada makin berat dan jika di scoll ke bawah apakah ada lelet gitu. :)

Balas

Memang kalau dibandingin sama sebelumnya, skrg agak lama dikit (saya pakai smartfren yg kuotanya udah kembang kempis hhehehe).
Tapi itu sepertinya saya bilang masih termasuk ringan untuk blog yang pakai slider dan banyak gambar.

Balas

Lumayan banyak juga ya mas script nya. Saya kalau berhadapan sama script, Css dan kawan-kawan malah pusing sendiri hehe :D Tapi boleh juga nich dicoba trik nya untuk modifikasi kotak komentar blogger. Biar lebih keren ya mas :) Thanks master atas ilmunya :)

Balas

Tekniknya boleh juga nih saya terapkan. Tak ngopi code-codenya dulu sob.

Balas

hehhe terima kasih deh

Huhuhuh iklan nya buat pusing mas, semuanya peralatan cewek, gak berani liat deh,

Balas

Itu karena font-nya agak besar jadi kelihatan banyak kodenya :D
Hehheeeehe...saya bukan master mbak, masih harus banyak belajar :D
Makasih apresiasinya...silahkan dicoba saja..

Balas

silahkan mas dicoba aja...semoga bisa berguna... :D

Balas

Hehehehe..iya, padahal udah setting tag-nya tapi munculnya lain... :D Mungkin blm banyak iklan yang sesuai tag yang saya tulis.

Balas

makasih kang kompi, kebetulan di home page saya juga pake thumbnail, tapi lagi ga mood ngoprek2 jadi saya bungkus dulu kang

oya kang bisa ga bantu saya kang, bikin satu border tapi warna-warni, makasih kang

Balas

Saya udah baca komentarnya di kang Ismet dan udah dijawab sama kang Ismet mas :D

Balas

ngeri kali kang kodenya :D
saya juga bingung kang , itu nama judulnya disebut pas kayanya kurang, disebut kurang terus apalagi namanya :D

Balas

okelah tak meluncur kesana kang...haturnuhun

Balas

sip om, tapi ane masih mau pake WP, yg blogspot tak parkir du :D

Balas

Hehehee...iya apa lagi namanya ya :D

Balas

Itu mah tergantung kesenangan masing-masing mas Opex :D

Balas

kayaknya gak cocok di blog saya gan,, tapi buat tambah pengalaman hehehehe..

coba lihat template darkred dari mkr gan. agak mirip cuma lebih banyak aja(dulu saya pke template itu) mungkin bisa jadi refrensi karena saya lihat agan hobi bongkar muat

Balas

Kalau itu mah ga usah dimodif lagi mas, udah keren hehehee, saya juga sering nemuin yang pakai ikon (i) ya? Bingung mau dimodif gimana lagi hehehehe :D

Balas

iya gan yang pke icon (i) :D
ahli design grafis kok bingung wkakakaka...

Balas

tambahin lagi tag kondisionalnya

Balas

Gk Cocok Gan Template Saya
:(

Balas

Soalnya itu sudah bagus mas hehehee :D

Balas

Jika ga cocok ga usah pakai mas hehhehe nanti malah jadi bikin kurang bagus :)

Balas

Saya sudah coba dan ternyata berhasil, untuk yang menggunakan threaded comment hack pasti hash untuk comment-form ga jalan. nah untuk mengatasinya silahkan tambahkan id='comment-form' pada kode <div class='comment-form'> jadinya seperti ini <div class='comment-form' id='comment-form'>

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×