Pasang icon di post-author, post-labels, post-timestamp dan post-comment-link

Jika anda mencermati di dalam box yang terletak di bawah posting maka akan kita lihat bahwa disana terdapat beberapa data yang berkaitan dengan posting.

1. Data post autor :
   Berisi nama si penulis posting atau pemilik blog.
2. Data penerbitan posting:
   Berisi data waktu dan/atau tanggal posting.
3. Komentar (Comments) :
   Berisi data jumlah komentar posting.
4. Labels :
   Label berisikan data label yang ditentukan penulis sebelumnya ketika posting dibuat dan diterbitkan.

Seluruh item data inilah yang akan kita tambah dengan 4 buah icon dengan posisi icon tepat di depan teks. Silahkan anda arahkan cursor ke screenshoot di atas untuk memperbesar gambar. Atau mungkin akan lebih jelas lagi apabila anda buka demo melalui link di bawah ini:

D E M O

Kode CSS :

.post-author{
      background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/user.png);
}
.post-labels{
      background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/grdt-1-label.png);
}
.post-timestamp{
      background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/grdt-1b-clock.png);
}
.post-comment-link a.comment-link{
      background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/komen.png);
}
.post-author,.post-labels,.post-timestamp,.post-comment-link a.comment-link{
      background-size:auto 16px;
      padding-left:22px;
      background-repeat:no-repeat;
      background-attachment:scroll;
      background-position:left center;
}
.post-author,.post-labels,.post-timestamp,.post-comment-link{
      margin-left:auto !important;
      margin-right:8px !important;
}

Cara menggunakan kode css :

1. Login ke Blogger.
2. Klik "Design (Rancangan)".
3. Klik "Edit HTML".
4. Lakukan "Backup template".
5. Cari kode ]]></b:skin>
6. Letakkan kode CSS tepat di atasnya.
7. Klik Simpan "Template (Save Template)".
8. Selesai dan lihat hasilnya di halaman blog.

Catatan/Keterangan :

1. Upload semua icon melalui halaman posting untuk mengganti 4 icon dalam kode css agar loading blog anda tetap terjaga baik!
2. Jika ingin mengganti icon sebaiknya gunakan ukuran 14 x 14 pixel (px) atau 16 x 16 pixel (px) sekalipun background telah disetting pada ukuran 16px (height) dan auto pada width melalui background-size:auto 16px;

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

Posting » Jemuah    LEGI, Maret, 09, 2012

» Happy Blogging - gubhugreyot «