Showing posts with label BLOGGER HACK. Show all posts
Showing posts with label BLOGGER HACK. Show all posts

Wednesday, December 30, 2009

kp3နည္းပညာ၊၁၃ဝ၊ဘေလာ့လင့္ခ္ေတြမွာ Multi-Color Effect ခ်င္ရင္

ဒီေန႕တင္မယ့္ POst ေလးကေတာ့ဘေလာ့လင့္ခ္ေတြမွာ Multi-Color Effect လို႕ေခၚတဲ့
ဘေလာ့လင့္ခ္ေတြကို Mouse နဲ႕ေထာက္ရင္အေရာင္ေတြအမ်ိဳးမ်ိးးေျပာင္းေအာင္ထည့္ျခင္တဲ့ဘေလာ့
မိတ္ေဆြေတြအတြက္ပါ၊ေအာက္မွာပံုနဲ႕တကြ Code ေပးထားပါတယ္။ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအ
စဥ္ျမဲေလးစားလၽွက္ kp3မိသားစု၊ဥပမာသြားၾကည့္လို႕ရေအာင္Demoလင့္ခ္ထည့္ေပးထားပါတယ္။


DEMO
၁။Layout

၂။Edit HTML

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

</head>

ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္ကCode ကိုထည့္ပါ
<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID

if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}


function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function ChangeColor()
{
objActive.style.color = makeColor();
}


function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>

</script>

၃။Save Template button.ႏိုပ္ပါ။။

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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Tuesday, December 29, 2009

kp3နည္းပညာ၊၁၂၉၊ဘေလာ့ Post Title Font ကိုအၾကီးအေသးေျပာင္းနည္း

အခုတင္တဲ့ Post ေလးကေတာ့လိုအပ္ရင္ေတာ့အသံုးဝင္ပါတယ္၊မလိုအပ္ရင္ေတာ့အသံုးမဝင္
ဘူးေပါ့ေနာ္..ဟီး..ဘေလာ့ Post Title Font ကိုအၾကီးအေသးေျပာင္းနည္းေလးပါ၊က်ေနာ္လည္းအား
လံုးၾကည့္လို႕ရေအာင္အၾကီးနဲ႕နမူနာေျပာင္းသံုးထားပါတယ္။ေအာက္မွာေျပာင္းရမယ့္ေနရာေလးျပေပး
ထားပါတယ္။

၁။Layout

၂။Edit HTML

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

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font- weight:normal;
line-height:1.4em;
color:$titlecolor;
}

၃။Save Template button.ႏိုပ္ပါ။။

ေတြျပီဆိုရင္ Font-size မိမိၾကိဳက္သလိုေျပာင္းေပးလိုက္ပါ,

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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Saturday, December 26, 2009

kp3နည္းပညာ၊၁၂၅၊မိမိရဲ႕ဘေလာ့Footer Sectionမွာ 4-Columns ထည့္နည္းေလး

ဒါေလးကလည္းၾကိဳက္ၾကမယ္ထင္ပါတယ္မိမိရဲ႕ဘေလာ့Footer Sectionမွာ 4-Columns
ထည့္နည္းေလးပါ၊3-Columnsကသံုးတဲ့သူေတြမ်ားလာေတာ့မတူေအာင္ေျပာင္းသံုးခ်င္တဲ့မိတ္ေဆြ
ေတြအတြက္ေပါ့ေနာ္၊Footer Sectionမွာ3-Columnsထည့္နည္းကေတာ့ kp3နည္ပညာ၊၅ဝ၊ရိွပါတယ္။
ေအာက္မွာပံုႏွင့္တကြ Code ေပးထားပါတယ္။



၁။Layout

၂။Edit HTML

ေအာက္ကCodeကိုရွာပါ၊Press Ctrl + F

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ေတြ႕ၿပီဆိုရင္ အလယ္ကCodeနီေလးေနရာမွာေအာက္ကCodeကိုထည့္ေပးလိုက္ပါ၊
<div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

၃။Save Template button.ႏိုပ္ပါ။။
errors တက္မလာဘုူးဆို၇င္cssဘက္သြားၾကေအာင္ေနာ္
ေအာက္ကCodeကိုထပ္ရွာပါ၊
]]></b:skin>

