Hey! Assalamualaikum readers :)
Apa khabar ? Harinih Cikk Mira nak share tutorial circular date header.
CIRCULAR DATE HEADER FOR YOUR BLOG POST
1. Settings > Language and Format > Date Header Format > Tukarkan 00 Month 0000. *Perlu tukar kalau tak tukar ia takkan jadi.
2. Layout > Blog Post Gadget > Edit > Post Page Options > first option Date > Tukar 00 Month 0000. * seperti tadi
3. Template > Edit html > CTRL +F > Search code dibawah
<h2 class='date-header'>
<span>
<data:post.dateHeader/>
</span>
</h2>
4. Tukarkan code diatas dengan code dibawah
<div id='Date'>
<script>changeDate('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate('');</script>
</div>
5. Sekarang search code </head> dan paste code dibawah diatas code tersebut
<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
6. Paste code dibawah , diatas code </head> , betul2 dibawah script tadi <b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Calendar style date */
#Date {
position:absolute;
background: #ffffff; /* CHANGE BACKGROUND COLOUR - use #HEXVALUE or url("DIRECT-IMAGE-URL")*/
display: block;
width:60px; /* CHANGE WIDTH */
height:60px; /* CHANGE HEIGHT */
float: left; /* CHANGE POSITION OF DATE - left none right */
margin: 0px 2px 0 -60px; /* CHANGE POSITION OF DATE */
padding: 0px;
border: 0;
text-transform: uppercase; /* CHANGE TEXT STYLE - lowercase uppercase */
-webkit-border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
-moz-border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
box-shadow: 2px 1px 7px rgb(102, 102, 102); /* CHANGE SHADOW */
}
.date_day {
display: block;
color:#333333; /* CHANGE DATE COLOUR*/
font-size: 24px; /* CHANGE FONT SIZE OF DAY */
font-weight:normal; /* CHANGE TEXT STYLE - bold normal light */
margin-top:-5px;
text-align:center;
}
.date_month {
display: block;
font-size: 15px; /* CHANGE FONT SIZE OF MONTH */
font-weight:normal; /* CHANGE TEXT STYLE - bold normal light */
color:#ccc; /* CHANGE MONTH COLOUR */
margin-top:4px;
text-align:center;
}
.date_year {
display: block;
color:#333333; /* CHANGE YEAR COLOUR */
font-size: 10px; /* CHANGE FONT SIZE OF YEAR */
margin-top:-8px;
text-align:center;
}
</style>
</b:if>
Perhatian
Nota Kaki : #thiscolour > you can change the css
korang boleh tukar background, color, font size , font :)
Selamat mencuba ^^
mmg dia akan trus duk sbelah kiri eh?
ReplyDeleteYes dear :)
Deletenice tuto! boleh try. makin cntiklah boleh ni ^^
ReplyDeletehee. Silah cuba dear ^_^
Deletenice sharing kak.. dah lama tak pergi blog ni.. bila pergi kali ni, woww!! lawa gila blog ni ><
ReplyDeletehehe >.< Thanks dear :)
Delete