Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Widget Animasi Recent Comment di Blog

Widget Recent Comment Animasi Blog
Membuat Widget Animasi Recent Comment di Blog – tentu sudah tidak asing mengenai widget ini di blog. Widget yang digunakan oleh mayoritas blogger untuk menampilkan komentar terakhir pada halaman blognya. Widget recent comment dengan thumbnail ini sangat cocok tentunya untuk melengkapi sidebar atau bisa juga di footer blog dengan dilengkapi efek animasi hover dan sangat serasi untuk mempercantik desain blog. Untuk memasang widget recent comment sangat mudah tentunya, tinggal copy kode yang terdapat dibawah lalu paste pada HTML widget yang tersedia. Sebagaimana mestinya tergantung dari selera yang di inginkan, banyaknya komentar yang ingin ditampilkan pada widget recent comment bisa di atur dengan mudah sehingga bisa seminimal mungkin agar tidak memakan banyak ruang. Untuk melihat hasilnya terlebih dahulu bisa dilihat pada demo yang terdapat dibawah. Sedangkan untuk menerapkan kedalam blog, berikut adalah tutorial cara Membuat Widget Animasi Recent Comment di Blog.

1. Login ke akun blogger.
2. Copy kode dibawah ini.
<style type="text/css">
ul.btt_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.btt_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 2px solid transparent;
}
.btt_recent_comments li:hover {
    -webkit-transform: scale(1.2) translate(15px);
    -moz-transform: scale(1.2) translate(15px);
    -ms-transform: scale(1.2) translate(15px);
    -o-transform: scale(1.2) translate(15px);
    transform: scale(1.2) translate(15px);
    box-shadow: 0 0 20px 1px #aaa;}
.btt_recent_comments li {
    background: none!important;
    margin: 5px!important;
    padding: 5px!important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.btt_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.btt_recent_comments li img {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.btt_recent_comments li span {
    margin-top: 3px;
    color: #666;
    display: block;
    font-size: 12px;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 45,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More ?",
 defaultAvatar  = "http://1.bp.blogspot.com/-al82MhjzNaU/UUSpupsh-uI/AAAAAAAADAE/c71rFRuiDlg/s320/avatar.png",
 hideCredits = true;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{}))
//]]>
</script>
<script src="/feeds/comments/default?alt=json&amp;callback=btt_recent_comments&amp;max-results=10" type="text/javascript"></script>
Keterangan:
Ganti numComments  = 5 untuk mengatur jumlah komentar yang ingin ditampilkan.

3. Klik Tata Letak >> HTML/Javascript selanjutnya paste kode disitu lalu klik Simpan.

DEMO:



Berlangganan artikel via email

66 Response to "Membuat Widget Animasi Recent Comment di Blog"

avatar
Anonymous

Pertamaxnya diambil dulu deh hehe....
Keren mas, sayangnya saya sudah punya, apa sama dengan yang punya saya yah mas? Thanks :)

Balas

kreasi dari mas andes selalu keren.. salam sukses mas andes

Balas

mas kalo buat archive pake scrol gitu gmn? aku kok masih bingung ,apalagi dengan odel edit templte yang sekrng bnyak kode yang gak ada

Balas

orang nya juga gak kalah keren loh,hhehe

Balas

kayak gini mas :)
http://mas-andes.blogspot.com/2012/11/membuat-scroll-archive-di-sidebar-blog.html

Balas

wah, keren gan... tp puyeng juga liat script nya yang angka2 ntu, hehehe...

Balas

saya udah berhenti dari dunia script2 an mas, dulu seneng banget bereksperiment dengan belajar otodidak, sekarang mau fokus ke content, belajar nulis... sekarang aja tampilan blog saya sederhana, pake penyedia template gratisan ^_^

salam kenal ya, semoga akrab.

Balas

Weehh, keren nih gan. Makasih nih tutorialnya gan. Tingkatkan gan, siapa tau keren ntar bisa ane terapin hehe

Dunia IT Dalam Blog - http://blogpanik.blogspot.com/

Balas

itu bukan cuma di pake buat archive doang kan, karena saya pake juga buat widget-widget bawaan blogger .

Balas

Artikelnya bermanfaat nih bang admin... semoga blognya makin berkembang..

Balas

bagus tuh mas... bisa goyang goyang ya bila di colek... tapi mamang belum paham tuh masangnya... takut terjadi error lagi, sampai keringet dingin loh heheh

Balas

mamang yang lucu ya?

Balas

2 jempol dan nilai 100 buat nona tia :)
ini pasti efek dari cerebrofit + martabak

Balas

wah thanxs mas :) tutor nya :)

Balas

asiik bisa goyang..mksh infonya

Balas

keren y mas... nnti ak cba trapkan :)

Balas

saya numpang bilang keren aja dulu mas. masih belum mau nambah widget sih

Balas

semoga blognya makin berkembang dan sukses dan banyak pengunjung + komentar

Balas

iya mas agus silahkan :) kerennya saya kembaliin lagi biar kita sama2 keren *hahaha

Balas

aku mau terapkan tapi takut gagal hihi

Balas