ေတြ႕ၿပီဆိုရင္အေပၚမွာ ေအာက္ကcssကိုထပ္ထည့္လိုက္ပါ၊
#footer-column-container { border: .3px dotted #cccccc;}

.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}

.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}

.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}

.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}

.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

၄။Save Template button.ႏိုပ္ပါ။။ျပီးပါျပီ။။

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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Thursday, December 17, 2009

kp3နည္းပညာ၊၁၂ဝ၊မိမိရဲ႕ဘေလာ့ Post ေအာက္မွာ Printer Button ေလးထည့္နည္း

ဒါၾကေတာ့မိမိရဲ႕ဘေလာ့ Post ေအာက္မွာ Printer Button ေလးထည့္နည္းေလးပါ။ပိုျပီးလွသြားမယ္ထင္တာဘဲ။
Printer Link ကေတာ့ kp3နည္းပညာ၊၄၁၊မွာေတာ့ျပထားျပီးသားပါ၊အခုဟာကေတာ့ Buttonေလးနဲ႕ထားခ်င္တဲ့
သူေတြအတြက္ပါ။နွစ္ခုေပးထားပါတယ္၊ၾကိဳက္တာယူသံုးလို႕ရေအာင္၊ေအာက္မွာပံုနဲ႕ကြ Code

၁။Layout

၂။Edit HTML

၃။Back up လုပ္ေပးပါ။(downloading full template)

၄။Expand Widgets Templateကိုအမွန္ျခစ္ေပးပါ။

၅။Check Expand Widgets Template(CTRL + F)ျဖင့္ရွာပါ၊၊

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

<p><data:post.body/></p>


ေတြ႕ျပီဆိုရင္ေအာက္က Code ႏွင့္အစားထိုးေပးလိုက္ပါ.။
<!-- Add Printer Button by http://kp3family.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>
<img src='http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif'/></a></b:if>
<!-- End Add Printer Button by http://kp3family.blogspot.com/-->


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

ေနာက္တခုကေတာ့ေအာက္မွာပံုနဲ႕ Code


<!-- Add Printer Button by http://kp3family.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img
src='http://i1020.photobucket.com/albums/af326
/bookwise77/printer-button-2.gif'/></a></b:if>
<!-- End Add Printer Button by http://kp3family.blogspot.com/-->


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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Sunday, December 13, 2009

kp3နည္းပညာ၊၁၁၇၊ဘေလာ့ Header မွာပံုေတြထည္႕နည္းေလး

အခုတင္တဲ့ Post ေလးကေတာ့အားလံုးသိၾကမယ္လို႕လည္းေမ်ာ္လင့္ပါတယ္၊ဒါေပမယ္႕Cbox မွာ
ေတာင္းဆိုထားတာေလးျဖစ္လို႕ပါ။ဘေလာ့ Header မွာပံုေတြထည္႕နည္းေလးႏွင့္စာတမ္းေတြသြား
တာေတြထားနည္းေလးပါ။

၁။Dashboard

၂။Layout

၃။Edit HTML

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

/* Header
-----------------------------------------------
*/

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url(ဤေနရာမွာပံုရဲ႕လင့္ခ္ထည့္ေပးပါ) no-repeat top right;
}

သို႕မဟုတ္

/* Header
-----------------------------------------------
*/

#header-wrapper {


background:url(ဤေနရာမွာပံုရဲ႕လင့္ခ္ထည့္ေပးပါ) no-repeat;
height:260px;
width:980px;
margin-left:-10px;
margin-top:-16px;
border:0px solid $bordercolor;
}

မွတ္ခ်က္။ ။ Codeျဖင့္ထည့္မယ္ဆိုရင္ <style> ႏွင့္ <style> ၾကားမွာထည့္ေပးပါ။

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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Thursday, November 19, 2009

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မိသားစု

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Sunday, November 15, 2009

kp3နည္းပညာ၊၉၄၊ဆိုက္ဘားႏွစ္ခုမွာfooster မွာ 3 columnထည္႔နည္း

ဒါေလးကေတာ့ Cbox ထဲကဘေလာဂါ ့မိတ္ေဆြတစ္ေယာက္ေတာင္းဆိုထားတာေလးပါ၊
ေအာက္ကေကာ္လန္သံုးခုခြဲထည့္တာေလးပါ၊ kp3နည္းပညာ၊၅ဝ၊ မွာရိွပါတယ္၊ေအာက္ပံု



