tutorial : cara nak buat DATE pada luar body main blog

by - 22:58:00

   Assalamualaikum, pecae upon you.

Salam semua, so seperti yang dijanjikan shida akan buat TUTORIAL pada hari ini, tutor ini pun terpaksa delay before ni sebab ada beberapa entri yang wajib shida publish dahulu. Kali ini tutorial ini diminta oleh TehaaNFM kesian dia dah lama tunggu shida buat tutorial ni.
Biasa tutorial ini yang nak kan kelainan pada bahgian date entri dimana ia terletak diluar body main blog. Biasa dan tempat asalnya di atas tajuk entri kali ni disebelah tepi dan boleh kita cantikkan lagi dengan mengenakan background/hiasan pada date itu nanti. So let's do it :)

1. login blog >> design >> editHTML >> cari kod ini dibahagian Posts >>  .date-header {
dah jumpa kod yang nak dicari buang dulu kod yang asal seperti gambar 1 dibawah dan copy dan paste kod yang dalam blockquote shida ni dan gantikan pada tempat kod yang dibuang tadi seperti gambar 2.
height:40px; margin:-15px -20px -500px -170px; padding: 65px 300px 105px 65px; background: url(letak LINK GAMBAR) no-repeat;position:absolute !important; position:relative; float:right;text-align: center;font-family: tahoma; color: #000000; font-size: 18px;
ok korang dah buang kod lama masukkan kod baru diatas ni pada bawah kod yang kita cari tadi. Sebelum tu korang tengok pada bahagian yang shida warnakan dengan warna biru kod itu boleh diubah mengikut cita rasa korang ok. untuk warna boleh tengok kodnya disini > HTML color code
Selain itu korang juga boleh ubah kedudukan pic tu sekiranya korang design sendiri, kod yang shida beri mengikut size gambar background date yang shida design ok. untuk ubah kedudukan image guna "margin" kalau kedudukan date tu guna "padding" Kalau confius sila rujuk pada shida.
Untuk link gambar shida bagi 5 design simple untuk korang pakai so pilih saja ok. Dah pakai cakap lah thanks tak susah kan ^_^ nak design sendiri pon boleh kalau rajin :)
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-69JsxTsCzsjN0pW3GNOwW9L_SRt3EiYQPO50ROLmJxhTh00g28Hl5eH8Y8TvCBpdsQh1PbGYNweAhpr9E8i71ZYWau9Knpp0Gsq_EtMkABAn8GPn_Gge-BMmUBOIs6054irTEtI2w8/s1600/date1.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifW2xOA-tEQ2TdRMJvf7qSZaRwSgakWLtzEEJaeb-Uj13mAfqBqeJLIKAuH0yh8njf4HpOYQ6crG4cRW5ofdTbHXmU_Qz-bBnjUj01YdRIFXoPOvIwbywK0AF2W9kHbtfZnqBE2Px2cHM/s1600/date2.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOb56WA1B78ebZ-YvHNy5ieiVDh4f72t3RrHET6Z1QAb-iY7SmrPCjJju5eCZFHTQSvEC7eQLM1KW_SnPzeZAAwhGFf7eTNsPs4vN2AcSoKQxBABWmYF7YII5peD3q5yl0qm5JgCtEF6M/s1600/date3.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW9kZ0G3wLoAMH-Fj_icsjAsqz2jfV-VZPgNCiiEQsL0zlZnUHocnoJMkB9VUriF2NjkvsO0VHMSQ2jw0AwWVqEtPE8GC6BT314tXNuoHTsLudUP_q8FEYUa7raMz4diLfJcUqN5kPF64/s1600/date4.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMndofT1oWgXRTtMIAkcGkywNISqoBlwdUPlQtQTfS7AfuvLaOO7dlhJiWHeudGOw58-UIwBrwpsdZsf1xon46sSTa8zFo5yW21nMyXVT69f6hPQCNwbb4iIqW7F4fZu-XSsQPJaum11c/s1600/date5.png

