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.
Baharudin Nofiandi
blog anda keren sekali mas bro', aku jd pngn banyak belajar
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
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:
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:
Sebenarnya lebih disarankan untuk diletakkan di bawah kode ini:
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...
Taufik Nurrohman
⇒ XHTML Blogger, Seksi Komentar – data:comment.authorAvatarSrc
you
Kalo itu sudah saya ganti mas.. maksud saya gagal karena element
img
nya tidak terpanggilyou
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 APIDOMDocument
. Cuma ini berisiko karena Google bisa mengubah markup HTML mereka kapan saja.