အကယ္၍ဆိုက္ဘားႏွစ္ခုဆိုရင္ေအာက္ကျပထားသည့္ Codeကိုရွာေတြ႔မွာမဟုတ္ပါဘူး၊

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ဆိုက္ဘားႏွစ္ခုမွာေအာက္ကျပထားသည့္ Code ကိုရွာပါ၊
</div> <!-- end content-wrapper -->
<div class='footer'>,
<div class='right_footer'>

ေတြ႕ျပီဆိုရင္ေအာက္ကcodeအတိုင္းေပါ႔

</div> <!-- end content-wrapper -->ေအာက္က Code
<div class='footer'>,
<div class='right_footer'>ဒီနွစ္ခုေနရာမွာေအာက္က code နွင့္အစားထိ္ုးေပးလိုက္ပါ။
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ထံုးစံတိုင္း
<b:section class='footer' id='footer'/>
ေနရာမွာ kp3နည္းပညာ၊၅ဝပးထားသည့္အတိုင္းလုပ္လိုက္ပါ ။

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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Thursday, November 5, 2009

kp3နည္းပညာ၊၈၉၊မိမိရဲ႕ဘေလာ့Post ကေန႕စြဲေလးကိုCalendar style နဲ႕ေျပာင္းခ်င္ရင္

မိမိရဲ႕ဘေလာ့Post ကေန႕စြဲေလးကိုေအာက္ကပံုအတိုင္း Calendar style နဲ႕ေျပာင္းျခင္ရင္
ေပါ့ေနာ္၊နည္းနည္းေလးၾကည့္ရတာပိုလွသြားတာေပါ့ဟီး...
ေအာက္မွာထည့္နည္းေလးကေတာ့ ၃ဆင့္ေလာက္ရိွေပမယ့္ရွင္းပါတယ္စိတ္ဝင္စားရင္ေတာ့



၁။ Layout.

၂။Edit HTML

၃။Download the Full Template

၄။ေအာက္က Code ကိုရွာပါ။Ctrl+F ရွာရင္ျမန္ပါတယ္

<data:post.dateHeader/>