selepas dah siap edit dibahagian editHTML korang edit pula bahagian >> page elements!
masuk page elements >>  Blog posts >> edit >> pilih tarikh seperti dalam gambar diatas ok :)
dah siap semuanya korang dah preview dah puas hati boleh lah SAVE ok!

^^ Selamat Mencuba ^^




Share
Tweet
Pin
Share
Tags : , ,

You May Also Like

24 comments

  1. Azizah green line3 March 2012 at 23:16

    wah cantik la contoh2 gambar date tu...kira kalau buat..luar body post jadi lebar ek..

    ReplyDelete
  2. Sihatimerahjambu3 March 2012 at 23:29

    Macam menarik je kan buat macam shida ni..Ada masa nak try lah ^__^ thanks shida share tuto ni

    ReplyDelete
  3. b0an3 March 2012 at 23:34

    lawo2..tpi blog boan xsesuai wat g2..waaaaa.. T_T

    ReplyDelete
  4. Cik T3 March 2012 at 23:37

    sis, tenkiu so much!! :)

    ReplyDelete
  5. Unknown4 March 2012 at 01:37

    errr tak memberakn blog ke wat mcm ni shida?

    ReplyDelete
  6. DUNIA sesawangku4 March 2012 at 02:23

    cantik !
    rasa nak try buat je..
    Hehehe..
    BTW, thank ya !

    ReplyDelete
  7. Zaza Iman4 March 2012 at 09:54

    nice tutor..thanks :)

    ReplyDelete
  8. FIZGRAPHIC5 March 2012 at 00:35

    best! nak buat!

    ReplyDelete
  9. Unknown5 March 2012 at 16:55

    shida cmner nk letak pada picture templet n.. sheda tuka new blogger interface label kt bawh post ilang la cmner nk letak blik??

    ReplyDelete
  10. Ezad Skytech5 March 2012 at 22:41

    wahhh...menarik ni..boleh la try2 nanti kalau nak redesign blog..hee~

    ReplyDelete
  11. caliph shuriken6 March 2012 at 20:42

    menarik tuto ni.. betul2 dok luar kotak ^^

    ReplyDelete
  12. Unknown4 April 2012 at 16:39

    terimakseh..cun la..alot of credits to u...

    ReplyDelete
  13. Unknown15 June 2012 at 09:22

    timakasih :) .. very helpful ~

    ReplyDelete
  14. KasihDariLaut17 June 2012 at 14:13

    kak..tuto ni jadi but..napa ada garisan ah? emm..

    ReplyDelete
  15. sHaRiNa eLyaNa27 June 2012 at 15:04

    @KasihDariLaut same to me..napa ada garisan ya??

    ReplyDelete
  16. Azah Rahaman29 July 2012 at 00:22

    tak jadi :(

    ReplyDelete
  17. Unknown12 September 2012 at 22:29

    wah..power cik shida kita.. :) thanks for the tutorial..

    pening-pening sikit, but i will try..

    ReplyDelete
  18. Unknown13 September 2012 at 02:12

    tak jumpa la :(

    ReplyDelete
  19. Cikrosecute15 November 2012 at 15:24

    Sis dah try jadik...tapi cam tak sesuai pulak gan template hihihi

    ReplyDelete
  20. Mimin Adam29 December 2012 at 00:44

    kak shidaa ! da dapat buat ! mekacehhh :D

    ReplyDelete
  21. Anonymous12 January 2013 at 18:34

    nak satu yer

    ReplyDelete
  22. Anonymous26 February 2013 at 16:54

    thanks shida for the tuto.. saya dah try n menjadi.. thanks a lot ya..

    ReplyDelete
  23. najiahs17 July 2013 at 09:12

    amik 1 yer.thx..:D

    ReplyDelete
  24. Farah16 September 2014 at 20:37

    thanks for this tuto sis. Kita update blog guna tuto sis ni,hehe. Thank you =D

    ReplyDelete

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url yang mencurigakan, mengandungi kata-kata maki hamun yang tidak menyenangkan tidak akan disiarkan. Harap Maklum dan Terima Kasih.