Memperbesar Avatar/Foto Profil Komentar
Masuklah ke halaman editor HTML blogmu kemudian salin kode ini dan letakkan di atas kode ]]></b:skin> atau </style>:
#comments li.comment div.avatar-image-container,
#comments li.comment div.avatar-image-container img {
float:none;
display:block;
max-width:none;
max-height:none;
width:100px !important; /* Lebar avatar */
height:100px !important; /* Tinggi avatar */
}
#comments li.comment div.comment-block {
margin-left:120px !important; /* Untuk indentasi tubuh komentar agar foto dan paragraf tidak berdesakan */
}Klik Simpan Template, kemudian pelajari sendiri :)
30 Comments:
Kalau menurut saya sih memperbesar foto avatar dengan merubah ukurannya via CSS masih ada kelemahan, yaitu resolusi gambar akan pecah karena dipaksakan besar. CMIIW.
By
Rudy Azhar, at Friday, April 20, 2012 at 2:55:00 PM GMT+7
@Rudy Azhar Iya. Tapi beberapa foto profil sebenarnya juga memiliki ukuran yang besar, dan Blogger memperkecilnya dengan CSS. Intinya sih lemah semua haha :D
By
Taufik Nurrohman, at Friday, April 20, 2012 at 3:14:00 PM GMT+7
di gedein jg percuma kalo pakai avatar...
gak keliatan ganteng yg punyanya!
kabuuuuurrrrrrrr...
By
Beben Koben, at Friday, April 20, 2012 at 7:02:00 PM GMT+7
biasanya kalo pake CSS, ntar Gambarnya dadi Pecah Bang Tofik. Biar ora Pecah gmna yo ?
By
Rosyd Aqbar, at Saturday, April 21, 2012 at 6:56:00 PM GMT+7
dahsyat ni,,,saya mau belajar banyak disini,,,,,,matur suwun mas
By
kang Wahyu, at Sunday, April 22, 2012 at 3:56:00 PM GMT+7
@Bukan Master Susah kayaknya. Soalnya itu sudah ukuran standar. Kalau memakai JavaScript mungkin bisa, untuk mengakses foto profil yang lebih besar.
By
Taufik Nurrohman, at Tuesday, April 24, 2012 at 8:38:00 AM GMT+7
blog anda keren sekali mas bro', aku jd pngn banyak belajar
By
Gawaisme, at Sunday, April 29, 2012 at 10:55:00 AM GMT+7
bang mohon ijin mau posting ulang di blog
By
Unknown, at Tuesday, September 4, 2012 at 3:49:00 PM GMT+7
ketawa baca kalimat yang ada pada gambarnya! wkwkwkwk
http://2.bp.blogspot.com/-c108ODF_vho/T4_6WkfT96I/AAAAAAAACh8/ICLz1zzZxsI/s400/bigger-profile-photo.png
By
Anonymous, at Sunday, December 23, 2012 at 4:48:00 PM GMT+7
wwkwkwwkw.. kocak :D
By
Unknown, at Sunday, December 23, 2012 at 8:20:00 PM GMT+7
aya aya wae si akang kaze :)
By
Unknown, at Tuesday, December 25, 2012 at 10:37:00 AM GMT+7
mantap nih \o/
By
Anonymous, at Friday, February 1, 2013 at 4:12:00 PM GMT+7
Kalau untuk membuat sama ukuran imagenya aslinya dengan css gimana yah gan?
Contoh: Properti CSSnya = image-avatar-container {height=40px weidht=40px}
sementara ukuran asli dari image tsb = 512x512!Serve scaled images
thanks
By
Anonymous, at Saturday, February 2, 2013 at 9:00:00 PM GMT+7
#comments li.comment div.avatar-image-container,
#comments li.comment div.avatar-image-container img {
max-width:none !important;
max-height:none !important;
width:auto !important;
height:auto !important;
float:none;
display:block;
}
By
Taufik Nurrohman, at Saturday, February 2, 2013 at 10:30:00 PM GMT+7
Terima kasih udah ditanggapi gan, setelah di coba kok malah besar sekali imagenya yah?
http://4.bp.blogspot.com/-ivKD4jbHVmg/UQ6C3PxR_XI/AAAAAAAACOk/R3bn-krE6J0/s1600/com.png
Maksud saya seperti punya agan ini, image comentarnya ukuran 42x42, tapi kalau di klik kanan imagenya dan open ditab baru tetap ukuran image masih 42x42, kalau berkomentar pake profil Google plus, imagenyakan 512x512..
Sementara di thread komentar saya ukuran yg tampil ukuran 42x42 tapi jika di klik kanan open tab baru,malah imagenya menjadi 512x512!
Mohon pencerahannya :)
By
Diansah, at Sunday, February 3, 2013 at 10:36:00 PM GMT+7
Itu memakai JavaScript. Kemarin juga ada yang tanya ⇒ /2013/01/membuat-fitur-komentar-berbalas.html?showComment=1358446892653#c2453347458537699342
By
Taufik Nurrohman, at Monday, February 4, 2013 at 8:54:00 AM GMT+7
Udah saya cek gan dan lihat JSnya.
Jadi sama aja yah gan memuat dalam resolusi imagenya, walaupun di ubah tetapa dimuat dgn resolusi aslinya?
Pertanyaanya, kode JSnya yg mana yg diubah dengan:
var cL = document.getElementById('comments-area'),
c = cL.getElementsByTagName('span');
if (c) {
for (z = 0; z < c.length; z++) {
f = c.item(z).innerHTML;
if (f.indexOf('style="') != -1) {
f = f.replace(/src="http:\/\/img1.blogblog.com\/img\/blank.gif"/, '');
f = f.replace(/display: none/i, '');
f = f.replace(/longdesc=/i, 'src=');
f = f.replace(/\/s[0-9]+\//, '/s50/');
c.item(z).innerHTML = f;
}
}
}
Maaf banyak nanya gan, maklum masih awam ttg JS!
terima kasih atas bantuannya
By
Diansah, at Monday, February 4, 2013 at 9:45:00 AM GMT+7
Itu untuk versi komentar yang sudah dimodifikasi. Coba yang ini:
<script>
(function() {
var ct = document.getElementsByTagName('*'), ava;
for (var i = 0, len = ct.length; i < len; i++) {
if (/( |^)avatar-image-container( |$)/.test(ct[i].className)) {
ava = ct[i].getElementsByTagName('img')[0];
ava.src = ava.src.replace(/\/s[0-9]+\//,"/s32-c/");
}
}
})();
</script>
Letakkan di atas </body>
By
Taufik Nurrohman, at Monday, February 4, 2013 at 10:18:00 AM GMT+7
Sudah saya coba pasang gan, dan pada saat di save malah error :
http://3.bp.blogspot.com/-4ysKtFzoKq0/UQ96MMV4GXI/AAAAAAAACR0/R66shVqJ8uo/s1600/com.png
Trus saya pikir mesti di parshe,
Setelah saya parshe dan meletakkannya diatas BODY berhasil ke save. tapi setelah saya reload halaman artikel yg ada komentarnya, hasilnya tetap gan masih memuat gambar dengan resolusi Aslinya:
o8p8fLfdZNM/AAAAAAAAAAI/AAAAAAAAAHI/HloQqvjUWxU/s512-c/photo.jpg
kode s512 gak berubah ke 32 atau 51 seperti punya agan ini.
Maaf udah merepotkan gan :)
By
Diansah, at Monday, February 4, 2013 at 4:12:00 PM GMT+7
Tidak perlu diparse. Pakai komentar CDATA saja:
<script>
//<![CDATA[
...
...
...
//]]>
</script>
Sebenarnya lebih disarankan untuk diletakkan di bawah kode ini:
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
<!-- taruh di sini -->
By
Taufik Nurrohman, at Monday, February 4, 2013 at 7:03:00 PM GMT+7
fungsi scriptnya jadi berfungsi buat ngurangin loading komentar blog kan mas ??
By
Anonymous, at Friday, July 19, 2013 at 11:48:00 PM GMT+7
Makasih ya mas udah share, tutor nya sangat bermanfaat untuk newbie seperti saya
By
Anonymous, at Wednesday, August 21, 2013 at 12:54:00 PM GMT+7
saya ingin mengambil url dari data:src komentar sebagai avatar mas.. sample tapi gagal
<div class="avatar-image-container" data:src='//lh3.googleusercontent.com/-i-Qpljch7Dw/AAAAAAAAAAI/AAAAAAAAE8M/LmbPjQJXMZc/s512-c/photo.jpg'></div>
$(window).bind("load", function() {
$('.avatar-image-container').html(function () {
return '<img width="32" height="32" src="'+ $(this).data('src').replace(/\/s[0-9]+(\-c)?/,"/s32-c")+'" alt=""></img>'})
}); mohon bantuannya mas.. plizzz....
By
you, at Monday, December 16, 2013 at 9:27:00 AM GMT+7
Pembaharuan
Percobaan di [url=http://jsfiddle.net/KzRcF/5/]Link Jsfiddle. demo[/url] berhasil tetapi diterapkan diblog gagal.. mungkin ada solusi... maaf udah banyak nanya mas..$(window).on("load", function () {
$('.avatar-image-container').each(function () {
$(this).html('<img src="' + $(this).data('src').replace(/\/s[0-9]+(\-c)?/,"/s50-c") + '"></img>');
});
});
By
you, at Monday, December 16, 2013 at 5:33:00 PM GMT+7
masih setia menunggu balasan...
By
you, at Monday, December 16, 2013 at 8:09:00 PM GMT+7
<div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'/>
⇒ XHTML Blogger, Seksi Komentar – data:comment.authorAvatarSrc
By
Taufik Nurrohman, at Monday, December 16, 2013 at 8:21:00 PM GMT+7
Kalo itu sudah saya ganti mas.. maksud saya gagal karena element img nya tidak terpanggil
By
you, at Monday, December 16, 2013 at 8:22:00 PM GMT+7
sudah berhasil... thanks mas udah bagi ilmunya
By
you, at Monday, December 16, 2013 at 8:24:00 PM GMT+7
Keluar dari topik, tetapi masih bersinggungan dengan image avatar. Misalkan kita tidak pakai CMS Blogger, tetapi sistem komentar menggunakan akun google, agar kita bisa mendapatkan image avatar dari, misalnya gmail atau google+. Apakah itu mungkin dilakukan dengan manipulasi JSON dan dipanggil ke blog kita ketika ada komentar baru datang? Apakah kawan-kawan ada saran?
By
lutfiyah, at Wednesday, December 19, 2018 at 3:53:00 PM GMT+7
Kalau dari sisi Google tersedia API untuk memanggil URL avatar ya bisa saja mbak. Kalau tidak ada solusinya paling pakai PHP cURL, terus kita cari URL gambar memakai API DOMDocument. Cuma ini berisiko karena Google bisa mengubah markup HTML mereka kapan saja.
By
Taufik Nurrohman, at Sunday, December 23, 2018 at 1:59:00 AM GMT+7
Post a Comment
<< Home