Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

7 komentar:

 
GR | Edited by | gubhug reyot