Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Monday, July 15, 2013

Cara membuat icon author comment

Comment author adalah pesan komentar yang dipublish oleh pemilik akun situs web atau blog. Tampilan komentar dari sang penulis atau admin biasanya berbeda dengan para pengunjung atau komentator, sebab bila dalam suatu situs banyak yang komentar para pengunjung atau komentar lainnya dapat membedakan dengan cepat mana komentar dari author dan mana dari para pengunjung. Memang trik ini sudah tergolong lama dalam dunia bloging tapi menurut pemikiran saya tidak ada salahnya untuk mengingatkan kembali ataupun untuk membuat suatu koleksi author comment pada ingatan kita.


Untuk memasang icon author comment ini tergolong mudah, karena kita hanya memasangnya dengan code CSS sebagai pemanggil code image icon author commentnya. Oke daripada makin bosan bacanya langsung saja menuju TKP dan simak penjelasan dibawah ini :


Installasi Code CSS


  1. Seperti biasa login to blog
  2. Pilih " Template "
  3. Kemudian Klik " Edit HTML "
  4. Setelah itu cari code ]]></b:skin> atau pun </style>, setelah ketemu silahkan copy code CSS dibawah ini dan pastekan didalam ataupun diatas code ]]></b:skin> atau pun </style>. kalo lebih bagusnya silahkan pastekan code dibawah ini dekat dengan atau bersamaan dengan code CSS (comments ) agar lebih mudah suatu saat anda untuk mengeditnya. Setelah selesi silahkan save template anda dan lihat hasilnya. Untuk DEMO anda bisa melihat Icon Author Comment pada komentar blog ini.

.comments .comments-content .icon.blog-author{position:absolute;top:-8px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBnwEis9JgMPeLLVUqGYsF2S1AIswsetaMjl80UkC8PvprdKz9LMRn-yEtXMKu1SfGZL8YY87YNoUNpsEGvoIRaarorvE-yRajnJZnTUD8UOyYh-ejHHiAh8EUoLfSPn0P9bFJun3vek/s1600/Merah-autor.png);width:56px;height:56px}

Bila anda ingin lebih kreative silahkan anda pilih gambar dibawah ini sesuai dengan tampilan blog anda. Code CSS dibawah ini gantikan dengan code CSS yang berwarna biru diatas, Code yang anda copy sesuai dengan gambar yang tertera pada postingan ini. Bila settingan letaknya kurang memadai / pas silahkan setting besar kecilnya angka pada code warna hijau diatas.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BuWdJwWoJtyX8FOvSuRFatcHgb5Blf5SAxtFkyvIptXtt7vWmMSrqnwbD2MQgeVrW2lhMbY77Ii-L57qGINL_9EhdcgDdKMIbKA21WSdtyOU2Jy0SlOvF8vk0kI3olcNJmLKZfLrUV0/s1600/autor-biru.png
Author 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiivJgDRdUN1dyvhMRQBYV1ORZvN9qNrQgiQSlvV9Xt1tZv1MMRJNiMj2fvmoq-qAk6ckj5Ebne2qwCGpEWwQATVtTPFufTYW0nTJSXLwPDtkTLDKED77qZKqPJesaYaOOshxatEsXzpEw/s1600/autor-black.png
author 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiRoXbsQ_awsJOWDrg8KKuKlGKn6wLncE8Asw95KDsYrVEjUYU6dvJxz0GxGnQuNxMyjV3KPR5leMmhADncvzlfLGpy4SSZR17PHR2i6qnE422MAuiTeXEAZnPmWdiLpiYtvjVrwC8y-E/s1600/autor-hijau.png
author 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4j18eSMUb1rLfWL3YXMfgEu1rfSJMx4SqhfwhBQOf1m8p3W5d3PyTm9KMuQrwRleoN0oAE8y3FVgeLznqfMu6pNY9njFBctb7AokeUmK72YU-8wCEMeR6MafBZFu1la8sG4z5hA4o1M/s1600/autor-kuning.png
author 4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91sCLgm0UD6S-32nfQBcRMGeXjWALlgdWYtMjX-ehqnTOlXfdvFXuY2FEU6MdE11DhKtrUBggdKHEOceF2u5H2BUalbo_757Dgx4eHB49Hsu2AkY37DPp_Vn8VCR9-EJkhK67VbrlArs/s1600/authorpink.png
author 5



