CSS only: Displays "Admin and Signature" on Author Comment in Blogger New Threaded Comments

Mengembangkan apa yang sudah terpostingkan sebelumnya tentang "Cara membuat background berbeda pada Author Comment di Blogger Threaded Comments menggunakan kode css (Only CSS: Hightlight Author Comment in Blogger Threaded Comments)", kali ini kita akan menambahkan sebuah background image yang berupa teks "Admin" atau "tanda tangan pemilik blog". Penambahan "Admin" atau "Tanda Tangan Author" pada Author Comment akan membuat setiap tanggapan komentar yang diberikan author (pemilik blog-penulis) mempunyai warna background berbeda dan disertai "teks Admin" atau "tanda tangan" di sisi sebelah kanan bawah. Anda bisa melihat contohnya (demo) dengan membuat sebuah komentar di posting ini dan kemudian melihat tanggapan komentar yang nantinya akan kami berikan.

Kode CSS :

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com  */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block .icon.blog-author{
      position:absolute;
      right:0;  /* original code by: http://gubhugreyot.blogspot.com  - April, 08, 2012*/
      bottom:0; 
      background:rgba(174,212,251,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hJW_pb3h8o-m1IO3R8E8LgAmff9zrbkIe6d5JKu9ZiDAgO3oNrlA1ybYjdPtXC8t-DrpOd2tbck56UyfBeWkS_PxgPRCAIofcs6me6QYo_onDFNgWiHgDAsCqQp_Rhx6qsIDO6jwzj8/s128/gubhugreyot-admin-6transp.gif) bottom right no-repeat !important;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover{background:rgba(139,139,139,0.1);
      border:1px solid #eee;
      box-shadow:4px 4px 4px #444;
}
.comment-block:hover .icon.blog-author{
      width:60px !important;
      height:22px !important;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hJW_pb3h8o-m1IO3R8E8LgAmff9zrbkIe6d5JKu9ZiDAgO3oNrlA1ybYjdPtXC8t-DrpOd2tbck56UyfBeWkS_PxgPRCAIofcs6me6QYo_onDFNgWiHgDAsCqQp_Rhx6qsIDO6jwzj8/s128/gubhugreyot-admin-6transp.gif) bottom right no-repeat !important;
      background-size:60px 22px !important;
}

Cara menggunakan kode css :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript).
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin>.
6. Copy kode css dan letakkan di atas ]]></b:skin>
   Keterangan :
   Pilih salah satu kode css. Anda bisa gunakan yang menggunakan opacity effect atau yang menggunakan background rgba.
7. Klik "Simpan Template (Save Template)".
8. Buka blog dan coba hasilnya dengan membuat komentar.

Catatan/Keterangan :

1. Untuk menampilkan tanda tangan author (signature), ganti background image (yang berwarna orange dan red):
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hJW_pb3h8o-m1IO3R8E8LgAmff9zrbkIe6d5JKu9ZiDAgO3oNrlA1ybYjdPtXC8t-DrpOd2tbck56UyfBeWkS_PxgPRCAIofcs6me6QYo_onDFNgWiHgDAsCqQp_Rhx6qsIDO6jwzj8/s128/gubhugreyot-admin-6transp.gif
   dengan background image baru yang berupa image bergambar tanda tangan (signature):
   
2. Untuk membuat background image berupa tanda tangan Author, silahkan ikuti panduannya melalui link di bawah ini:
   Cara membuat tanda tangan di blog
3. Jika ingin menampilkan tanda tangan dan "Admin" secara bersamaan, ganti background image pada syntax : .comment-block .icon.blog-author (berwarna orange) :
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hJW_pb3h8o-m1IO3R8E8LgAmff9zrbkIe6d5JKu9ZiDAgO3oNrlA1ybYjdPtXC8t-DrpOd2tbck56UyfBeWkS_PxgPRCAIofcs6me6QYo_onDFNgWiHgDAsCqQp_Rhx6qsIDO6jwzj8/s128/gubhugreyot-admin-6transp.gif
4. Untuk anda yang tak ingin menampilkan "Admin dan tanda tangan" karena hanya ingin membuat warna background Author Comment berbeda, dapatkan tutorialnya di bawah ini:
   CSS only: Highlight Author Comment
5. Panduan cara backup template, cara cari kode dan berbagai cara menyimpan kode css dapat anda buka di Special Tutorials yang terdapat di menu sebelah kiri halaman.
6. Tutorial cara pasang teks Admin atau tanda tangan Author ini hanya digunakan pada template/blog yang sudah menggunakan system Threaded Comments.
7. Untuk merubah warna background dapat dilakukan dengan merubah background rgba.
8. Bagi yang ingin merubah blog atau template menjadi threaded comments silahkan buka panduannya melalui link di bawah ini :
   Cara membuat blog menjadi Threaded Comments

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Ngahad PAHING, April, 08, 2012

» Happy Blogging - gubhugreyot «