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...
X ✓bagus sekali animasi recent commentsnya master-jin :D
makasih.. :)
X ✓Keren RC nya master, fantastik :D
X ✓Keren pakai tirai kaya di bioskop hehehe :D
X ✓thanks..
X ✓hehe ane suka lead film di bioskop soalnya Mas ^_^
X ✓saya belum pasang recent komen nih, saya mau tes dulu apa cocok atau nggk nih :)
X ✓semoga deh :)
X ✓Mas, boleh tanya nggak ? cara bikin animasi kayak blog ini http://dickeymaru.com/
X ✓waktu ketik orochimaru . langsung keluar ular :)
cara buatnya gimana ?
benar2 fantastik, top markotop deh. ^^
X ✓wah maaf..kurang tau saya Mas :)
X ✓hehe makasih..
X ✓Kereeeeeen dah, kapan yak saya bisa bikin ginian :D
X ✓kapan-kapan bisa mas :-bd
X ✓hehe kereen ada gorden nya :)
X ✓haha betul sekali kang ismet gordennya buka tutp :D :D
X ✓keren.., ada efek buka tutupx *smile
X ✓punyaku sudah ada, tapi ini kayanya keren sob...
X ✓besok gantian pintu :-bd
X ✓biar memikat :D
X ✓silahkan dicoba sob :)
X ✓ckckkckckckckckckckckckckcckkc :D
X ✓keren banget gan.. kapan2 boleh dicoba :D
X ✓silahkan aja..
X ✓Efeknya memang keren...
X ✓makasih mas..
X ✓sayangnya saya nggak bisa coba nih mas, pakai wordpress soalnya. @Rizkyzone.com
X ✓ikut nyimak dulu sob. Sob tuker link yuk? Link saya jg terpasang di menu navigasi..
X ✓wp lebih manteb setidaknya Mas..
X ✓terpasang dimana ?? ane cek gak ada Mas
X ✓Seep keren sob
X ✓makasih sob..
X ✓thanks
X ✓sama-sama
X ✓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