Posted by AlmansuQie™

Emoticon Di Post Entry

Emoticon Yahoo! Messenger..Sebenarnya dah ramai yang buat tutorial ni.. Ana tulis balik untuk simpanan peribadi..Ok untuk yang ini, caranya begini..

Posted by AlmansuQie™

Blogspot Dengan Gaya Wordpress

Pernah tengokkan wordpress?? Kali ini kita buat template kita macam wordpress skit. Kita main sorok-sorok widget.

Posted by AlmansuQie™

Cara Membuat Favicon

Assalamualaikum..ok..Kalau kita buka sesuatu website atau blog maka kekadang kita tengok ada gambar atau icon pada address bar (kat tempat alamat url tu).

Posted by AlmansuQie™

Membuat Label Flash (Blogumus)

Ha tutorial ni Ana ambil dari Blogger Buster. Cantik kalau dapat buat label macam ni..Ini untuk simpanan Ana, kalau Antum minat boleh ikut tutorial ni..

Posted by AlmansuQie™

The Cutest Blog On The Block

Teringin untuk menggunakan transparent background macam ini??Menarik kan?? Ada bayak lagi..Boleh dapatkannya di LamanIni. Untuk menampalnya di blog senang saja.

Posted by AlmansuQie™

Cara Membuat Menu Tab View

Apakah makhluk yang bernama Menu Tab View ni?. Boleh tengok sebelah kanan blog ni. Ana isikan dengan tips2/artikel2 di dalamnya. Kotak menu ni sangat berguna.

Cara Menukar Tarikh Posting kepada Icon Kalender

Langkah pertama ialah kita mesti menukar format tarikh terlebih dahulu, caranya seperti biasa Login dulu ke blogger seterusnya pilih Settings-->Formatting, gantikan"date header format" atau "format tarikh menjadi (mm.dd.yyyy) pilih yang formatnya bulan.hari.tahun contohnya (1.13.2008) ...perhatikan betul-betul kat sini, kalau silap pilih nanti ade masalah dengan icon kalendar tu, kalau dah yakin betul klik save.

Langkah yang kedua pilih menu Layout => Edit HTML . Jangan lupa tandakan pada kotak Expand Widget Templates. Sebelum tu, kalau nak selamat sila back up template ataupun Download Full Template.

Kemudian cari kode ini <TITLE><data:blog.pageTitle/></TITLE>(tempatnya dibahagian paling atas) kalau dah jumpa, letakkan script berikut ini dibawahnya.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://almansuqie-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>



2. Kemudian cari kode ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}



kalau tidak ada cuba cari yang ini

h2.date-header {
margin:1.5em 0 .5em;
}



3. Kalau dah jumpa letakkan script berikut dibawahnya

.dateblock {
background: url("http://www.geocities.com/almansuqie08/yellowcalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}



Kode http://www.geocities.com/almansuqie08/yellowcalend.gif adalah gambar icon kalender. Antum boleh menukarkannya dengan gambar-gambar dibawah ini. Caranya gantikan bahagian yang diboldkan dengan kode gambar berikut ini, contohnya, kalender yang berwarna merah, caranya Antum ganti text bluecalend.gif dengan redcalend.gif. ok.

blackcalend.gifblue2calend.gifbluecalend.gif
greencalend.giforangecalend.gifpinkcalend.gif
redcalend.gifungucalend.gifyellowcalend.gif


Seterusnya kode color:#3366CC; adalah kode warna
tarikh, Antum boleh tukarkan dengan warna yang lain. Kode warna DISINI.

4. langkah selanjutnya cari kode ini <data:post.dateHeader/>, kalau nak mudah copy kode tersebut, kemudian tekan Ctrl-f dan paste di dalam kotak yang disediakan, terus jumpa kan. Pastu gantikan kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>



5. Simpan Template Antum dan lihatlah hasilnya. menjadi ke tidak?

Kalau tulisan bulan dan tarikhnya terlalu keatas cuba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

6. Kalau tarikhnya berubah menjadi tulisan "Undefine" mesti Antum tidak memperhatikan tutorial ini betul-betul. Cuba lihat lagi tutorial ini dari awal dan ikut stepnya betul-betul. ok.

semoga berjaya..

Tips² Terkait



8 Komentar:

paan April 30, 2009 at 7:51 PM  

thanks byk2...aku dah berjaya selesaikan masalah blog aku lyg xde tarikh tue.thanks sgt2 untuk tutorial nie...aku nak kongsikan pada pembaca blog aku nanti,dan akan bagi link kat sini.tq

paan April 30, 2009 at 8:10 PM  

aku dah test..juz ada sedikit problem..aku rasa ada sesetengah post yg trik nie gagal dapatkan maklumat..dia xshow pape kat kotak calendar tue..tapi bila klik pada topik tue,baru kuar date.camne ek ??

AlmansuQie™ April 30, 2009 at 11:29 PM  

ade ke problem mcm tu..xpenah pulak jadi mcm tu..masalah sementara kot. ;)

enta kongsi2 la ngn kawan2..Ana wat ni mmg tuk dikongsi.

Unknown May 4, 2009 at 8:24 AM  

slm,cmne saya wat x jd rr..psl pd step yg ke-2 tuh kod

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

or

h2.date-header {
margin:1.5em 0 .5em;
}


dua2 x jupe...hrp bleh tlg!!

AlmansuQie™ May 4, 2009 at 11:19 AM  

cari kod yang lebih kurang sama..Pada step tu letak lepas kod ini.

.post-date {
margin:0;
padding:5px;
width:60px;
height:50px;
background:#000;
border:1px solid #363636;
position:absolute !important; position:relative; float:left;
display:inline;
}

kembara™ June 3, 2009 at 5:04 PM  

alhamdulillah...jazakallah akhi

Anonymous,  April 3, 2011 at 3:24 PM  

assalam..sy da cuba...jd gak..thanks..tapi mslhnye post jd sblh icon kalendar..camne nk ltk post bwh icon 2?

Post a Comment

1. Berilah Teguran/Komen Walau Sepatah Kata..
2. Komenlah Dengan Nama dan Blog Sendiri
3. Boleh Guna Kod² Seperti Ini <b>, <i>, <a>

© Hak Cipta Terpelihara 2008 [:: AlmansuQie ::]
http://almansuqie-tips.blogspot.com
Template Designed By: AlmansuQie™

Paparan Lebih Kemas Dengan Firefox