salim dulu sama mas andes kasih cipok basah dulu ah.........

Balas

saya juga pake tuh yang namanya scroll,coba aja lihat kebunku ,,,hihi

Balas

itu baru dicolek Mang,bagaimana kalau dicolok tuh heuheuheu

Balas

endank mas Agus genit dech ihhhh,pake cipok basaha segala hihi

Balas

wah yang ini wajib dicoba nih bro,,,,,

Balas

Saya sudah terapkan :D
http://firmanardyansyah.blogspot.com/

Balas

btw untuk menghilangkan comment admin caranya gimana bro,barusan aku coba ,,,adminya ikut muncul,,,

Balas

wuich,,,,, ngembang hidung mas andes nanti

Balas

izin nyimak aja mas,,,,,
msih newbie,,, blum bsa,praktek

Balas

beda mas anthonie...kan belinya di laen agen...hehe :)

Balas

saya salam tempel aja deh..

Balas

saya malah karambol..cuma diem2... :D

Balas

jangan di liatin mbak .cukup di paste aja kok..hehe :)

Balas

Di iket aja kang Dede...adminnya sama tambang...
pasti ga ikut nongol dagh..hehe :)

Balas

jgn nanti mas..kburu ga keren loh..

Balas

aduhaiii...mas widgetnya...sepoi sepoi gimana gitu...hehe :)

Balas

langsung tak fahami dan mencoba

Balas

nama nya kita belajar ,janga pernah takut salah mbak,, di backup aja dulu templte nnya, kan gampang balikin,,ehehhehe, sok tau gitu malu sama admin nya

Balas

idenya boleh, admin siapa tapi?

Balas

Iya mas tapi punya mas Andes lebih keren kayaknya yah hehe...

Balas

tergantung tempelannya mas hehe...

Balas

jangan asal dipaste aja mas, tapi dicopy dulu hehe...

Balas

iya mamang emang lucu dan gemesin yah hehe...

Balas

sepoi-sepoi merinding mas....

Balas

ngahaha.. sory kang dede aku lagi jadi buron mas budi :) mau kabur duluan yaa *grengg_grenggg_grenggggg

untung aja yang muncul bukan fotonya kang dede semua *hohoho
kan kalo adminnya ikut muncul biar keliatan cakepnya gituu kang dede *hikhiks..

Balas

yang keren orangnya kan mas :)

Balas

santaiii saja mbak maya, disini kita sama2 newbie :)

Balas

iya mas saya juga khilaf dari dunia script beneran kok, sekarang mau nyicipin wedang ronde campur cendol bikinannya kang dede dulu :) salam jabat tangan..

yang mau minta martabak sama miz tia, yang mau minta kerak telor sama mas budi dan yang mau minta singkong bakar sama kang dede *hehehe

Balas

hahaha..image yang digunakan ada gambar saya. Lumayan numpang exist biar terkenal, ini yang namanya membangun image mas, tapi lewat perantara orang lain. Hahaha..mantaaaaap

Balas

owh..ternyata widget recent komentnya dijadikan demo ya. Pantesan kok gambar saya jadi dua..kreatip mas. Haha..

Sekalian biar jadi 3 mas photonya..hahah

Balas

saya malah meriang ngelihatnya mas..haha

Balas

yang mau minta duit sama mas andes.

Balas

tutorial menarik nih..
pengen coba dulu nii..

Balas
avatar
Anonymous

Manteb deh.. izin nyoba sob... salam kenal

Balas
avatar
Anonymous

makasih mass atas CSS nyaa :D

Balas
avatar
Anonymous

Wah saya gak kebagian nih widget nya
Gara-gara telat nih.. kaya nya habis di
Ambil Mas Anthonie, sama Mas Budi.hhhh
Gimana Mas Andes masih ada sisa Gak yah?

Balas

Saya mah minta Elmu script saja Mas Andes..hkkhkhkhkh

Balas

wah blognya tampil di googe lagi :)
ada nggak rahasianya Mas ^_^
oh iya saya lagi butuh recent coment Mas buat di sidebar. izin pakai yah Mas :)

Balas

saya ga punya rahasia mas, semua yang saya tau pasti saya share di blog. silahkan mas bila dibutuhkan ambil aja :)

Balas

Keren Mas Animasi Recent Comments nya.
Bisa mekar yah Mas Kaya Baloon

Balas

Kalau di tempel dengan sesuatu pasti Mas Andes
Nyruntul deh hhhhh Kaya nya Mas Andes Sibuk
dengan blog baru deh sobat semua hhhh

Balas

Mantab gan infonya..blog informatif, unik dan pantas sbg rujukan blogger newbie. Widget agan sdh syb terapkan di blog saya dan work. thanks sdh di share... jgn lupa mampir ke blog saya, Blog Dofollow Auto Approve tentang blackhat web traffic, backlink gratis dll http://goo.gl/31NAio

Balas

mantap mas andes.. saya cari widget recet comment, pada gagal semua. mungkin template saya yg memang error. tp gitu pake widget mas andes ini, lsg muncul! working like a charm.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Widget Animasi Recent Comment di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode