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.

  • 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

      #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

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

            • Taufik Nurrohman

              <div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'/>

              XHTML Blogger, Seksi Komentar – data:comment.authorAvatarSrc

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