၅။ေတြ႕ျပီဆိုရင္ေအာက္က Code ႏွင့္အစားထိုးလိုက္ပါ၊
<div id='date'>
<script> replace_date(&#39;<data:post.dateHeader/>&#39;);
</script>
</div>

၆။ေအာက္က Code ကိုထပ္ရွာပါ၊
</head>

၇။ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္လိုက္ပါ၊
<style>
/* To view the year change the &quot;none&quot; to &quot;block&quot; */
#date {
display: block;
float:left;
margin: 0 5px 0px 0;
padding: 1px 15px 15px 10px;
color: #333;
background: transparent url(http://bloggertipspro.googlepages.com/Calendar.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.month {
margin: 0px 5px 0px 9px;
color: #fff;
display: block;
font-size: 10px;
font-weight:bold;
}

.year {
margin: 0px 5px 0px 6px;
display: block;
font-size: 10px;
}

.day {
margin: 5px 5px 0px 7px;
display: block;
font-size: 20px;
font-weight:bold;
}
</style>

အေပၚက Code ကေတာ့ CSS codeေပါ့ေနာ္ Calendar နဲ႕တူေအာင္ကူညီေပးတဲCode ပါ
ပံုလင့္ခ္ေနရာမွာမိမိနွစ္သက္သည့္ Calendar ပံုထည့္သံုးလို႕ရပါတယ္။

ဒါကေတာ့ပံုရဲ႕လင့္ခ္ပါ(http://bloggertipspro.googlepages.com/Calendar.png)

၈။ေနာက္ဆံုးအဆင့္ေအာက္က Code ကိုထပ္ရွာပါ
<body>

၉။ေတြ႕ျပီဆိုရင္ေအာက္မွာ ေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။
<!--date image background-->
<script>
function replace_date(d)
{
var da = d.split(&#39; &#39;);
month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
day = &quot;<div class='day'>&quot;+da[0]+&quot;</div>&quot;;
year = &quot;<div class='year'>&quot;+da[2]+&quot;</div>&quot;;
document.write(month+day+year);
}
</script>
<!--date image background-->

၁ဝ။Save template ကိုႏိုပ္လိုက္ပါ။ျပီးပါျပီ။။။

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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Wednesday, November 4, 2009

kp3နည္းပညာ၊၈၆၊မိမိရဲ႕ဘေလာ့ Sidebar ေနာက္ခံအေရာင္ေျပာင္းနည္းေလး

မိမိရဲ႕ဘေလာ့ Sidebar ေနာက္ခံအေရာင္ေျပာင္းနည္းေလးပါ။သိပ္ေတာ့အေရးမၾကီးပါဘူး၊
သူမ်ားနွင့္မတူေအာင္လုပ္ျခင္ရင္ပါ၊ေအာက္မွာေပးထားသည့္ Code အတိုင္းထည့္ေပးပါ၊
တခုခုလြဲမွားခဲ့ေတာ့ရမယ္မထင္ဘူး။



မွတ္ခ်က္-မိမိရဲ႕Template ကို Backup လုပ္ေပးျပီး "Download Full Template" link.နိုပ္လိုက္ပါ။

၁။ Layout.

၂။Edit HTML

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

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

ေတြ႕ျပီဆိုရင္ေအာက္ကဟာေလးနဲ႕အစားထိုးေပးလိုက္ပါ၊

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE

sidebar float */

background-image:url('ဤေနရာမွာမိမိရဲ႕ပံု URL ကိုထည့္ပါ');

background-repeat: repeat;

background-attachment: scroll;

background-position: right top;}

}

၃။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။။။

အခမဲ့ Sidebar ေနာက္ခံက ဒီမွာသြားၾကည့္လိုက္ပါ

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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Tuesday, October 27, 2009

kp3နည္းပညာ၊၇၆၊Add Page Elements ကို Blog Header မွာဘယ္လိုထည့္ရလဲ

မိမိရဲ႕ဘေလာ့ပိုမိုၿပီးလွပေစရန္(Header)ေပၚမွာ Add Page Elementထည့္နည္းေလးပါ၊
မသိၾကေသးတဲ့ခ်စ္မိတ္ေဆြေတြအတြက္ပါ အားလုံးကိုခင္လည္း ခင္ပါတယ္၊
ေလးလည္းေလးစာပါတယ္၊မိမိဘေလာ့ေလးလွခ်င္ရင္ေတာ့နည္းနည္းအပင္ပန္းခံတာေပါ့ေနာ္..ဟီး....
Add Page Elements ကို Blog Header မွာဘယ္လိုထည့္ရလဲဆိုရင္


ေအာက္မွာပံုနဲ႔တကြ code ထည့္နည္းေလးပါ။
၁။ Layoutနိုပ္ပါ၊
၂။ edit HTMLထပ္နို္ပ္ပါ၊Ctrl+F ရွာရင္ျမန္ပါတယ္

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


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

ေတြ႕ျပီဆိုရင္ေအာက္က Code အတိုင္းေျပာင္းေပးပါ၊


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

မျပီးေသးဘူးေနာက္တစ္ခုက်န္ေသးတယ္ ေအာက္က Code ကိုထပ္ရွာပါ၊

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

ေတြ႕ျပီဆိုရင္ေအာက္က Code အတိုင္းျပန္ေျပာင္းေပးလိုက္ပါ၊

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>

၃။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။

သင့္ရဲ႕ဘေလာ့ကိုျပန္ၾကည့္လိုက္ပါ add Page Elementsကေအာက္ပံုအတိုင္းေပၚလာလိမ့္မည္။



က်ေနာ္ဘေလာ့ Header မွာလည္းေတြ႕ၾကမွာပါ။

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု
မိတ္ေဆြအားလံုးေက်းဇူးကမာၻ အဆင္ေျပရင္လည္းအေၾကာင္းၾကားေပးၾကေပါ့ေနာ္ ဟီး..
ရြင္လန္းခ်မ္းေျမ႕ၾကပါေစ။

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Monday, October 26, 2009

kp3နည္းပညာ၊၇၅၊Open Links In New Window

ဒါေလးကေတာ့Open Links In New Window ေပါ့ေနာ္မိမိရဲ႕ဘေလာ့ကလင့္ခ္တစ္ခုခုကိုနိုပ္
လိုက္ရင္Window အသစ္နဲ႕ေပၚေအာင္လုပ္နည္းေလးပါ။အေ၇းေတာ့မၾကီးဘူးေပါ့ေနာ္၊လိုအပ္
ခဲ့ရင္သံုးလို႕ရေအာင္ပါ Code ကေတာ့အရမ္းရွင္းတယ္တိုတိုေလးဘဲ။

၁။ Layoutနိုပ္ပါ၊
၂။ edit HTMLထပ္နို္ပ္ပါ၊Ctrl+F ရွာရင္ျမန္ပါတယ္

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

<head>

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

<base target='_blank'/>


၄။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု


Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Saturday, October 24, 2009

kp3နည္းပညာ၊၇၃၊မိမိရဲ့ဘေလာ႔Comment အေရအတြက္ Bubble Icon ေလးနဲ႕ေပၚေစခ်င္ရင္

မိမိရဲ႕ဘေလာ့Postတခုစီရဲ႕အေပၚမွာ Comment အေရအတြက္ Bubble Icon ေလးနဲ႕ေပၚ
ေအာင္လုပ္တဲ့နည္းေလးပါ၊တခ်ိဳ႕Template မွာၾကေတာ့ Autoပါလာတယ္၊ထည့္နည္းေလးကေတာ့
ေအာက္မွာပံုနဲ႕တကြ Code

၁။ Layoutနိုပ္ပါ၊

၂။ edit HTMLထပ္နို္ပ္ပါ၊
၃။Expand Widget Templatesကိုအမွန္ျခစ္ေပးပါ၊



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

]]></b:skin>

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

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}

cssေနရာမွာထားျပီးသြားျပီဆိုရင္

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

အနီ ေရာင္ Code ေတြကိုထပ္ျဖည့္ေပးလိုက္ပါ

<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'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<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>
</b:if>



၄။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။


အစိမ္းေရာင္လင့္ခ္ကေတာ့ Bubble Icon လင့္ခ္ပါ၊စိတ္တိုင္းၾကေျပာင္းနိုင္သည္။

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





Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

kp3နည္းပညာ၊၇၂၊မိမိရဲ့ဘေလာ႔Post ေအာက္မွာရိွတဲ့Subscribe to: Posts (Atom) ျဖဳတ္လုပ္ခ်င္ရင္

ဒါေလးကေတာ့က်ေနာ္တို႕ရဲ႕ Post ေအာက္မွာရိွတဲ့Subscribe to: Posts (Atom) ဆိုတဲ့စာေၾကာင္း
ေလးျဖဳတ္နည္းေလးပါ။ျဖဳတ္ျခင္တဲ့သူငယ္ခ်င္းေတြအတြက္ပါ၊တခ်ို႕Template မွာၾကေတာ့ Auto
ျဖဳတ္ျပီးသားပါလာတယ္၊အ၇မ္းရွင္းပါတယ္ေအာက္ပံု


၁။ Layoutနိုပ္ပါ၊

၂။ edit HTMLထပ္နို္ပ္ပါ၊
၃။Expand Widget Templatesကိုအမွန္ျခစ္ေပးပါ၊


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

<b:include name='feedLinks'/>

ေတြ႕ျပီဆိုရင္ျဖဳတ္လိုက္ပါ၊

၄။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။။။

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

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Monday, October 19, 2009

kp3နည္ပညာ၊၆၇၊မိမိရဲ့ဘေလာမွာ့Highlight Author Commentလုပ္ခ်င္ရင္

ဒါေလးကေတာ့Highlight Author Comment in Blogspotေပါ့ေနာ္၊ ဘေလာ့ပိုင္ရွင္ေရးတဲ့Comment
နဲ႕မိမိရဲ့ဘေလာ့မွာသူငယ္ခ်င္းေတြေ၇းေပးသြားတဲ့Commentေတြကိုမတူေအာင္လုပ္တဲ့နည္းေလးပါဘဲ၊
ဘေလာ့ပိုင္ရွင္ေရးတဲ့ Comment ဆိုရင္ေဘာင္းေလးနွင့္ေပၚလာတယ္ေပါ့ေနာ္.......သံုးလို႕ေကာင္းတဲ့
blogger hackတမ်ိဳးပါဘဲ။စိတ္ဝင္စားရင္ေတာ့ေအာက္မွာျပထားပါတယ္

၁။click Layout
၂။click edit HTML
၃။Expand Widget Templates

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

]]></b:skin>

ေတြ႕ျပီဆိုရင္အေပၚမွာCSS areaမွာေအာက္ကဟာကိုထည့္ပါ။

