Cara Letak Date Header Icon

Penulis : Nurul Fatihah Shahronizam Masa : 14:58 Komen : 3 Tag :

Evening kawan²...Hari nie Nurul nak ajar buat tutorial lagi!  Mesti suka kanSambil lompat² Nurul nie memag baik la...ngeh3~ Okay, tutorial kali ini Nurul nak buat date header icon. Kalau kawan² tak tahu, try tengok gambar kat bawah nie..Nurul ada letak dua contoh... 








Jom ikot step nie untuk jadi kan date header cantik macam date header Nurul...


Step 1 : Dashboard > Design > Edit HTML > Tick pada kotak Expand Widget Templates


Step 2 : Tekan ctrl+f dengan serentak dan cari kod nie..

.date-header {

Step 3 : Kalau kawan² cari code di atas tiada, kawan² letakkan code .date-header { dibawah code ini :   /* Posts 



Step 4 : Kemudian copy code ini dibawah code yang kawan² cari tadi. INGAT!! Pastikan paste code ini betul² diBAWAH code .date-header {
height:40px;margin:-15px -20px -500px -115px;padding: 30px 300px 105px 10px;background: url( URL ICON) no-repeat;position:absolute !important; position:relative; float:right;text-align: center;font-family: tahoma;color: #FFFFFF;
*warna pink : gantikan dengan code icon anda


***Bagi pengguna simple template, pastikan padam code ini dulu....
.date-header span {  background-color: $(date.header.background.color);  color: $(date.header.color);  padding: $(date.header.padding);  letter-spacing: $(date.header.letterspacing);  margin: $(date.header.margin);
Contoh macam nie.....

Step 5 : Preview dulu, kalau da jadi boleh la save...!

Senang bukan kalau senang, apelagi bOleh la cuba try... (da cuba, try lagi..kalau tak jadi jugak...tak tau la nak cakap ape....huhu~)


Sini ada freebies beberapa url icon utk kawan² :-

http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/purpledate.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/pinkdate.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/orendate.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/greendate.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/birudate.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/pink.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/gray.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/green.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/pink1.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/gray1.png
http://i1105.photobucket.com/albums/h346/ayusleeping11/date%20header/purple1.png






















Selamat Mencuba!

A true muslimah : never forget that Islam, which encourages her to look attractive under the permitted limits, is also the religion that's warns her against extravagance ^_^

3 comments:

  1. dah try buat, tapi tulisan dia tak mau muat dengan image tu. geram pulak kite..

    ReplyDelete
  2. Kenapa date-headernya malah berada di post footer?

    ReplyDelete