Kesimpulan

Perbedaan author comment dengan para komentator dengan menambahkan icon gambar User Author pada postingan kali ini, akan mempermudah para komentator melihat Komentar author pada suatu halaman blog form Comment.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 11:13 AM

42 comments :

  1. DEMO sebagai contoh icon author comment

    ReplyDelete
    Replies
    1. testt.. kunjungan balik kejari.com

      Delete
    2. hehehe iya yah..
      makasih atas kunjungannya sob..

      Delete
    3. Visit Back : http://sandaizer.blogspot.com

      Delete
  2. Mantap Gan infonya. Sangat bermanfaat. #IkutanDemoComment

    ReplyDelete
  3. Ooo.. beda icon saja ya.. Ok Makasih Banyak.. Sukses selalu..

    ReplyDelete
  4. hehe silahkan bang HAMDAN. makasih atas pendapatnya salam kenal dari saya.

    ReplyDelete
  5. Senior, sudah saya coba Modify CSS pada Comment Publish

    Tadinya begini"
    #comments-block,.comment-author,.profile-datablock{margin:.5em 0}

    Saya tambahan menjadi:
    #comment{border:5px solid #111;padding:2px 2 0 2px;}
    #comments-block,.comment-author,.profile-datablock{margin:.5em 0}

    KOK NGGAK TERJADI SESUATU YA SENIOR.
    Mohon Pencerahannya sob.

    ReplyDelete
  6. heheh jangan dibilang seniorlah masih newbie kok alias belajar..
    yah jelas salahlah sob. id comment padding:2px 2 0 2px;} aja yang nomer 2tidak pake ukuran px dan untuk margin:.5em 0} ada titik di depan nomer 5, coba dicek semua codenya dengan benar..

    ReplyDelete
  7. Malam Senior, mohon ditengok hasil modifikasi .comment saya.
    Kalau boleh mohon pencerahannya by CHAT boss...

    ReplyDelete
  8. Via G-Talk Senior,...
    Maaf, kalau sempat aja. Kalau kita sama2 OL.

    ReplyDelete
  9. boleh boleh ntarlah kalo ada waktu yang tepat buat kita, digoogle plus agak sedikit berat lodingnya bagus nanti di FB saja biar lebih cepat dan lodingnya kencang.

    ReplyDelete
  10. sob tapi hasilnya kok gak maksimal ya sob
    coba di cek di ahmadsuyadi.blogspot.com

    ReplyDelete
  11. oh saya sudah lihat tapi kemunculannya hanya sdikit ya.. itu commentnya sudah kamu edit sob , tapi coba rubah ukuran
    top:-8px;right:-12px; . Balikkan dulu semua ukuran ke posisi 1px, baru dari sana edit kembali kurang kekanan / kekiri atau kebawah / keatas.

    ReplyDelete
  12. ku pasng ndak mau muncul gan gemana caranya yah?

    ReplyDelete
  13. masa sih, mungkin commentnya sudah banyak yang sohib rubah sehingga tidak muncul atau bisa jadi kodenya kurang konplit dicopy sob, coba dicek balik

    ReplyDelete
  14. Punya saya pake effect hover, jadi Gak cocok :D, Kunjungan dari masalah my-topsite.blogspot.com :D.

    ReplyDelete
    Replies
    1. oh gitu, ...
      thx atas kunjungannya sob.. salam kenal

      Delete
  15. Dari tadi saya menulis keluhan di google
    munculnya blog rivai terus tapi nice info ^_^

    ReplyDelete
    Replies
    1. thx mba atas penapatnya...
      semoga keluhannya cepat selesai
      thx your visit

      Delete
  16. terima kasih mas infonya, kunjung balik mas di www microsystem net

    ReplyDelete
    Replies
    1. ralat www microsystemcomputer net

      Delete
    2. makasih atas kunjungannya salam kenal..
      mantap blognya sob, keren

      Delete
  17. kalo admin yang kaya punya agan rivai gmn tuh gan ? :matabelo:

    ReplyDelete
    Replies
    1. Kalo untuk icon itu saya belum posting sob, nanti bila ada waktu akan saya posting. thx atas kunjungannya..

      Delete
  18. terimakasih sebelumnya dari artikel sebelum2nya kotak komentar saya udah bener. tp yg ini kok gak bisa ya mas? udah saya pasang sebelum b:skin gak bisa. Sebelum /style juga gak ngaruh. positionnya juga udah saya ubah2 tp tetep gak ngaruh. pingin juga pake yg beginian. Dijawab ya mas :D

    ReplyDelete
    Replies
    1. masa sih heheheh

      oke, coba masuk ke CSS blog kamu, kamu masih ingat kan waktu pas masang kode CSS kotak komentarnya.. nah coba cari kode

      .comments .comments-content .icon.blog-author { bla..bla }

      kalo sudah ketemu. lihat kode didalam tanda { .. }
      ganti semua kode yang ada dialam dengan kode dibawah ini

      position:absolute;top:-8px;right:-12px;margin:0;background-image: url(http://3.bp.blogspot.com/-nCnxF2PjRto/UeLd1SemGaI/AAAAAAAABiE/IdqFZabBVUI/s1600/Merah-autor.png);width:56px;height:56px

      sehingga menjadi

      .comments .comments-content .icon.blog-author {
      position:absolute;top:-8px;right:-12px;margin:0;background-image: url(http://3.bp.blogspot.com/-nCnxF2PjRto/UeLd1SemGaI/AAAAAAAABiE/IdqFZabBVUI/s1600/Merah-autor.png);width:56px;height:56px;
      }

      Delete
    2. Tetep Gak Bisa Gan Gak Bisa Muncul Author NYA
      Mohon Bantuannya

      Delete
  19. Benar-benar terima kasih, kini blog-ku internetsehatblog.blogspot[dot]com makin cantik karena tips ini

    ReplyDelete
  20. gan mwtanya klo buat sperti kode konversi sama from diskusi gmna....
    bntuanyavgan

    ReplyDelete
    Replies
    1. Mohon maaf untuk pertanyaan diluar topik diatas kami tidak dapat menjawabnya disini. untuk dapat reques tutorial kami hanya dapat menjawab pertanyaan para member blog atau yang join dengan blog ini, diluar itu semua pengunjung hanya dapat share kepada kami mengenai toping yang telah diposting..

      untuk menjadi member silahkan klik " Join to Blog "
      Terimakasih
      Salam Blogger

      Delete
  21. terimakasih sebelumnya dari artikel sebelum2nya kotak komentar saya udah bener. tp yg ini kok gak bisa ya mas? udah saya pasang sebelum b:skin gak bisa. Sebelum /style juga gak ngaruh.
    Udah Saya Ganti Seperti INI
    .comments .comments-content .icon.blog-author {
    position:absolute;top:-8px;right:-12px;margin:0;background-image: url(http://3.bp.blogspot.com/-nCnxF2PjRto/UeLd1SemGaI/AAAAAAAABiE/IdqFZabBVUI/s1600/Merah-autor.png);width:56px;height:56px;
    }
    Juga Gk Ngaruh
    Mohon BAntuannya Ya Mas

    ReplyDelete
    Replies
    1. 1 coba diperhatikan kode CSSnya yang berwarna hijau pada tutorial diatas, angka tersebut adalah untuk menggeser icon ke atas dan kesamping coba di perhatikan...

      2 . Coba diperhatikan code CSS comment yang lainnya yang telah ada pada template, dan perhatikan code yang anda copy jangan sampai ada satu kodepun yang tinggal termasuk titik dan koma.

      Delete
  22. walaikum salam...

    thx atas pendapat dan kunjungannya..
    salam kenal...

    ReplyDelete
  23. salam kenal dah berhasil di terapkan mas,,thanks,keren2 nich artikel nya jadi betah saya di sini

    ReplyDelete
  24. Tq gan :D

    www.infocomp33.co.vu

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog