Posisi gambar avatar Komentar

Posisi gambar avatar Komentar

Komentar

Ini adalah Trik Cepat untuk memperbaiki gambar avatar komentar blogger yang tidak sesuai. Saya melihat di banyak blog gambar avatar Komentar mereka tidak berada dalam posisi yang benar dan ukuran yang pas. Hal ini karena CSS default Komentar Sistem dan Komentar Threaded. yang ada dalam template Anda dan menyebabkan tampilan gambar avatar tidak benar. berikut ini adalah sebuah tip dengan css untuk Reset gambar Avatar dan Gaya Image.

Berikut Ini adalah ulang CSS untuk Komentar Gambar Avatar dan bekerja untuk kedua default Komentar Sistem dan System Threaded Komentar.

1. Masuk ke Blogger Dashboard> Pilih Blog Anda dan Klik Menu Dropdown
2. Pilih Template> Klik Edit HTML
3. Cari kode tag ]]></b:skin> dan letakkan kode di bawah ini diatasnya:

.avatar-image-container,
.avatar-image-container img{
 max-width:50px !important;
 width:50px !important;
 max-height:50px !important;
 height:50px !important;
 padding: 0 !important;
 border:0px;
}

Catatan: Ukuran standar diatur ke 50px. jika Anda ingin Mengubah ukuran avatar maka cukup memodifikasi CSS di atas.

Bagaimana cara membuat bulatan pada Gambar Avatar Komentar Blogger?


Berikut cara membuat bulatan gambar Avatar dalam komentar blogger. berikut ini adalah CSS untuk itu, css ini akan mengatur ulang ukuran avatar normal dan putaran Image. (jadi jangan gunakan CSS di atas)

Cari kode tag ]]></b:skin> dan letakkan kode di bawah ini sebelum kode tersebut

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}

.avatar-image-container{
 border:3px solid #fff !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

Catatan: Ukuran standar diatur ke 50px. jika Anda ingin Mengubah ukuran avatar maka cukup memodifikasi CSS di atas.

4. Jangan lupa simpan template anda.

Jika posting ini sangat berguna bagi Anda? maka silakan di bagikan keteman lainnya Terima kasih. Jangan lupa tinggalkan komentar Anda.

Artikel Terkait

  • Komentar blogger threaded comment
    Sebelum melakukan installasi astikan Backup dulu template, untuk menghindari error pada installasi 1. Masuk ke Blogger 2. Klik Template --> Edit HTML, centang Expand Template Widget 3. Ganti semua kode <b:include data='post' name='threaded_comments'/> dengan <b:include data='post' name='comments'/>  apabila ti…
  • Memasang komentar Google plus versi dua
    Sudah pasang tapi tidak muncul? ada kesalahan atau template costume bloggernya berbeda. ikutu saja cara berikut ini setelah sobat tidak berhasil menerapkan Cara Memasang Widget Komentar Google Plus di Blogger yang pertama Pertama seperti biasa login ke akun blog sobat. Kemudian klik Template >> Edit Html.(backup dulu sebelum edit agar b…
  • Menandai komentar author di Blog
    Sambil menunggu tarawih dari pada bengong saya mau berbagi trik tentang komentar di blogger, dengann trik membedakan kelas komentar ini pengunjung akan lebih mudah tahu mana komentar author dalam blog tersebut sehingga untuk Si pengguna anonim tidak dapat dengan mudah menyamar sebagai author blog dengan tujuan menyesatkan. Memasang trik ini p…
  • Cara Memasang Widget Komentar Google Plus
    Komentar Google Plus bisa untuk Blogger dan menambahkan fungsionalitas yang besar ke situs blog Anda. Ini adalah alat yang berguna untuk menjaga percakapan Anda dengan pengunjung Anda tetap terorganisir. Pembaca dapat berinteraksi dan berbagi komentar, bahkan posting komentar di situs Google Plus Anda akan muncul di situs Anda. Tapi bagai…
  • Emoticon komentar otomatis
    Emo atau smiley biasanya digunakan untuk menyatakan suasana hati, senang, sedih, marah dsb. Selain itu juga sebagai penambah unik kolom komentar blog, sehingga tampak lebih interaktif dengan pengunjung ketika saling berbalas komentar. Sudah banyak tutorial tentang cara memasang emotikon pada komentar blogger, tapi saya share ini untuk pembaca…
  • Membuat loading komentar dengan CSS
    Pernah melihat efek loading form komentar di blogger saat berkunjung ke blog lain? apakah sobat belum memasang ini di blog dan ingin tahu caranya, ikuti saja langkah di bawah ini. selain menambah kesan apik, juga memberi keunikan tersendiri untuk tampilan blog. dan ini tidak berpengaruh kepada loading blog menjadi berat. langsung saja. 1. Lo…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...