Loading

Minggu, 24 Januari 2016

Blogger Tutorial: Membuat Icon Post Author, Icon Time stamp, Post-Label dan Icon Komen

Dulu sih, saya sering mencari icon post. Tapi, setelah belajar CSS, ini buatan ku! Langsung aja buat icon nya ya! Ikuti tahap tahap berikut.
  • Login Ke blogger
  • Pilih Blog
  • Ke template > edit html
  • Cari kode ]]></b:skin>
  • Paste kode dibawah ini tepat di atas kode ]]></b:skin>

/* Icon Post by Watercan */
.post-author{ 
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg36193JOjolJogO3enJa-qDgV9kaolZie15WstVE11l3oOkdw0_KnRX093VCahVKhhyI-5MDwyKltqP0fYhiqA_xDgw6mDtRDpEatSdhF7Pn1fyx9yeGIvREIOrNMQ5o2dyHNSeuPc-c6n/s512-Ic42/user.png); 

.post-labels{ 
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtU45968qws0eSlpTqTaML3h7lI4hAX7sNfPqU5b6mmFP7Sndr6wYc3tbPcdqlmoHEAhIz7yJAkFhGxMygGBBE2Tgo0tJGHJ_HiHuJCEwQjXF4VsgJaZhCZDKlOBdBCaZ8oOIO4O8U6KUi/s512-Ic42/label.png); 

.post-timestamp{ 
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_9wTDGprMBnldAv9q_c23hUo0ELR3wd4vcx32CnfMruH5lbIGYK7Rfmm057IxznyUlCW04vg8i4Ne8W3HJJU2SNrAsm3AaxOgFuFWPnjrf8B_bJeiNnqwbMQtQ02fbsRqfPGn71d-iS4_/s256-Ic42/Clock-icon-1106091102.png); 

.post-comment-link a.comment-link{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcA4aGfXyXoEgJSZ6L_bkgEzZ41CWXpVugfGioUidFNNPqMxX-RIDQALCZIrSSIwSkonRq3QZTRDHDLTBgIcRTQ-WCNHnvYD6s0P3ExdQ3erXv2EG21RtwC-1G_-zpAcy0BR5wV9TGo7o4/s256-Ic42/comments-icon.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; 
}

Keterangan
Copy script dgn CTRL + C jgn right click
Minimal enam belas (16) Piksel. (16px)
Ganti teks yang berwarna merah dengan URL icon post author
Ganti teks yang berwarna orange dengan URL icon post label
Ganti teks yang berwarna kuning dengan URL icon post timestamp
Ganti teks yang berwarna hijau dengan URL icon comment

  • Klik Simpan
Dan lihat hasilnya seperti apa?








Demikian tips nya, selamat mencoba :)

Tidak ada komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...