Jan 22, 2011

tutorial tajuk post korang bergerak

Wahhh... kalau dulu letak icon- icon comel kat sebelah tajuk, macam yang kat atas ni. Sekarang? kita dah boleh buat tajuk tu bergerak- gerak. Kira macam slide la konon kannnn...? hehe.. macam semat je bunyi. Korang nak buat ke? Meh..kita usha jap! Yang tak nak tu diam- diam uddaaaa...hehe

Akey, mula- mula tu korang kenalah LOG IN kat dashboard korang dulu kan. Pastu, pergi DESIGN --> EDIT HTML. Jangan lupa untuk klik Expand widget k. Yang tu memang penting, kalau korang tak klik, widget- widget yang ada takkan 'berkembang' dan bila korang nak cari code tu pun memang takde seyh!


So bila dah klik expand widget tu, senanglah korang nak cari code kan? Sekarang, bagi memudahkan korang untuk cari code, klik CTRL+F pulak. Takdelah korang nak cari sesatu dengan scroll habis- habis kan? hehe. Dah ek? lepas dah klik CTRL+F tu, mesti ada keluar gambar ni kan?



Akey, korang copy code kat bawah ni dan paste kan kat kotak yang keluar tadi.

<b:includable id='post' var='post'>


Mesti akan automatik macam ni.


Pastu,korang tambahkan code yang berwarna biru ni kat code di dalam template tu. Macam ni...

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>




Takpun, kalau korang rasa pening dan susah. Korang buat macam ni k.


Highlightkan code macam kat atas ni dan gantikan dengan code baru ni.

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>


Jeng! jeng! Preview dulu sebelum save akey? Kalau takde probs, dah boleh save dan jangan lupa untuk backup template k! 


Jan 16, 2011

letak moving text kat cursor

Dah nak seminggu lebih gak aku tak update belog ni ek, haha.. tapi aku rajin gak nak blog walking. Bukan aku tak online pun. Internet dan aku memang tak boleh nak dipisahkan, huahua... Memandangkan hari ni hari ahad dan aku telah ditinggalkan di bilik berseorangan, maka dengan baik hatinya aku di sini sedang menaip dengan menggunakan papan kekunci! haha, lolx... skema gegiler.

Akey, hari ni tetibe aje nak buat tuto pasal cursor dengan moving text. Tahu tak apa yang aku cakap ni? Alaa... kalau korang gerak sikit je anak panah ni, ada laa tulisan- tulisan yang join sekaki nak sibuk- sibuk gerak sekali. Macam anak ayam yang tak boleh berenggang dengan ibunya tu.


So, macam mana nak buat tu? Kalau berminat sila baca untuk yang seterusnya akey?

Aku tak pasti kalau benda ni akan memberatkan belog korang atau tidak. Yang pasti dah ramai yang buat pasal ni. Tapi aku tak buat, takkk minat! Aku rasa semak kot.. kalau boleh, macam nak kasi putus je tulisan tu dari anak panah, ngaaahahaha...

By the way, aku dah buat kajian, ececeh... aku rasa benda ni takkan buat belog korang berat. Cuma cursor tu ajela ambil masa sikit nak kuar benda tulisan- tulisan ni. Haaa! Cakap tak serupa bikin kan? kejap tadi tak pasti, sekarang lain pulak! Hahaha... eh sesuke aty aku r... ade ku kisah? huhu.. tak pasal- pasal kena penampar bila cakap macam tu, betul tak? betul tak?

Dah.... dah.. kalau nak buat, cepat copy code ni.



<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'verdana';
color: #0224FE;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "TEKS ANDA PADA CURSOR";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>


Ngaaa... lupa nak cakap! Korang letak code ni kat Add gadget k.. camne?

Dashboard --> Design --> Page elements --> Add gadget --> Html/ javascript


Tapi, sebelum tu, korang kena gak ubah something! Takkan copy dan terus save kan? Akey, so yang korang kena ubah cuma tulisan yang berwarna tu aje. Di mana warna biru tu korang ubah dengan warna kesukaan korang. Warna tu untuk warna tulisan korang kat cursor tu dan korang boleh rujuk kat sini pasal code warna tu. Klik sini.

Lepas tu, untuk tulisan yang berwarna hijau tu pulak, korang ubahla dengan apa- apa je. Korang nak ubah dengan nama korang ke... nama nenek ke.. pets korang ke... apa- apa jela. Lepas dah ubah apa- apa yang patut tu, korang dah boleh save dan lihat je apa hasilnya k! selamat mencuba.. ^^