kp3နည္းပညာ၊၁ဝဝ၊မိမိရဲ႕ဘေလာ့ Label ကို Header ေအာက္မွာထားနည္း Wobbling 3D Carousel effect

kp3နည္းပညာ(၁ဝဝ)လာပါျပီဗ်ာ၊ရွားရွားပါးပါးလို႕ေျပာလို႕ရပါတယ္၊က်ေနာ္ေရာက္ဖူးတဲ့
ဘေလာ့ေတာ္ေတာ္မ်ားမ်ားမွာလည္းမျမင္ဖူးဘူးလို႕ေျပာရင္လည္းရမယ္ထင္ပါတယ္၊ဒါေလး
ကေတာ့တကယ္လွပါတယ္၊မိမိရဲ႕ဘေလာ့ Label ကို Header ေအာက္မွာထားနည္းလို႕ေျပာ
ရင္လည္းရမယ္ထင္ပါတယ္။Tab cloud နွင့္နည္းနည္းတူသလိုပါဘဲ၊ဒါေပမယ့္အခုဟာေလး
ကေတာ့ ဝိုင္းဝိုင္းေလးလည္ပတ္ျပီသြားတယ္Wobbling 3D Carousel effect လို႕ေခၚပါတယ္၊
Label နံပါတ္ေတြေပၚေစျခင္ရင္Show number of posts per label လို႕ေပးထားသည့္အကြက္
ေလးကိုအမွန္ျခစ္ေပးလိုက္ရုံပါဘဲ။Label နံပါတ္မေပၚေစျခင္ရင္ေတာ့အကြက္ေလးကိုအမွန္မျခစ္
နဲ႔ေပါ့၊Horizontal menu စတိုင္းေလးလိုေျပာင္းလို့ရပါတယ္။ေအာက္မွာလုပ္နည္းနဲ႕တကြပံုေတြ
ျပထားေပးပါတယ္။က်ေနာ့္ဘေလာ့မွာလည္းေတြ႕ၾကမွာပါ။









၁။ LAYOUT>>> ၂။Edit HTML ႏိုပ္ပါ>>>

အဆင့္။၁။

ေအာက္က Code ကိုရွာပါ။(Ctrl+F)

]]></b:skin>

ေတြ႕ျပီဆိုုရင္အေပၚမွာေအာက္ကCode ကိုထည့္လိုက္ပါ၊

#item{
width:100px;
height:100px;
margin:0 auto;
position: relative;
}
#item ul{
list-style:none;
}

အဆင့္။၂။

ေအာက္က Code ကိုထပ္ရွာပါ။

<div id='content-wrapper'>

ေတြ႕ျပီဆိုုရင္ေအာက္မွာ ေအာက္ကCode ကိုထပ္ထည့္ေပးလိုက္ပါ၊၊

<div id='tag-wrap'>
<b:section class='tag-wrap' id='tag-wrapper' preferred='yes' showaddelement='no'>
<b:widget id='Label6' locked='true' title='Carousel' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<div id='item'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
</div>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

အဆင့္။၃။ေနာက္ဆံုအဆင့္

ေအာက္က Code ကိုရွာပါ။

</body>

tag ေတြ႕ျပီဆိုုရင္ေအာက္မွာ ေအာက္ကCode ကိုထပ္ထည့္ေပးလိုက္ပါ၊၊

<script src='http://coolwebbies.googlepages.com/jquery-1.3.2.min.js' type='text/javascript'/>
<script charset='utf-8' src='http://coolwebbies.googlepages.com/3DEngine.js' type='text/javascript'/>
<script charset='utf-8' src='http://coolwebbies.googlepages.com/Ring.js' type='text/javascript'/>


<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item");

var item = new Object3D(container);

item.addChild(new Ring(200, $("#item ul li").length));

var scene = new Scene3D();
scene.addToScene(item);


var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

axisRotation.x = 1.5;

var animateIt = function(){
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed;
}

scene.renderCamera(camera);

};


setInterval(animateIt, 20);


});
//]]>
</script>

၃။Save Template ကိုႏိုပ္ပါ။ျပီးပါျပီ။။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊ ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

Posted in: BLOGGER HACK