.post-thumbnail{float:left;margin-right:20px}
Pasang Iklan Anda

Sunday, September 22, 2013
Membuat Recent Comments Fantastik


Kesempatan yang cukup luang ini saya akan mencoba membagikan triks Blogger yang lain, yang sebelumnya Cara Membuat Menu Navigasi Simpel. Kali ini mengenai Recent Comments. Tentunya Anda sudah cukup tau apa itu Recent Comments. Kemudian yang saya share ini saya beri nama Membuat Recent Comments Fantastik. Mengapa Fantastik ? Ya, alasannya cukup simpel, yaitu pada efeknya. Penasaran dengan efeknya ? Bisa Anda cek melalui tombol ilustrasi.

Berikut kode CSS
.muncul { position:relative; width:500px; height:195px; margin:20px auto; z-index:1; box-shadow:0 2px 10px rgba(0,0,0,0.3); }
.muncul p { color:black; text-align:center; margin:0; }
.slide_in { overflow:hidden; }
.slide_in .left_gate { background:#0F83A0; opacity:0.6; }
.slide_in .right_gate { background:#0F83A0; opacity:0.6; }
.left_gate { position:absolute; background:#AD3000; bottom:0; right:50%; left:0; top:0; transition:all 0.7s ease-out; }
.muncul:hover .left_gate { right:100%; left:-50%; opacity:0.1; }
.right_gate { position:absolute; bottom:0; left:50%; right:0; top:0; transition:all 0.7s ease-out; }
.muncul:hover .right_gate { left:100%; right:-50%; opacity:0.1; }
#komentar { padding:5px; background:#0F83A0; clear:both; }
#komentar ul { list-style-type:none; margin:0; padding:0; font:normal 13px/20px Segoe UI,sans-serif; background:#ddd; clear:both; }
#komentar ul li { list-style-type:none; padding:10px; background:linear-gradient(#ddd,#eee); border-bottom:1px solid #d4d4d4; margin:0 0 1px 0; transition:all .2s linear 0s; }
#komentar .isi { color:#333; }
#komentar .gambar { overflow:hidden; display:block; border:2px solid #AD3000; width:40px; height:40px; float:left; margin:0 10px 0 0; }
#komentar .gambar.admin { opacity:0.4; transition:all .3s linear 0s; }
#komentar .gambar.admin:hover { opacity:2; transition:all .3s linear 0s; }
#komentar .gambar img { width:100%; height:100%; }
#komentar a { color:blue; text-decoration:none; }
#komentar a:visited { color:#24B035; }

Lalu, berikut kode HTML
<div class="muncul slide_in">
<div class="left_gate"></div>
<div class="right_gate"></div>
<p><script type="text/javascript">
//<![CDATA[
//Jumlah komentar yang tampil
var jmlkomentar = 3,
//Jumlah karakter judul
  jmlkarakter = 38,
//ubah dengan URL blog anda
  home_page = "http://mas-jin.blogspot.com",
//Mengubah ukuran thumbnail gambar menjadi 40
  lebargambar = 40,
  blank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCmvWXYBJEQpCM0cZPtRluy6w49RAphKD9qQ23UJ9Fri4T90d3DC3aPPmNrh0P7Sw0IWG4z7lBJBZuY-_MFv1p6liMaq-NIgd-unNbEmpx0cUP56bUhaNDXJ72KhZzF7NY7nq6Lme7VHI/s1600/Anonim20.jpg";

function tampilkankomentar(json) {
  document.write('<div id="komentar"><ul>');
  var entry, urlkomentar, isikomentar, lihatkomentar;
  for (var i = 0; i < jmlkomentar; i++) {
    entry = json.feed.entry[i];
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        urlkomentar = entry.link[k].href;
        break
      }
    }
    document.write('<li>');
    var judul = urlkomentar.replace(/-/g, " ").substring(urlkomentar.lastIndexOf('/') + 1, urlkomentar.lastIndexOf('.')),
      urlgambar = entry.author[0].gd$image.src.replace(/\/s(220|512)/, "\/s" + lebargambar);
    if (judul.length > jmlkarakter) {
      judul = judul.substring(0, jmlkarakter) + "..";
    }
    if (entry.author[0].name.$t == "Fajrin Ilham H") {
      document.write('<span class="gambar admin"><img src="' + urlgambar + '"/></span>');
    } else if (entry.author[0].gd$image.src == "http://img1.blogblog.com/img/openid16-rounded.gif") {
      document.write('<span class="gambar"><img src="' + blank + '"/></span>');
    } else {
      document.write('<span class="gambar"><img src="' + urlgambar + '"/></span>');
    }
    document.write('<a rel="nofollow" href="' + urlkomentar + '" target="_blank">' + entry.author[0].name.$t + '</a> -');
    document.write(' <span class="isi">Posting :</span><br/>' + judul);
    document.write('</li>');
  }
  document.write('</ul></div>');
}
document.write('<scr' + 'ipt src="' + home_page + '/feeds/comments/default?redirect=false&alt=json-in-script&callback=tampilkankomentar"><\/script>');
//]]>
</script></p></div> 

Bagaimana ? Cukup fantastik bukan ? Hehe, semoga dengan triks yang saya bagikan ini dapat membantu Anda yang sedang memodifikasikan Bloggernya. Selamat mencoba.

34 comments

jiahhhhhhhhhhhh pertama...
bagus sekali animasi recent commentsnya master-jin :D

deleteX
avatar
Anonymous

Keren RC nya master, fantastik :D

deleteX

Keren pakai tirai kaya di bioskop hehehe :D

deleteX

hehe ane suka lead film di bioskop soalnya Mas ^_^

deleteX
avatar
Anonymous

saya belum pasang recent komen nih, saya mau tes dulu apa cocok atau nggk nih :)

deleteX

Mas, boleh tanya nggak ? cara bikin animasi kayak blog ini http://dickeymaru.com/
waktu ketik orochimaru . langsung keluar ular :)
cara buatnya gimana ?

deleteX

benar2 fantastik, top markotop deh. ^^

deleteX

wah maaf..kurang tau saya Mas :)

deleteX

Kereeeeeen dah, kapan yak saya bisa bikin ginian :D

deleteX

kapan-kapan bisa mas :-bd

deleteX

hehe kereen ada gorden nya :)

deleteX

haha betul sekali kang ismet gordennya buka tutp :D :D

deleteX

keren.., ada efek buka tutupx *smile

deleteX

punyaku sudah ada, tapi ini kayanya keren sob...

deleteX

besok gantian pintu :-bd

deleteX

silahkan dicoba sob :)

deleteX

ckckkckckckckckckckckckckcckkc :D

deleteX

keren banget gan.. kapan2 boleh dicoba :D

deleteX
avatar
Anonymous

Efeknya memang keren...

deleteX

sayangnya saya nggak bisa coba nih mas, pakai wordpress soalnya. @Rizkyzone.com

deleteX
avatar
Anonymous

ikut nyimak dulu sob. Sob tuker link yuk? Link saya jg terpasang di menu navigasi..

deleteX

wp lebih manteb setidaknya Mas..

deleteX

terpasang dimana ?? ane cek gak ada Mas

deleteX
Catatan :
1. Dilarang menanamkan link aktif
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan
4. Untuk memasukkan gambar : copy url gambar lalu paste di form komentar

Tambahan :
✓ Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "KONVERSI KODE"

KONVERSI KODEEMOTICON
 
Back to Top