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 ^^




You May Also Like

24 comments

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

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

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

    ReplyDelete
  4. errr tak memberakn blog ke wat mcm ni shida?

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

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

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

    ReplyDelete
  8. menarik tuto ni.. betul2 dok luar kotak ^^

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

    ReplyDelete
  10. timakasih :) .. very helpful ~

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

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

    pening-pening sikit, but i will try..

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

    ReplyDelete
  14. kak shidaa ! da dapat buat ! mekacehhh :D

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

    ReplyDelete
  16. 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.