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.
@Rudy Azhar Iya. Tapi beberapa foto profil sebenarnya juga memiliki ukuran yang besar, dan Blogger memperkecilnya dengan CSS. Intinya sih lemah semua haha :D
di gedein jg percuma kalo pakai avatar...
gak keliatan ganteng yg punyanya!
kabuuuuurrrrrrrr...
biasanya kalo pake CSS, ntar Gambarnya dadi Pecah Bang Tofik. Biar ora Pecah gmna yo ?
dahsyat ni,,,saya mau belajar banyak disini,,,,,,matur suwun mas
@Bukan Master Susah kayaknya. Soalnya itu sudah ukuran standar. Kalau memakai JavaScript mungkin bisa, untuk mengakses foto profil yang lebih besar.
blog anda keren sekali mas bro', aku jd pngn banyak belajar
bang mohon ijin mau posting ulang di blog
ketawa baca kalimat yang ada pada gambarnya! wkwkwkwk
http://2.bp.blogspot.com/-c108ODF_vho/T4_6WkfT96I/AAAAAAAACh8/ICLz1zzZxsI/s400/bigger-profile-photo.png
wwkwkwwkw.. kocak :D
aya aya wae si akang kaze :)
mantap nih \o/
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
#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;
}
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 :)
Itu memakai JavaScript. Kemarin juga ada yang tanya ⇒ /2013/01/membuat-fitur-komentar-berbalas.html?showComment=1358446892653#c2453347458537699342
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
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>
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 :)
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 -->
fungsi scriptnya jadi berfungsi buat ngurangin loading komentar blog kan mas ??
Makasih ya mas udah share, tutor nya sangat bermanfaat untuk newbie seperti saya
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....
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>');
});
});
masih setia menunggu balasan...
<div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'/>
⇒ XHTML Blogger, Seksi Komentar – data:comment.authorAvatarSrc
Kalo itu sudah saya ganti mas.. maksud saya gagal karena element img nya tidak terpanggil
sudah berhasil... thanks mas udah bagi ilmunya
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?
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.
Post a Comment
<< Home