Mecha versi 2.6.4 sudah dirilis!

Memperbesar Avatar/Foto Profil Komentar

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 Komentar

Rudy Azhar

Kalau menurut saya sih memperbesar foto avatar dengan merubah ukurannya via CSS masih ada kelemahan, yaitu resolusi gambar akan pecah karena dipaksakan besar. CMIIW.

Taufik Nurrohman

@Rudy Azhar Iya. Tapi beberapa foto profil sebenarnya juga memiliki ukuran yang besar, dan Blogger memperkecilnya dengan CSS. Intinya sih lemah semua haha :D

Beben Koben

di gedein jg percuma kalo pakai avatar...
gak keliatan ganteng yg punyanya!

kabuuuuurrrrrrrr...

Rosyd Aqbar

biasanya kalo pake CSS, ntar Gambarnya dadi Pecah Bang Tofik. Biar ora Pecah gmna yo ?

kang Wahyu

dahsyat ni,,,saya mau belajar banyak disini,,,,,,matur suwun mas

Taufik Nurrohman

@Bukan Master Susah kayaknya. Soalnya itu sudah ukuran standar. Kalau memakai JavaScript mungkin bisa, untuk mengakses foto profil yang lebih besar.

Unknown

bang mohon ijin mau posting ulang di blog

Anonim

ketawa baca kalimat yang ada pada gambarnya! wkwkwkwk

Unknown

wwkwkwwkw.. kocak :D

Unknown

aya aya wae si akang kaze :)

Anonim

mantap nih \o/

Anonim

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

Taufik Nurrohman

#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;
}

Diansah

Terima kasih udah ditanggapi gan, setelah di coba kok malah besar sekali imagenya yah?

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 :)

Taufik Nurrohman

Itu memakai JavaScript. Kemarin juga ada yang tanya ⇒ /2013/01/membuat-fitur-komentar-berbalas.html?showComment=1358446892653#c2453347458537699342

Diansah

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

Taufik Nurrohman

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>

Diansah

Sudah saya coba pasang gan, dan pada saat di save malah error :

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 :)

Taufik Nurrohman

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

you

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

you

Pembaharuan
Percobaan di Link Jsfiddle. demo 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>');
});
});

you

masih setia menunggu balasan...

you

Kalo itu sudah saya ganti mas.. maksud saya gagal karena element img nya tidak terpanggil

you

sudah berhasil... thanks mas udah bagi ilmunya

Anonim

fungsi scriptnya jadi berfungsi buat ngurangin loading komentar blog kan mas ??

Anonim

Makasih ya mas udah share, tutor nya sangat bermanfaat untuk newbie seperti saya

lutfiyah

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?

Taufik Nurrohman

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.

Komentar telah ditutup.