.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

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



<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


အေပၚက အနီ Codeေတြကိုမိမိရဲ႕ဘေလာ့ HTMLCode မွာထပ္ျဖည့္ေပးလိုက္ပါ

၄။Save Template button.ႏိုပ္ပါ၊

မိတ္ေဆြအားလံုးအဆင္ေျပၾကပါေစ
အားလုံးကိုခ်စ္ခင္ေလးစားတဲ့ kp3 မိသားစု
ေက်းဇးူကမာၻ

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Thursday, October 1, 2009

kp3နည္းပညာ၊၅၉၊မိမိရဲ့ဘေလာ့မွာComments ေတြကိုနံပါတ္အစဥ္လိုက္ထည့္ခ်င္ရင္

အခုဟာေလးကေတာ့မိမိရဲ့Commentsေတြကိုနံပါတ္အစဥ္လိုက္ထည့္နည္းေလးပါ။
ဒါလည္းဘဲရိုးရိုးရွင္းရွင္း Code ေလးတစ္ခုပါဘဲ။

ေအာက္မွာပံုနဲ႕တကြ Code

၁။click Layout
၂။click edit HTML

၃။Expand Widget Template’ကိုမွန္ျခစ္ေပးပါ။


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



<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>




ေတြ႕ျပီဆိုရင္ေအာက္က Code နဲ႕အစားထိုးေပးလိုက္ပါ။

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>


ေနာက္တစ္ခုရိွေသးတယ္ေနာ္ ေအာက္ကCodeကိုထပ္ရွာပါ

]]></b:skin>:

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

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

၄။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။။။
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Wednesday, September 30, 2009

kp3နည္းပညာ၊၅၆၊မိမိရဲ့ဘေလာ့မွာSexy Bookmarksထားခ်င္ရင္

ဒီေန႔႔က်ေနာ္အခ်ိန္အနည္းငယ္ေလးရတုန္း ဘေလာ့သူငယ္ခ်င္းေတြ
အတြက္ Sexy Bookmarksလို႔ေခၚတဲ့ဟာေလးေပါ့ေနာ္ဟီး.......
မိမိရဲ႔Postေအာက္မွာထားျခင္းရင္ေပါ့ေနာ္,,,,,,,,,,,,,,,,,,,
မိမိရဲ႕ဘေလာ့ပိုးၿပီး လွပေစသလိုပိုးၿပီးမွျပည့္စံုေစပါတယ္။
သိၿပီးၾကသူေတြလည္းမ်ားမယ္ထင္ပါတယ္။
မသိေသးၾကတဲ့မိတ္ေဆြေတြအတြက္ပါ၊ဘေလာဂါ့
မိတ္ေဆြအားလံုးကိုအျမဲတမ္းခ်စ္ခင္ေလးစားပါတယ္
္ိ္ိိလို႔ေျပာခ်င္းပါတယ္။။။။။။။။။။။။။။။။။။။
ေအာက္မွာပံုနံ႔တကြCode


၁။click Layout
၂။click edit HTML
၃။Expand Widget Template’ကိုမွန္ျခစ္ေပးပါ။

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

</head>

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

<style type='text/css'> div.sexy-bookmarks { height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom; position:relative; width:540px; } 
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom; position:absolute; right:-17px; }
div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; }
div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; }
div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; }
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important; }
.sexy-furl { background-position:-300px top !important; }
.sexy-furl:hover { background-position:-300px bottom !important; }
.sexy-digg { background-position:-500px top !important; }
.sexy-digg:hover { background-position:-500px bottom !important; }
.sexy-reddit { background-position:-100px top !important; }
.sexy-reddit:hover { background-position:-100px bottom !important; }
.sexy-stumble { background-position:-50px top !important; }
.sexy-stumble:hover { background-position:-50px bottom !important; }
.sexy-delicious { background-position:left top !important; }
.sexy-delicious:hover { background-position:left bottom !important; }
.sexy-yahoo { background-position:-650px top !important; }
.sexy-yahoo:hover { background-position:-650px bottom !important; }
.sexy-blinklist { background-position:-600px top !important; }
.sexy-blinklist:hover { background-position:-600px bottom !important; }
.sexy-technorati { background-position:-700px top !important; }
.sexy-technorati:hover { background-position:-700px bottom !important; }
.sexy-myspace { background-position:-200px top !important; }
.sexy-myspace:hover { background-position:-200px bottom !important; }
.sexy-twitter { background-position:-350px top !important; }
.sexy-twitter:hover { background-position:-350px bottom !important; }
.sexy-facebook { background-position:-450px top !important; }
.sexy-facebook:hover { background-position:-450px bottom !important; }
.sexy-mixx { background-position:-250px top !important; }
.sexy-mixx:hover { background-position:-250px bottom !important; }
.sexy-script-style { background-position:-400px top !important; }
.sexy-script-style:hover { background-position:-400px bottom !important; }
.sexy-designfloat { background-position:-550px top !important; }
.sexy-designfloat:hover { background-position:-550px bottom !important; }
.sexy-syndicate { background-position:-150px top !important; }
.sexy-syndicate:hover { background-position:-150px bottom !important; }
.sexy-email { background-position:-753px top !important; }
.sexy-email:hover { background-position:-753px bottom !important; } </style>


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

<data:post.body/>

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

<div class='sexy-bookmarks'><ul class='socials'><li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Delicious' rel='nofollow'/></li> <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This Post' rel='nofollow'/></li> <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Technorati' rel='nofollow'/></li> <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Reddit' rel='nofollow'/></li> <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This Post' rel='nofollow'/></li> <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on DesignFloat' rel='nofollow'/></li> <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Facebook' rel='nofollow'/></li> <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Twitter' rel='nofollow'/></li> <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Furl' rel='nofollow'/></li> <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/naeemnur' title='Subscribe to RSS' rel='nofollow'/></li> <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Email' rel='nofollow'/></li> </ul><span class='sexy-rightside'/></div>
၄။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။။။
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Monday, September 28, 2009

kp3နည္းပညာ၊၅၃၊မိမိရဲ့ဘေလာ့မွာ Tweet နဲ့ Retweet Buttonေလးထည့္ခ်င္ရင္

ဒါေလးကေတာ့မိမိရဲ့ဘေလာ့မွာ Tweet နဲ့ Retweet Button
ေလးထည့္နည္းတစ္မ်ိဳးေပါ့ေနာ္။။ Diggေန့စြဲေလးလိုေပါ့ အခုလည္းက်ေနာ္
ဘေလာ့မွာလည္းေတြ့ၾကမယ္ထင္ပါတယ္။
ေအာက္မွာပံုနဲ့တကြCode
၁။click Layout
၂။click edit HTML
၃။Expand Widget Templatesအမွန္ျခစ္ေပးပါ
ေအာက္ကCodeကိုရွာပါ၊ (CTRL+F)နဲ့ရွာရင္ျမန္တာေပါ့ေနာ္

<div class='post-header-line-1'/>

ေတြ႕ၿပီဆိုရင္ေအာက္မွာ ေအာက္ကCodeကိုထည့္လိုက္ပါ
<script type="text/javascript"> tweetmeme_url = '<data:post.url/>'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

ေနာက္တစ္ခုၾကေတာ့ေအာက္မွာပံုနဲ့တကြCode
<script type="text/javascript"> tweetmeme_style = 'compact'; tweetmeme_url = '<data:post.url/>'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

ေနာက္တစ္ခုရိွေသးတယ္ေအာက္မွာ



<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://www.gigaimage.com/images/cqujmnn2s4ribveury7.gif'/></a>

၄။Save Template button.ႏိုပ္ပါ။။
kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Saturday, September 26, 2009

kp3နည္းပညာ၊၅၂၊မိမိရဲ႕ဘေလာ့Lebalsေရွ႕မွာRss Feed Link Buttonေလးထားခ်င္ရင္

ဒါေလကေတာ့က်ေနာ္တို႔ရဲ့ဘေလာ့Categories(ေခါင္းစဥ္)ေတြကို
တမ်ိဳးေလးျဖစ္ေအာင္ေပါ့ေနာ္။
မိမိရဲ့ဘေလာ့Categoriesေခါင္းစဥ္ေတြအားလုံးေရွ႕မွာ Rss Feed Link Button
ေလးထားျခင္ခဲ့သည္ရိွေသာ။
ေအာက္မွာပံုနဲ႔တကြCode၁။click Layout
၂။click edit HTML

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

<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>
<span dir='ltr'/>
</li>
</b:loop>

ေတြ႕ၿပီဆိုရင္ ေအာက္ကCodeေလးနဲ့အစားထိုးေပးလိုက္ပါ။
အလယ္မွာအနီCodeေလးကိုထည့္ေပးလိုက္တာပါဘဲ.....
.

<b:loop values='data:labels' var='label'>
<li>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<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>
<span dir='ltr'/>
</li>
</b:loop>

၃။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။။။

ေနာက္တမ်ိဳးကေတာ့ေအာက္ပံု
ပံုစံကေတာ့အတူတူပါဘဲအနီေရာင္Codeေလးေနရာေျပာင္းသြားတာပါ။


<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>
<span dir='ltr'/>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

</li>
</b:loop>

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Thursday, September 24, 2009

kp3နည္းပညာ၊၅ဝ၊မိမိရဲ႕ဘေလာ့Templatesေအာက္မွာ Three Column Footerထည့္ခ်င္ရင္

အခ်ိန္မ၇တာေတာ့ခြင့္လြတ္ေပးၾကပါလို႔ေမတၱာ၇ပ္ခံပါတယ္၊၊ ဒီေန႔ဟာေလးကလဲ မိမိ၇ဲ႔ဘေလာ့ကိုပိုလွသြားေအာင္လုပ္တဲ့နည္းတမ်ိဳးေပါ့ေနာ္!! ဒါေလးကေတာ့က်ေနာ္တို႔ိဘေလာ့Templatesေအာက္မွာ Three Column Footerထည့္နည္းေလးပါ၊တခ်ိဳ႕Blogger Templates ေတြမွာ Auto ရွိျပီးသားပါဘဲ၊
ႏွစ္သက္ရင္ေတာ့ေအာက္မွာထည့္နည္းနဲ႔တကြပံု


၁။click Layout
၂။click edit HTML
ေအာက္ကCodeကိုရွာပါ၊Press Ctrl + Fနဲ႔ရွာရင္ပိုၿပီးျမန္တာေပါ႔နာ္
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ေတြ႕ၿပီဆိုရင္ အလယ္ကCodeနီေလးေနရာမွာေအာက္ကCodeကိုထည့္ေပးလိုက္ပါ
<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0 ; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

၃။Save Template button.ႏိုပ္ပါ။။
errors တက္မလာဘုူးဆို၇င္cssဘက္သြားၾကေအာင္ေနာ္
ေအာက္ကCodeကိုထပ္ရွာပါ၊


</b:skin>


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

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

၄။Save Template button.ႏိုပ္ပါ။။

မိတ္ေဆြအားလုံးႀကိဳက္ၾကမယ္လို႔ေမ်ာ္လင့္ပါတယ္

kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed

Tuesday, September 22, 2009

kp3နည္းပညာ၊၄၉၊မိမိရဲ့Postေအာက္မွာထိုးျမဲလက္မွတ္ထည့္ခ်င္ရင္

ဒါေလးကေတာ့ တခ်ိဳ႕ဘေလာ့မိတ္ေဆြမွာလဲသူတို႔တင္တာျမင္ဖူးပါတယ္၊၊ တူမလာေတာ့မသိဘူးတူရင္လည္းတူမွာေပါ့ေနာ္ မိမိရဲ့Postေအာက္မွာ
ထိုးျမဲလက္မွတ္ထည့္တ့ဲနည္းေလးပါ။

ေအာက္မွာစမယ္ေနာ္
၁။ဒီေနရာ MyLiveSignature သို႔မဟုတ္ onlinesignaturepad သြားပါ၊

၂။ရလာတဲ့ Image URLကို Copyယူလိုက္ပါ၊

၃။မိမိရဲ့blogger account ထဲျပန္ဝင္မယ္၊

၄။ Layout >> Edit Html >>> Expand Widget Templates

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

<p><data:post.body/></p>

ေတြ႕ၿပီဆိုရင္ေအာက္မွာ ေအာက္ကCodeကိုကပ္ရပ္စြာထားေပးလိုက္ပါ။

<p><div align="left"><img src="ဤေနရာမွာImage URLထည့္လိုက္ပါ"/></div></p>

၅။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။။။

kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ

Stumble
Delicious
Technorati
Twitter
Facebook
Yahoo
Reddit
Feed
 

Copyright 2009.kp3tester Powered by Blogger

Blogger Templates created by Deluxe Templates

Images by Indeziner