tutorial : cara nak buat DATE pada luar body main blog | Dunia sebenar Shida tutorial : cara nak buat DATE pada luar body main blog

Klik Banner untuk lebih lanjut (iklan berbayar) nak tempah? (klik sini)


Saturday, 3 March 2012

tutorial : cara nak buat DATE pada luar body main blog

   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 :)
 http://2.bp.blogspot.com/-j6WD_zI2epU/T1Int3MQ4dI/AAAAAAAAAIg/_-fjBYdaCl0/s1600/date1.png
 http://4.bp.blogspot.com/-Tli_JVj7NIs/T1IhOVdpN_I/AAAAAAAAAIY/Whbt3NKNIcM/s1600/date2.png
 http://4.bp.blogspot.com/-IE945fTcu6A/T1Ip2EbPZ6I/AAAAAAAAAIw/TUZROQepS3o/s1600/date3.png
 http://3.bp.blogspot.com/-ZQMI6Ghkuq8/T1IrXp2NgdI/AAAAAAAAAI4/7c2sk3hi1lI/s1600/date4.png
 http://1.bp.blogspot.com/-RVE523beNuo/T1It5jn-ESI/AAAAAAAAAJA/pfyyJLFDMfE/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 ^^




24 Jari Ohsem:

Cik Azizah said...

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

Azhafizah[フィザ] said...

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

b0an said...

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

TehaaNFM said...

sis, tenkiu so much!! :)

Muhammad Saiazuan Norhalik said...

errr tak memberakn blog ke wat mcm ni shida?

peyansanstaro said...

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

^_^ Zaza Nur Iman said...

nice tutor..thanks :)

Hafizzi Aziz said...

best! nak buat!

Sheda Argos ツ said...

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

Ezad Skytech said...

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

caliph shuriken said...

menarik tuto ni.. betul2 dok luar kotak ^^

jia creatifelt said...

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

Muhammad Saifullah said...

timakasih :) .. very helpful ~

KasihDariLaut said...

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

sHaR!Na eLyaNa said...

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

Ohh Azza said...

tak jadi :(

muhammad asyraf said...

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

pening-pening sikit, but i will try..

Dhia Dirham said...

tak jumpa la :(

Che Rosliza Che mat said...

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

MiMiNadam said...

kak shidaa ! da dapat buat ! mekacehhh :D

Liyana Syarafina said...

nak satu yer

akumanish said...

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

najiah shaharain said...

amik 1 yer.thx..:D

Nur Farahuda said...

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