kp3 Marquee Post title test

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>

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

<div id='content-wrapper'>

<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>

</body>

<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>

ဒါေလးကေတာ့မိမိရဲ႕ဘေလာ့ Sidebar လင့္ခ္ေတြရဲ႕အေရွ႕မွာေပၚတဲ့ Icons ပံုေလးေတြကို မိမိႀကိဳက္
ႏွစ္သက္သည့္ပံုထားခ်င္ရင္ပါ။တခ်ိဳ႕ Template မွာေတာ့ Icons ပံုေတြ Autoရိွပါတယ္၊တခ်ိဳ႕ၾကေတာ့
မပါဘူးေပါ့ေနာ္။Auto ရွိျပီးသား Icons ေတြလည္းေျပာင္းခ်င္ရင္ေအာက္မွာေျပာင္းနည္းေလးပါ။

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar ul li {
background:url("ဤေနရာမွာမိမိရဲ႕Icon or  image လင့္ခ္ထည့္ပါ") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $bordercolor;
line-height:1.4em;
}