kp3 Marquee Post title test

ဒီေန႕တင္တဲ့ Post ေလးကလည္းအသစ္လို႕ေျပာလို၇ပါတယ္၊မိမိရဲ႕ဘေလာ့ကPostေတြရဲ႕စလံုးအၾကီးအေသး ေျပာင္းလို႕၇တဲ့ Code ေတြလ္ို႕ေျပာ၇င္လည္း၇ပါတယ္။ဒီဘေလာ့ Post ေတြကိုအၾကီးအေသးေျပာင္းလို႕ ၇တဲ့နည္းေတြအမ်ားၾကီးရိွပါတယ္။ဒါနဲ႕ဆို(၄)ခုေလာက္ရွိပါျပီ၊ kp3နည္းပညာ၊၁၁၆၊မွာတခု kp3နည္းပညာ၊၁ဝ၃၊မွာတခု kp3နည္းပညာ၊၁၄၅၊မွာအခုဟာနွင့္ ၄ ခုေပါ့ေနာ္၊တခုနွင့္တခုမတူပါဘူး၊ ေနရာေတြျပထားေပးပါတယ္၊သြားၾကည့္ျပီးၾကိဳက္တာသြားယူၾကေပါ့ေနာ္။ DEMO လင့္ခ္လည္း
ေပးထားပါတယ္၊ေအာက္မွာ Code နဲ႕တကြပံု

                                                                         DEMO

]]></b:skin>

style="color: #274e13;">/* resizeFont
*/
#resizeFont{
text-align:right;
margin-right:10px;
}

</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

<div id='resizeFont'>
<input id='large' type='button' value='A+'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>

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

၁။Layout

၂။Edit HTML

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

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

a:hover {
text-decoration:underline;
}

a:hover {
position: relative;
bottom: 5px;
left: 1px;
color:#000000;
}

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

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml' target='_blank'><data:f.name/> (RSS)</a>
</b:loop>
</div>
</b:includable>

ဒီ Post ေလးကလည္းမိမိရဲ႕ဘေလာ့ကိုလာလည္တဲ့မိတ္ေဆြအတြက္မိမိတင္ထားတဲ့ Post ကိုဖတ္
ရတာပိုျပီးအဆင္ေျပေစမလာေတာ့မသိဘူး၊ထင္ေတာ့ထင္တာဘဲ..ဘာျဖစ္လို႕လည္းဆိုေတာ့ Post
Title ေတြကိုၾကည့္ျပီးေရြးဖတ္လို႕ရတယ္ဆိုေတာ့၊မိမိရဲ႕ဘေလာ့မွာဝင္တာနဲ႕Post Title ေတြကိုဘဲ
ေပၚေအာင္လုပ္တဲ့ Code ေလးပါ၊Formatting ရဲ႕ Show မွာၾကိဳသေလာက္ထားလိုက္ေပါ႕ေနာ္။။
က်ေနာ့ရဲ႕အီးေမးလ္မွာေတာင္းဆိုထားတဲ့ Read More လုပ္နည္းေတြကို kp3နည္းပညာ၊၁၆ဝ၊
kp3နည္းပညာ၊၁၅၉၊ ႏွင့္ kp3နည္းပညာ၊၁၅၈၊မွာျပည့္ျပည့္စံုစံုျပထားေပးပါတယ္။။။။
ေအာက္မွာထည့္နည္းနဲ႕တကြပံု

</head>

<style type='text/css'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>

</style>

ဒီေန႕က်ေနာ္တင္တဲ့Post ေတြအားလံုးကေတာ့Read more လုပ္တဲ့နည္းေလးေတြပါဘဲ၊၊၃၊၊ခုေလာက္
ရိွပါတယ္၊ေမးလ္ထဲမွာေတာင္းဆိုတဲ့သူေတြမ်ားေနလို႕ပါ၊မိမိၾကိဳက္နွစ္သက္တဲ့ပံုစံယူသံုးၾကေပါ့ေနာ္၊
ဒီနည္းေလးကအလြယ္ဆံုးနည္းဘဲျဖစ္မယ္လို႕ေတာ့ေမ်ာ္လင့္ထားတာဘဲ၊ဒါေလးကအသစ္လို႕လည္း
ေျပာလို႕ရပါတယ္၊၊ေနာက္ႏွစ္ခုကိုလည္းသြားၾကည့္ေစခ်င္ပါတယ္အသံုးျပဳပံုေတြမတူပါဘူး၊ေနာက္ႏွစ္
ခုကေတာ့ kp3နည္းပညာ၊၁၅၈၊ ႏွင့္ kp3နည္းပညာ၊၁၅၉၊မွွွွာရိွပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုလည္း
အစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ပါလို႕ထပ္ေျပာပါရေစ။အားလံုးကိုေက်းဇူးကမ႓ာေအာက္မွာ Code ရိွပါတယ္။
ဒီ Code ေလးကတကယ္ကိုလြယ္ကူရွင္းလင္းတဲ့နည္းေလးပါ။

၁။Layout

၂။Edit HTML

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

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

<data:post.body/>

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://kp3family.com/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>ဆက္ဖတ္ရန္>>></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

ဒီေန႕က်ေနာ္ရသေလာက္အခ်ိန္ေလးမွာတင္မယ့္ Post ေလးေတြကေတာ့Read more လုပ္တဲ့
နည္းေလးေတြပါဘဲ၊က်ေနာ္ရဲ႕အီးေမးလ္ထဲမွာေတာင္းဆိုထားတဲ့ဘေလာ့ဂါညီေလးေတြမ်ားေနလို႕ပါ။
အခုTamplate ေတြမွာ Read More Funtion ကပါျပီးသားမ်ားပါတယ္၊ဒါေပမယ့္ Tamplate မေျပာင္း
ခ်င္တဲ့သူငယ္ခ်င္းေတြအတြက္ပါ၊ Read More လုပ္တဲ့ Code ကမ်ားပါတယ္၊တူတဲ့သူေတြလည္းရိွ
သလိုမတူတဲ့ Code ေတြလည္းမ်ားပါတယ္၊၊အခုဟာေလးကေတာ့မိမိၾကိဳက္တဲ့ေနရာကေနRead More
ဆိုျပီးဖြတ္ထားတဲ့နည္းေလးပါ၊ေနာက္တစ္မ်ိဳးကလည္း Kp3နည္းပညာ၊၁၅၈၊မွာလည္းAuto Read More
လုပ္နည္းရိွပါတယ္၊ေအာက္မွာပံုနဲ႕တကြ Code ထည့္နည္းေလးျပထားပါတယ္။။။


၁။Layout

၂။Edit HTML

၃။Download Full Template အေရးၾကီးပါတယ္ Backup လုပ္ေပးပါ။။

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

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

<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>ဆက္ဖတ္ရန္>>></a>
</b:if>
</b:if>

<span class="fullpost">

</span>

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

၁။Layout

၂။Edit HTML

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

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

</head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>

<data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>>>>ဆက္ဖတ္ရန္>>> >></b></a></span>
</b:if>

အခုတင္တဲ့ Post ေလးကလည္းသိပ္ေတာ့အေရးအၾကီးပါဘူး၊ေတာ္ေတာ္မ်ားမ်ားသိျပီးသားပါဘဲ။
ဒါေပမယ့္မသိေသးတဲ့မိတ္ေဆြေတြရိွခဲရင္သံုးလို႕ရေအာင္ျပန္တင္တာပါ၊Recent Commentsေတြ
ကိုၾကိဳက္သေလာက္ေပၚထားလို႕ရတဲ့ Code ေလးပါ၊kp3နည္းပညာ၊၁၃၃၊မွာလည္းျပထားပါတယ္၊
ဒါေပမယ့္kp3နည္းပညာ၊၁၃၃၊မွာ(၅)ခုထက္အပိုထားလို႕မ၇ဘူးေပါ့ေနာ္.ဒီ Code ကေတာ့အရမ္းကို
ရွင္းပါတယ္၊လက္ရိွက်ေနာ္သံုးေနတဲ့ Code ပါ။ေအာက္မွာထည့္နည္းနဲ႕တကြ Code

<script>
//credit to hoctro
function rp(json) {
document.write('<ul>');

for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);

if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');

}
</script>
<script>
var numposts = 25; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <script src="http://kp3family.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script>

အခုတင္တဲ႕ Post ေလးကလည္းCharm CSS Horizontal Menu လို႕ေခၚပါတယ္၊ဘေလာ့အတြက္
သံုးလို႕ေကာင္းတဲ့ Menu ေလးတခုပါဘဲ၊ Code ေတာ့အရမ္းကိုရွင္းပါတယ္၊သံုးခ်င္တဲ့ဘေလာ့မိတ္ေဆြ
ေတြအတြက္ေပါ႕ေနာ္၊နမူနာသြားၾကည့္လို႕ရေအာင္လည္း DEMO လင့္ခ္လည္းေပးထားပါတယ္...။။။။
ေအာက္မွာထည့္နည္းနဲ႕တကြပံု၊ဘေလာ့္မိတ္ေဆြအားလံုးကိုအဆင္ျမဲခ်စ္ခင္ေလးစားလၽွက္..kp3မိသားစု

</head>

<style type='text/css'>

#menu {text-align:left;height:36px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTc4VGWkmA5wBkt2KyIEbNfK29o40uYOAMMF5sMvcqPZCYfrkQG3QSYzoTaI8kiueEJu2zuZ6SgmapBvUFdWv-G82eLY9dizFFqBwtfbJ6em_lKZ0kcvOluqoxRCwsa0x0VAOtwwCimXS0/) repeat-x top;padding:0px 10px 0px 10px;vertical-align: top;margin:0px 4px 0px 4px;}

#menu ul {height:36px; width:100%;overflow:hidden;}

#menu li {  font: 15px Arial, Helvetica, sans-serif; display: inline;  margin-right: 10px; padding:5px 0px 5px 0px; font-weight:bold; line-height:36px;height:36px;}

#menu li a {  color: #494949;  text-decoration: none;}

#menu li a:hover {color: #333;text-decoration: underline;}

</style>

<div id="menu">

<ul>
 
<li><a href="မိမိရဲ႕ဒီမွာထည့္ပါ#" title="#">ေကပီသ၇ီး</a></li>

<li><a href="မိမိရဲ႕ဒီမွာထည့္ပါ#" title="#">သီခ်င္း</a></li>

<li><a href="မိမိရဲ႕ဒီမွာထည့္ပါ#" title="#">သတင္း</a></li>

<li><a href="မိမိရဲ႕ဒီမွာထည့္ပါ#" title="#">ဂ်ာနယ္</a></li>

<li><a href="မိမိရဲ႕ဒီမွာထည့္ပါ#" title="#">ဗီြဒီယို</a></li>

<li><a href="မိမိရဲ႕ဒီမွာထည့္ပါ#" title="#">အႏုပညာ</a></li>

<li><a href="မိမိရဲ႕ဒီမွာထည့္ပါ#" title="#">အားကစား</a></li>

<li><a href="မိမိရဲ႕ဒီမွာထည့္ပါ#" title="#">ဆက္သြယ္ရန္</a></li>

</ul>

</div>

အခုတင္ထားတဲ့ Post ေလးကလည္းSocial Bookmark တမ်ိဳးပါဘဲ၊ဒါေလးကေတာ့ Mouse
ႏွင့္ေထာက္လိုက္ရင္သူ႕ရဲ႕ Icon ေလးေတြကအေပၚကိုေဖာင္းတက္လာေအာင္လုပ္နည္းေလးပါ။
သံုးတဲ့သူေတြနည္းပါေသးတယ္၊ဒါေၾကာင့္သူမ်ားနဲ႕မတူေအာင္သံုးခ်င္တဲ့မိတ္ေဆြေတြအတြက္ပါ။
ေအာက္မွာပံုနဲ႕တကြCodeေတြေပးထားပါတယ္။။နမူနာၾကည့္လို႕ရေအာင္DEMOလင့္ခ္ေပးထားပါတယ္

၁။Layout

၂။Edit HTML

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

</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


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

/*
* Interface elements for jQuery - http://interface.eyecon.ro
*
* Copyright (c) 2006 Stefan Petre
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('6.15={3o:d(e){7 x=0;7 y=0;7 1Q=1A;7 A=e.L;8(6(e).H(\'Q\')==\'U\'){1E=A.1a;2y=A.O;A.1a=\'1F\';A.Q=\'1Y\';A.O=\'2e\';1Q=26}7 4=e;2P(4){x+=4.3B+(4.1I&&!6.3p.41?F(4.1I.2X)||0:0);y+=4.3x+(4.1I&&!6.3p.41?F(4.1I.2Z)||0:0);4=4.4e}4=e;2P(4&&4.4a&&4.4a.39()!=\'V\'){x-=4.1D||0;y-=4.1s||0;4=4.2x}8(1Q){A.Q=\'U\';A.O=2y;A.1a=1E}q{x:x,y:y}},4E:d(4){7 x=0,y=0;2P(4){x+=4.3B||0;y+=4.3x||0;4=4.4e}q{x:x,y:y}},35:d(e){7 w=6.H(e,\'1T\');7 h=6.H(e,\'36\');7 1e=0;7 1o=0;7 A=e.L;8(6(e).H(\'Q\')!=\'U\'){1e=e.1z;1o=e.2s}u{1E=A.1a;2y=A.O;A.1a=\'1F\';A.Q=\'1Y\';A.O=\'2e\';1e=e.1z;1o=e.2s;A.Q=\'U\';A.O=2y;A.1a=1E}q{w:w,h:h,1e:1e,1o:1o}},4P:d(4){q{1e:4.1z||0,1o:4.2s||0}},58:d(e){7 h,w,22;8(e){w=e.2a;h=e.29}u{22=D.Y;w=2z.3c||2N.3c||(22&&22.2a)||D.V.2a;h=2z.31||2N.31||(22&&22.29)||D.V.29}q{w:w,h:h}},3P:d(e){7 t,l,w,h,1J,1R;8(e&&e.2E.39()!=\'V\'){t=e.1s;l=e.1D;w=e.3j;h=e.3e;1J=0;1R=0}u{8(D.Y&&D.Y.1s){t=D.Y.1s;l=D.Y.1D;w=D.Y.3j;h=D.Y.3e}u 8(D.V){t=D.V.1s;l=D.V.1D;w=D.V.3j;h=D.V.3e}1J=2N.3c||D.Y.2a||D.V.2a||0;1R=2N.31||D.Y.29||D.V.29||0}q{t:t,l:l,w:w,h:h,1J:1J,1R:1R}},3L:d(e,1U){7 4=6(e);7 t=4.H(\'2j\')||\'\';7 r=4.H(\'2k\')||\'\';7 b=4.H(\'2n\')||\'\';7 l=4.H(\'2l\')||\'\';8(1U)q{t:F(t)||0,r:F(r)||0,b:F(b)||0,l:F(l)};u q{t:t,r:r,b:b,l:l}},56:d(e,1U){7 4=6(e);7 t=4.H(\'3w\')||\'\';7 r=4.H(\'3u\')||\'\';7 b=4.H(\'3s\')||\'\';7 l=4.H(\'3t\')||\'\';8(1U)q{t:F(t)||0,r:F(r)||0,b:F(b)||0,l:F(l)};u q{t:t,r:r,b:b,l:l}},4Z:d(e,1U){7 4=6(e);7 t=4.H(\'2Z\')||\'\';7 r=4.H(\'3G\')||\'\';7 b=4.H(\'3y\')||\'\';7 l=4.H(\'2X\')||\'\';8(1U)q{t:F(t)||0,r:F(r)||0,b:F(b)||0,l:F(l)||0};u q{t:t,r:r,b:b,l:l}},3T:d(2i){7 x=2i.53||(2i.52+(D.Y.1D||D.V.1D))||0;7 y=2i.51||(2i.54+(D.Y.1s||D.V.1s))||0;q{x:x,y:y}},3h:d(12,3g){3g(12);12=12.3F;2P(12){6.15.3h(12,3g);12=12.5a}},59:d(12){6.15.3h(12,d(4){S(7 1j 1q 4){8(2R 4[1j]===\'d\'){4[1j]=20}}})},57:d(4,27){7 1b=$.15.3P();7 3l=$.15.35(4);8(!27||27==\'4Y\')$(4).H({X:1b.t+((1i.3S(1b.h,1b.1R)-1b.t-3l.1o)/2)+\'K\'});8(!27||27==\'4Q\')$(4).H({N:1b.l+((1i.3S(1b.w,1b.1J)-1b.l-3l.1e)/2)+\'K\'})},4O:d(4,3U){7 3V=$(\'3q[@2u*="2w"]\',4||D),2w;3V.1V(d(){2w=k.2u;k.2u=3U;k.L.4M="4N:4R.4S.4W(2u=\'"+2w+"\')"})}};[].4i||(4V.4U.4i=d(v,n){n=(n==20)?0:n;7 m=k.1m;S(7 i=n;i<m;i++)8(k[i]==v)q i;q-1});6.3A=d(e){8(/^4T$|^4L$|^5b$|^5c$|^5t$|^5s$|^5r$|^5q$|^5u$|^V$|^5v$|^5z$|^5y$|^5x$|^5w$|^5p$|^5o$/i.2q(e.2E))q 1A;u q 26};6.E.5h=d(e,1p){7 c=e.3F;7 1d=c.L;1d.O=1p.O;1d.2j=1p.18.t;1d.2l=1p.18.l;1d.2n=1p.18.b;1d.2k=1p.18.r;1d.X=1p.X+\'K\';1d.N=1p.N+\'K\';e.2x.4f(c,e);e.2x.5g(e)};6.E.5f=d(e){8(!6.3A(e))q 1A;7 t=6(e);7 A=e.L;7 1Q=1A;7 J={};J.O=t.H(\'O\');8(t.H(\'Q\')==\'U\'){1E=t.H(\'1a\');A.1a=\'1F\';A.Q=\'\';1Q=26}J.32=6.15.35(e);J.18=6.15.3L(e);7 2Y=e.1I?e.1I.4g:t.H(\'5d\');J.X=F(t.H(\'X\'))||0;J.N=F(t.H(\'N\'))||0;7 3J=\'5e\'+F(1i.5i()*4p);7 1x=D.5j(/^3q$|^5n$|^5m$|^5l$|^5k$|^5A$|^2V$|^4u$|^4y$|^4z$|^4x$|^4v$|^4s$|^4H$/i.2q(e.2E)?\'4J\':e.2E);6.1j(1x,\'4F\',3J);1x.3X=\'4B\';7 R=1x.L;7 X=0;7 N=0;8(J.O==\'33\'||J.O==\'2e\'){X=J.X;N=J.N}R.Q=\'U\';R.X=X+\'K\';R.N=N+\'K\';R.O=J.O!=\'33\'&&J.O!=\'2e\'?\'33\':J.O;R.2K=\'1F\';R.36=J.32.1o+\'K\';R.1T=J.32.1e+\'K\';R.2j=J.18.t;R.2k=J.18.r;R.2n=J.18.b;R.2l=J.18.l;8(6.3p.4G){R.4g=2Y}u{R.4D=2Y}e.2x.4f(1x,e);A.2j=\'1M\';A.2k=\'1M\';A.2n=\'1M\';A.2l=\'1M\';A.O=\'2e\';A.4C=\'U\';A.X=\'1M\';A.N=\'1M\';8(1Q){A.Q=\'U\';A.1a=1E}1x.4A(e);R.Q=\'1Y\';q{J:J,4I:6(1x)}};6.E.2f={4K:[0,B,B],4r:[3E,B,B],4w:[4l,4l,4t],4X:[0,0,0],60:[0,0,B],6P:[3H,42,42],6O:[0,B,B],6N:[0,0,1L],6L:[0,1L,1L],6M:[3b,3b,3b],6Q:[0,6R,0],6W:[6V,6U,4k],6S:[1L,0,1L],6T:[6K,4k,47],6J:[B,3I,0],6B:[6A,50,6z],6x:[1L,0,0],6Y:[6C,6D,6I],6H:[6G,0,2U],6E:[B,0,B],6F:[B,6X,0],7a:[0,1v,0],7j:[75,0,7i],7f:[3E,3v,3I],7e:[7h,7l,3v],7g:[3r,B,B],7c:[4c,7d,4c],72:[2U,2U,2U],71:[B,70,74],76:[B,B,3r],7b:[0,B,0],79:[B,0,B],77:[1v,0,0],78:[0,0,1v],6Z:[1v,1v,0],73:[B,3H,0],7k:[B,2I,6y],6v:[1v,0,1v],5V:[B,0,0],5U:[2I,2I,2I],5T:[B,B,B],5R:[B,B,0]};6.E.1w=d(16,3z){8(6.E.2f[16])q{r:6.E.2f[16][0],g:6.E.2f[16][1],b:6.E.2f[16][2]};u 8(M=/^1N\\(\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*\\)$/.2A(16))q{r:F(M[1]),g:F(M[2]),b:F(M[3])};u 8(M=/1N\\(\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*,\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*,\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*\\)$/.2A(16))q{r:Z(M[1])*2.55,g:Z(M[2])*2.55,b:Z(M[3])*2.55};u 8(M=/^#([a-1H-1B-9])([a-1H-1B-9])([a-1H-1B-9])$/.2A(16))q{r:F("1C"+M[1]+M[1]),g:F("1C"+M[2]+M[2]),b:F("1C"+M[3]+M[3])};u 8(M=/^#([a-1H-1B-9]{2})([a-1H-1B-9]{2})([a-1H-1B-9]{2})$/.2A(16))q{r:F("1C"+M[1]),g:F("1C"+M[2]),b:F("1C"+M[3])};u q 3z==26?1A:{r:B,g:B,b:B}};6.E.4n={3y:1,2X:1,3G:1,2Z:1,5S:1,5B:1,36:1,N:1,5W:1,5X:1,2n:1,2l:1,2k:1,2j:1,62:1,2T:1,61:1,6w:1,1f:1,5Y:1,5Z:1,3s:1,3t:1,3u:1,3w:1,38:1,5Q:1,X:1,1T:1,2O:1};6.E.49={5P:1,5G:1,5H:1,5F:1,5E:1,16:1,5C:1};6.E.25=[\'5D\',\'5I\',\'5J\',\'5O\'];6.E.3k={\'3d\':[\'24\',\'3W\'],\'2B\':[\'24\',\'3f\'],\'2D\':[\'2D\',\'\'],\'2C\':[\'2C\',\'\']};6.3Q.4b({5N:d(1h,1G,P,2v){q k.2d(d(){7 2t=6.1G(1G,P,2v);7 e=28 6.4m(k,2t,1h)})},37:d(1G,2v){q k.2d(d(){7 2t=6.1G(1G,2v);7 e=28 6.37(k,2t)})},5M:d(14){q k.1V(d(){8(k.1n)6.3m(k,14)})},5K:d(14){q k.1V(d(){8(k.1n)6.3m(k,14);8(k.2d&&k.2d[\'E\'])k.2d.E=[]})}});6.4b({37:d(C,o){7 z=k,4o;z.14=d(){8(6.43(o.2M))o.2M.3Z(C)};z.2h=3O(d(){z.14()},o.1k);C.1n=z},P:{4q:d(p,n,4j,4d,1k){q((-1i.5L(p*1i.63)/2)+0.5)*4d+4j}},4m:d(C,o,1h){7 z=k,4o;7 y=C.L;7 44=6.H(C,"2K");7 1O=6.H(C,"Q");7 G={};z.2L=(28 46()).48();o.P=o.P&&6.P[o.P]?o.P:\'4q\';z.2Q=d(I,W){8(6.E.4n[I]){8(W==\'2H\'||W==\'2G\'||W==\'3N\'){8(!C.1r)C.1r={};7 r=Z(6.1y(C,I));C.1r[I]=r&&r>-4p?r:(Z(6.H(C,I))||0);W=W==\'3N\'?(1O==\'U\'?\'2H\':\'2G\'):W;o[W]=26;G[I]=W==\'2H\'?[0,C.1r[I]]:[C.1r[I],0];8(I!=\'1f\')y[I]=G[I][0]+(I!=\'2O\'&&I!=\'34\'?\'K\':\'\');u 6.1j(y,"1f",G[I][0])}u{G[I]=[Z(6.1y(C,I)),Z(W)||0]}}u 8(6.E.49[I])G[I]=[6.E.1w(6.1y(C,I)),6.E.1w(W)];u 8(/^2D$|2C$|24$|2B$|3d$/i.2q(I)){7 m=W.1t(/\\s+/g,\' \').1t(/1N\\s*\\(\\s*/g,\'1N(\').1t(/\\s*,\\s*/g,\',\').1t(/\\s*\\)/g,\')\').64(/([^\\s]+)/g);6n(I){2b\'2D\':2b\'2C\':2b\'3d\':2b\'2B\':m[3]=m[3]||m[1]||m[0];m[2]=m[2]||m[0];m[1]=m[1]||m[0];S(7 i=0;i<6.E.25.1m;i++){7 1l=6.E.3k[I][0]+6.E.25[i]+6.E.3k[I][1];G[1l]=I==\'2B\'?[6.E.1w(6.1y(C,1l)),6.E.1w(m[i])]:[Z(6.1y(C,1l)),Z(m[i])]}3R;2b\'24\':S(7 i=0;i<m.1m;i++){7 3n=Z(m[i]);7 2r=!6m(3n)?\'3W\':(!/6l|U|1F|6j|6k|6o|6p|6u|6t|6s|6q/i.2q(m[i])?\'3f\':1A);8(2r){S(7 j=0;j<6.E.25.1m;j++){1l=\'24\'+6.E.25[j]+2r;G[1l]=2r==\'3f\'?[6.E.1w(6.1y(C,1l)),6.E.1w(m[i])]:[Z(6.1y(C,1l)),3n]}}u{y[\'6r\']=m[i]}}3R}}u{y[I]=W}q 1A};S(p 1q 1h){8(p==\'L\'){7 1c=6.30(1h[p]);S(1P 1q 1c){k.2Q(1P,1c[1P])}}u 8(p==\'3X\'){8(D.2S)S(7 i=0;i<D.2S.1m;i++){7 1K=D.2S[i].1K||D.2S[i].6i||20;8(1K){S(7 j=0;j<1K.1m;j++){8(1K[j].6h==\'.\'+1h[p]){7 1X=28 69(\'\\.\'+1h[p]+\' {\');7 1g=1K[j].L.68;7 1c=6.30(1g.1t(1X,\'\').1t(/}/g,\'\'));S(1P 1q 1c){k.2Q(1P,1c[1P])}}}}}}u{k.2Q(p,1h[p])}}y.Q=1O==\'U\'?\'1Y\':1O;y.2K=\'1F\';z.14=d(){7 t=(28 46()).48();8(t>o.1k+z.2L){4h(z.2h);z.2h=20;S(p 1q G){8(p=="1f")6.1j(y,"1f",G[p][1]);u 8(2R G[p][1]==\'2V\')y[p]=\'1N(\'+G[p][1].r+\',\'+G[p][1].g+\',\'+G[p][1].b+\')\';u y[p]=G[p][1]+(p!=\'2O\'&&p!=\'34\'?\'K\':\'\')}8(o.2G||o.2H)S(7 p 1q C.1r)8(p=="1f")6.1j(y,p,C.1r[p]);u y[p]="";y.Q=o.2G?\'U\':(1O!=\'U\'?1O:\'1Y\');y.2K=44;C.1n=20;8(6.43(o.2M))o.2M.3Z(C)}u{7 n=t-k.2L;7 2c=n/o.1k;S(p 1q G){8(2R G[p][1]==\'2V\'){y[p]=\'1N(\'+F(6.P[o.P](2c,n,G[p][0].r,(G[p][1].r-G[p][0].r),o.1k))+\',\'+F(6.P[o.P](2c,n,G[p][0].g,(G[p][1].g-G[p][0].g),o.1k))+\',\'+F(6.P[o.P](2c,n,G[p][0].b,(G[p][1].b-G[p][0].b),o.1k))+\')\'}u{7 2W=6.P[o.P](2c,n,G[p][0],(G[p][1]-G[p][0]),o.1k);8(p=="1f")6.1j(y,"1f",2W);u y[p]=2W+(p!=\'2O\'&&p!=\'34\'?\'K\':\'\')}}}};z.2h=3O(d(){z.14()},13);C.1n=z},3m:d(C,14){8(14)C.1n.2L-=67;u{2z.4h(C.1n.2h);C.1n=20;6.65(C,"E")}}});6.30=d(1g){7 1c={};8(2R 1g==\'66\'){1g=1g.39().40(\';\');S(7 i=0;i<1g.1m;i++){1X=1g[i].40(\':\');8(1X.1m==2){1c[6.45(1X[0].1t(/\\-(\\w)/g,d(m,c){q c.6a()}))]=6.45(1X[1])}}}q 1c};6.1u={3K:d(o){q k.1V(d(){7 4=k;4.f={10:6(o.10,k),23:6(o.23,k),21:6.15.3o(k),T:o.T,2p:o.2p,1Z:o.1Z,3Y:o.3Y,17:o.17,2T:o.2T};6.1u.2J(4,0);6(2z).2F(\'6b\',d(){4.f.21=6.15.3o(4);6.1u.2J(4,0);6.1u.3i(4)});6.1u.3i(4);4.f.10.2F(\'6g\',d(){6(4.f.2p,k).1S(0).L.Q=\'1Y\'}).2F(\'6f\',d(){6(4.f.2p,k).1S(0).L.Q=\'U\'});6(D).2F(\'6e\',d(e){7 2g=6.15.3T(e);7 19=0;8(4.f.17&&4.f.17==\'3M\')7 2o=2g.x-4.f.21.x-(4.1z-4.f.T*4.f.10.1W())/2-4.f.T/2;u 8(4.f.17&&4.f.17==\'38\')7 2o=2g.x-4.f.21.x-4.1z+4.f.T*4.f.10.1W();u 7 2o=2g.x-4.f.21.x;7 3D=1i.3C(2g.y-4.f.21.y-4.2s/2,2);4.f.10.1V(d(2m){11=1i.6c(1i.3C(2o-2m*4.f.T,2)+3D);11-=4.f.T/2;11=11<0?0:11;11=11>4.f.1Z?4.f.1Z:11;11=4.f.1Z-11;3a=4.f.2T*11/4.f.1Z;k.L.1T=4.f.T+3a+\'K\';k.L.N=4.f.T*2m+19+\'K\';19+=3a});6.1u.2J(4,19)})})},2J:d(4,19){8(4.f.17)8(4.f.17==\'3M\')4.f.23.1S(0).L.N=(4.1z-4.f.T*4.f.10.1W())/2-19/2+\'K\';u 8(4.f.17==\'N\')4.f.23.1S(0).L.N=-19/4.f.10.1W()+\'K\';u 8(4.f.17==\'38\')4.f.23.1S(0).L.N=(4.1z-4.f.T*4.f.10.1W())-19/2+\'K\';4.f.23.1S(0).L.1T=4.f.T*4.f.10.1W()+19+\'K\'},3i:d(4){4.f.10.1V(d(2m){k.L.1T=4.f.T+\'K\';k.L.N=4.f.T*2m+\'K\'})}};6.3Q.6d=6.1u.3K;',62,456,'||||el||jQuery|var|if|||||function||fisheyeCfg|||||this||||options||return||||else||||||es|255|elem|document|fx|parseInt|props|css|tp|oldStyle|px|style|result|left|position|easing|display|wrs|for|itemWidth|none|body|vp|top|documentElement|parseFloat|items|distance|nodeEl||step|iUtil|color|halign|margins|toAdd|visibility|clientScroll|newStyles|cs|wb|opacity|styles|prop|Math|attr|duration|nmp|length|animationHandler|hb|old|in|orig|scrollTop|replace|iFisheye|128|parseColor|wr|curCSS|offsetWidth|false|F0|0x|scrollLeft|oldVisibility|hidden|speed|fA|currentStyle|iw|cssRules|139|0px|rgb|oldDisplay|np|restoreStyle|ih|get|width|toInteger|each|size|rule|block|proximity|null|pos|de|container|border|cssSides|true|axis|new|clientHeight|clientWidth|case|pr|queue|absolute|namedColors|pointer|timer|event|marginTop|marginRight|marginLeft|nr|marginBottom|posx|itemsText|test|sideEnd|offsetHeight|opt|src|callback|png|parentNode|oldPosition|window|exec|borderColor|padding|margin|nodeName|bind|hide|show|192|positionContainer|overflow|startTime|complete|self|zIndex|while|getValues|typeof|styleSheets|maxWidth|211|object|pValue|borderLeftWidth|oldFloat|borderTopWidth|parseStyle|innerHeight|sizes|relative|fontWeight|getSize|height|pause|right|toLowerCase|extraWidth|169|innerWidth|borderWidth|scrollHeight|Color|func|traverseDOM|positionItems|scrollWidth|cssSidesEnd|windowSize|stopAnim|floatVal|getPosition|browser|img|224|paddingBottom|paddingLeft|paddingRight|230|paddingTop|offsetTop|borderBottomWidth|notColor|fxCheckTag|offsetLeft|pow|posy|240|firstChild|borderRightWidth|165|140|wid|build|getMargins|center|toggle|setInterval|getScroll|fn|break|max|getPointer|emptyGIF|images|Width|className|valign|apply|split|opera||isFunction|oldOverflow|trim|Date||getTime|colorCssProps|tagName|extend|144|delta|offsetParent|insertBefore|styleFloat|clearInterval|indexOf|firstNum|107|245|fxe|cssProps|values|10000|linear|azure|dl|220|iframe|ul|beige|table|button|form|appendChild|fxWrapper|listStyle|cssFloat|getPositionLite|id|msie|ol|wrapper|div|aqua|td|filter|progid|fixPNG|getSizeLite|horizontally|DXImageTransform|Microsoft|tr|prototype|Array|AlphaImageLoader|black|vertically|getBorder||pageY|clientX|pageX|clientY||getPadding|centerEl|getClient|purgeEvents|nextSibling|tbody|caption|float|w_|buildWrapper|removeChild|destroyWrapper|random|createElement|select|hr|input|br|meta|optgroup|colgroup|col|tfoot|thead|th|header|option|frameset|frame|script|textarea|fontSize|outlineColor|Top|borderTopColor|borderRightColor|borderBottomColor|borderLeftColor|Right|Bottom|stopAll|cos|stop|animate|Left|backgroundColor|textIndent|yellow|bottom|white|silver|red|letterSpacing|lineHeight|outlineOffset|outlineWidth|blue|minHeight|maxHeight|PI|match|dequeue|string|100000000|cssText|RegExp|toUpperCase|resize|sqrt|Fisheye|mousemove|mouseout|mouseover|selectorText|rules|dotted|dashed|transparent|isNaN|switch|solid|double|outset|borderStyle|inset|ridge|groove|purple|minWidth|darkred|203|204|153|darkorchid|233|150|fuchsia|gold|148|darkviolet|122|darkorange|85|darkcyan|darkgrey|darkblue|cyan|brown|darkgreen|100|darkmagenta|darkolivegreen|183|189|darkkhaki|215|darksalmon|olive|182|lightpink|lightgrey|orange|193||lightyellow|maroon|navy|magenta|green|lime|lightgreen|238|lightblue|khaki|lightcyan|173|130|indigo|pink|216'.split('|'),0,{}))

//]]>
</script>

<style type='text/css'>
#jsb {
width: 100%;
position: relative;
padding-bottom:30px;
top:-20px;
}
.jsbc {
position: absolute;
height: 50px;
padding-left: 20px;
}
a.jsi {
display: block;
font: bold 10px Arial, Helvetica, sans-serif;
width: 32px;
color: #000;
top: 0;
bottom: 0;
position: absolute;
text-align: center;
text-decoration: none;
}
.jsi span {
display: none;
padding-left: 20px;
}
.jsi img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
</style>

<data:post.body/>

<!--jQuery Social Bookmarking Widget Starts-->
<div id='jsb'>

<div class='jsbc'>
<a class='jsi' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Delicious</span><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6ET3ZS4mjY8gAw_Uf6AVoAeCH7eAyDkAc9rsuXoAOSxBg6U9iScO8-kPAastHNs_bAGFPs6SaEPnOBidCaVCMVhTndXcjFQ8eItT0a6sSfzsKbWutTjXaLVQoPkykivuCsbCe7n6LiNJ/'/></a>
<a class='jsi' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span>Twitter</span><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ojmD1HyuPioucPcjdJYbf3xo4KJV2Ln9Bgz2kDoVDizvkH6f28keOy-havccqmawJ3I4YgPhH3mKhSuXkNQuLCoTBVNBhJeXuW1IfiO105y-w6ztt9G7m1FvtOoZhKkK3Iq5JfrmZsI2/'/></a>
<a class='jsi' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:blog.url' target='_blank'><span>Facebook</span><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXjq829dCIUoVPgat1V_YzXIHIAqnp-rPoTy9NmHsCRiXKvjOkVdLnzolyx9hsE5uNZIAykuAZI-cBRoKrHS4icy0JvkgsP-N1S04ceLPb-WkVlSkj8Psf5Oa8jEo9h8x0KpgNFwzZVZzR/'/></a>
<a class='jsi' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Digg</span><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpsuXObiJV8AjjH5M1zpCI7YEXsyUJdzO4zUoEV9bwenrn4q73_zl75RLTVzclkxyrwIFDlEQ1YWaeBZpvXBXgBZemi84_3zv4g7S5ca_LDzhN-lJETUmteo2nvGt4F_0s9xhnRsCM3mWf/'/></a>
<a class='jsi' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Stumbleupon</span><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA2Qq4ECV5ceshSLRKCqUOrTZj-5rQCYK_hBZbvS7F2dAnCZkaT2hIfc1-ljf4LPLLvwyl2PjHC6seyV4yOX59JSNVqt_b1duoh7ko05wTge1-mEKlB5LLEfqNpbmF3W2S-SD1KGf6YR4B/'/></a>
<a class='jsi' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:blog.url' target='_blank'><span>Technorati</span><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVJ8DXfzlBJd4AX7ZepqzKYkL8BBi9Sd1THhcyrHJsKSr22_a99SqQWUTveGhLGx4JHe1XX_XFKuUH-g1F_Gp5oAcpHKIF4kL6h2Gb0i3inghCRSGZX0zcQDju51EEzom-03wA3o0WEXCq/'/></a>
<a class='jsi' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><span>RSS</span><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiTD3tAu9qgK_9fb3eGmng1ZsM4UpYvYADcJUWKK9CKvqqWgTEew6l9rUaB_EZofjSgqEP40ufKjjwXOhXjb14vSayzsriobkw1dAEKP0KCi3yOVcCzsa43_JTnHGT1pnQ4DjzmWtzb8v/'/></a>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(
function()
{
jQuery(&#39;#jsb&#39;).Fisheye(
{
maxWidth: 48,
items: &#39;a&#39;,
itemsText: &#39;span&#39;,
container: &#39;.jsbc&#39;,
itemWidth: 64,
proximity: 80,
alignment : &#39;left&#39;,
valign: &#39;bottom&#39;,
halign : &#39;center&#39;
}
)
}
);
</script>
<!--jQuery Social Bookmarking Widget Ends-->

အခုတင္တဲ့ Post ေလးကလည္းဘေလာ့မွာအသံုးဝင္ပါတယ္၊မိမိရဲ႕ဘေလာ့ကိုလာဖတ္တဲ့မိတ္ေဆြ
ေတြအတြက္ဖတ္၇တာပိုျပီးအဆင္ေျပပါတယ္၊ေခါင္းစဥ္ကေနၾကည့္ျပီးေရြးဖတ္လို႕ရတာေပါ့ေနာ္၊
တခ်ိဳ႕ဘေလာ့ေတြမွာလုပ္ထားတာလည္းေတြ႕ၾကမယ္ထင္ပါတယ္၊သူတို႕လိုလုပ္ခ်င္ရင္ေတာ့ေအာက္
မွာ Code ကေတာ့ရွင္းရွင္းေလးပါဘဲ၊ေအာက္မွာလုပ္နည္းနဲ႕တကြ Code

၁။Layout

၂။Edit HTML

၃။Expand Widgets Templateကိုအမွန္ျခစ္ေပးပါ။(CTRL + F)ျဖင့္ရွာပါ၊၊

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

<b:include data='post' name='post'/>

<b:if cond='data:blog.homepageUrl
!= data:blog.url'>
.<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

အခုတင္တဲ့ Post ေလးကေတာ့ဘေလာ့မိတ္ေဆြအားလံုးသိျပီးသားပါဘဲ၊ေတာ္ေတာ္မ်ားမ်ားသံုးထား
တာလည္းေတြ႕ရပါတယ္၊ဒါေပမယ့္တခုႏွင့္တခုမတူပါဘူး၊kp3နည္းပညာ၊၁၊ မွာလည္းရိွပါတယ္၊အခုဟာ
ကေတာ့ေနာက္တမ်ိဳးေပါ့ေနာ္၊kp3နည္းပညာ၊၁၊ကေတာ့ Gadget မွာထည့္လိုက္ရင္၇ပါျပီ၊ဒါေလးကေတာ့
Css Code ေလးပါ ပါတယ္။စိတ္ဝင္စား၇င္ေတာ့ေအာက္မွာထည့္နည္းပါပံုနဲ႕ျပထားေပးပါတယ္။

၁။Dashboard

၂။Layout

၃။Edit HTML

]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';





for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
 }

 if(title!='') postNum++;
 htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
 if(thisNum==2){
  upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
 }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
 if(p==0){
   html += '<span class="showpageNum"><a href="/">1</a></span>';

 }else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
 }
}

if(eFlag ==0 && p == thisNum){
 downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
 eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';


var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);



var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
 }

 if(title!='') postNum++;
 htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
 if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +'</a></span>';
 }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
 if(p==0){
  html = labelHtml+'1</a></span>';
 }else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
 }
}

if(eFlag ==0 && p == thisNum){
 downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
 eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
 document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

မိမိရဲ႕ဘေလာ့ Post မွာ Read More Funtion အသံုးျပဳၾကတဲ့ဘေလာ့မိတ္ေဆြမ်ားအတြက္ Button ပံု
ေလးနဲ႕အစားထိုးနည္းေလးပါ၊ေအာက္မွာပံုနဲ႕တကြ Code ထည့္နည္းေလးျပထားပါတယ္၊ဘေလာ့ဂါမိတ္
ေဆြအားလံုးကိုလည္းခ်စ္ခင္ေလးစားလၽွက္ kp3-မိသားစု

<img src='ဤေနရာမွာပံုလင့္ခ္ကိုထည့္ပါ'/>

ဒါေလးကေတာ့သူမ်ားေတြလုပ္တာႏွင့္မတူေအာင္လုပ္ခ်င္တဲ့ဘေလာ့မိတ္ေဆြေတြအတြက္ပါ၊
NavBar ကို ဖြင့္/ပိတ္ လုပ္တဲ့နည္းေလးပါ၊တစ္ခ်က္ေလးႏိုပ္ရက္ NavBar ကေပၚတယ္ေနာက္တစ္ခ်က္
ျပန္ႏိုပ္လိုက္ရင္ေပ်ာက္သြားတယ္၊အားလံုးသြားၾကည့္လို႕ရေအာင္ DEMO လင့္ခ္ေပးထားပါတယ္၊
Code ကေတာ့အရမ္းကိုရွင္းပါတယ္၊WIDGET မွာထည့္လိုက္ရင္ျပီးပါျပီ။

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>


<span style="cursor:pointer; font-weight:normal; " onclick="ShowHideNav();">
NavBar ဖြင့္/ပိတ္ 
<a style="visibility:hidden;" href="#"></a>
</span>

ဒီေန႕တင္တဲ့ Post ေလးကေတာ့မိမိရဲ႕ဘေလာ့မွာ Vertical menubar ေလးထည့္ခ်င္တဲ့မိတ္ေဆြ
ေတြအတြက္ပါ၊ေအာက္မွာပံုနဲ႕ျပထားေပးပါတယ္၊လိုအပ္ခဲ့ရင္ေအာက္မွာထည့္နည္းနဲ႕တကြ codeေတြ
ေပးထားပါတယ္။

]]></b:skin>

#vertical-1{

border-bottom-width: 0;

}



#vertical-1 ul{

margin: 0;

padding: 0;

font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */

}



#vertical-1 a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 200px; /* width of mrnu */

text-decoration: none;

color: #333222; /* this is the color of alphabet */

border-right:1px solid #000000;

background-color: #FBEC04;

border-bottom: 1px solid #6A6731;

border-left: 7px solid #918C3B;

}



#vertical-1 a:hover {

background-color: #FAF6B9;

border-left: 12px solid #918C3B;

width: 195px; /*lebar */

}



#vertical-1 div.menutitle{

color: white;

border-bottom: 1px solid #053E66;

padding: 5px 3px 5px 13px;

background-color: black;

width: 201px;

font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

<div id="vertical-1">

<div class="menutitle">ေခါင္းစဥ္ထည့္ပါ</div> <!-- this is the 1st title -->

<ul>

<!-- Please alter with your links -->

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<!-- add any links here -->

</ul>



<div class="menutitle">ေခါင္းစဥ္ထည့္ပါ</div> <!-- this is the 2nd title -->

<ul>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<a href="ဤေနရာမွာလင့္ခ္ထည့္ပါ#">အမည္ထည့္ပါ</a>

<!-- add any links here -->

</ul>

</div> <!-- end off vertical-1 menu -->

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

ဒါေလးကလည္းစိတ္ဝင္စားဖို႕ေကားပါတယ္၊က်ေနာ္တို႕ဘေလာ့ကိုဝင္စရာမလိုဘဲနဲ႕အီးေမးလ္သို႕မဟုတ္
ဖုန္းကေန Post တင္နည္းေလးပါ၊ပံုေတြလည္းတင္လို႕ရပါတယ္၊ထံုးစံတိုင္းAttach a fileကေနေပါ့ေနာ္၊
ဒါကေတာ့အရမ္းကိုလြယ္ကူေပမယ့္အရမ္းလည္းအေရးၾကီးပါတယ္၊မိမိရဲ႕ဘေလာ့ကိုအီးေမးလ္လိပ္စာအ
သစ္တတ္ေပးလိုက္တာပါ၊မိမိရဲ႕ဒီဘေလာ့အီးေမလ္လိပ္စာအသစ္နာမည္ကိုဘယ္သူမွမသိေအာင္ထိန္းသိမ္း
သင့္ပါတယ္၊မိမိရဲ႕လ်ိွဳ႕ဝွက္နာမည္သူမ်းေတြသိသြားရင္အီးေမးလ္ပို႕သလိုသူတို႕ရဲ႕ေမးလ္ကေနPostလွမ္း
တင္လို႕ရပါတယ္၊ဒါေၾကာင့္မိမိေပးထားတဲ့လ်ိွဳ႕ဝွက္နာမည္ကိုေကာင္းေကာင္းထိန္းသိမ္းပါလို႕ေျပာခ်င္ပါတယ္။
ေအာက္မွာပံုနဲ႕ျပထားပါတယ္၊

အခုတင္တဲ့ Post ေလးကေတာ့ မိမိရဲ႕ဘေလာ့ Post Size ေျပာင္းတဲ့ Code ေလးပါဘဲ၊ သိျပီးၾကတဲ့မိတ္ေဆြ ေတြလည္းမ်ားမယ္ထင္ပါတယ္၊မသိေသးတဲ့သူငယ္ခ်င္းေတြအတြက္ပါ၊အခုဟာနဲ႕ဆိုရင္(၃)ခုေျမာက္လို႕
ေျပာလို႕ရပါတယ္။Post Size ေျပာင္းႏွင့္ Post အေရာင္ေျပာင္းနည္းေတြလည္း kp3နည္းပညာ၊၁၁၆၊ႏွင့္ kp3နည္းပညာ၊၁ဝ၃၊မွာလည္းရိွပါတယ္၊ပံုစံေတာ့မတူဘူးေပါ့ေနာ္၊ေအာက္မွာထည့္နည္းနဲ႕တကြ Code
ဥပမာၾကည့္လို႕ရေအာင္က်ေနာ္သံုးထားပါတယ္။

၁။Layout

၂။Add a page element

၃။Html/javascript

<script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>
<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option selected value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option selected value="Trebuchet Ms"//>Trebuchet Ms
<option value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="18px"/>18
</select></form><a href="http://kp3family.blogspot.com"><font size="1">Get This</font></a>

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

၁။Layout

၂။Edit HTML

ေအာက္က Code ကိုရွာပါ၊
]]></b:skin>
ေအာက္ကပံုစံအတိုင္းေတြ႕ရမွာပါ၊

    .sidebar h2 {
    margin:0;
    padding:0 0.2em;
    line-height:1.5em;
    }

    ]]></b:skin>
    </head>

.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

background:#C3D9FF;

.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 0.2em;
line-height:1.5em;
background:#C3D9FF;
}

ဘေလာ့ဂါမိတ္ေဆြမ်ားအားလံုးႏွစ္သစ္မွာကိုယ္စိတ္ႏွလံုးက်န္းမာခ်မ္းသာၾကပါေစးလို႕ဆုမြန္
ေကာင္းေတာင္းရင္းႏွင့္ႏွစ္သစ္ Post ေလးအျဖင့္ Popup Boxes ေလးဘေလာ့မွာထားျခင္တဲ့မိတ္ေဆြ
ေတြအတြက္တင္လိုက္ပါတယ္၊ေတာ္ေတာ္ေလးလည္းလွပါတယ္၊ေအာက္မွာအသံုးဝင္ပံုေလးႏွင့္အသံုးျပဳ
နည္း Demo လင့္ခ္ေတြေပးထားပါတယ္၊မိမိရဲ႕ Contact me form ေတြ Cbox ေတြကို Popup စတိုင္း
ေလးနဲ႕လုပ္ရင္ဘေလာ့ကိုပိုျပီးလွပသြားသလိုပါဘဲေအာက္မွာ Demo လင့္ခ္မွာသြားၾကည့္ၾကပါ။
ဆက္သြယ္ရန္ဆိုျပီး Buttonေလးရိွပါတယ္။ႏိုပ္ၾကည့္လိုက္ရင္ေတာ့ေတြ႕ၾကမွာပါေနာ္၊ၾကိဳက္ၾကမယ္
ေတာ့ထင္တာဘဲ..ဟီး.ဒါေပမယ့္ႏွစ္ခုတြဲသံုးလို႕မရတာဆိုးတယ္ကြာ။ေအာက္မွာထည့္နည္းနဲ႕တကြCode

၁။Layout

၂။Edit HTML

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

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

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!   
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
 "opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
 disablePopup();
}
});

});

//]]>
</script>

<style type='text/css'>
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:200px;
width:350px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
</style>