Translate

Followers

အီးေမးလ္မွာဖတ္ခ်င္ရင္အေပၚမွာ Sign In (Menber)ဝင္ၾကပါလို႕ေတာင္းဆိုပါရေစ။ခင္မင္ေလးစားလွ်က္ေကပီသရီးမိသားစု

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

Kp3နည္းပညာ၊၄၃၅၊ဘေလာ့မွာAnimated Notice Box ေလးထည့္ခ်င္ရင္(၂)

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


ေအာက္ကကုဒ္ကိုDesign>>>Add a Gadget>>>HTML/JavaScript Add မွာထည့္ေပးလိုက္ပါ။
<!-kp-3နည္းပညာ-http://kp3family.blogspot.com-->  
<style type="text/css">
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #DB9D9A;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 3px ridge #fff;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow: #58FA58 0 2px 15px;
-moz-box-shadow: #58FA58 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .butang {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .butang button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #DB9D9A;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#DB9D9A));
background: -moz-linear-gradient(top, red, #DB9D9A);
}
#topbar .isi_iklan {
background-color:#81F7BE;
margin:0;
padding:4px;
width: 468px;
border: 2px groove #FF8000;
}
</style>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/iklanpopup.js?attredirects=0&d=1" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="butang"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><text><b>[X]</b></text></a></div>
<div class="isi_iklan">
ဒီေနရာမွာမိမိထည့္ခ်င္တဲ့စာသားေတြကိုေရးေပးလိုက္ပါ။ေက်းဇူးကမာၻ။
</div>
</div>
<!--kp3Animated Notice Box-http://kp3family.blogspot.com-->  

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

Kp3နည္းပညာ၊၄၂၁၊ဘေလာ့မွာRss Feed နဲ႕ Social Gadgetအသစ္ထည့္ခ်င္ရင္

ဘေလာ့မိတ္ေဆြအားလံုးမဂၤလာပါ။အခုတေလာအလုပ္ေတြမ်ားေနလို႕ပိုစ္အသစ္ေတြမတင္ႏိုင္ဘူးျဖစ္ေနတယ္။ဒါေၾကာင့္အခ်ိန္ရတာနဲ႕ဘေလာ့မိတ္ေဆြေတြအတြက္ပိုစ္ေလးတင္ေပးလိုက္
ပါတယ္၊ဘေလာ့မွာRssFeedနဲ႕SocialGadgetအသစ္ေလးပါ၊ေအာက္မွာDemoလင့္ခ္ပံုနဲ႕တကြကုဒ္ရွိပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစားလွ်က္ေကပီသရီးမိသားစု

ဒီမွာနမူနာသြားၾကည့္လိုက္ပါ။
၁။Design

၂။Add A Gadget

၃။Html/Javascript.မွာေအာက္္ကကုဒ္ကိုထည္ေ့ပးလိုက္ပါ။
<table border="0"><tbody>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJBSjslvv-v4Ko-pMVIuC19ZNYbbTUDca_TtjMz011WmD4aHOjYDAdJrKGQynkaMCvk0KwmheiMePxlt7S3EKP572BdeeofSozpGAthZ3oDUwYLe6DCZx-gJVDRMOY0BJAlm3lMXtVmTgQ/s1600/stay+connected.png" /></td><td>
<a href="http://feeds2.feedburner.com/blogspot/kp3family" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYp03ouq3-0H2Vghx8ecNb8Vd0v0hhV3OdN5yqcqgkRNCBh8kHAHGOi321MlR_nCpCRXpW37thP4ZSd8qHlIGlvAf24JvABGsqpQbOkMgqdXun2UsW7RYICQlxc9IszlpVgUREkY1BwGQ/s1600/connect-rss-feed.png" /></a></td><td>
<a href="http://twitter.com/kp3family" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ96Od-_0ibl3vMRrA0hdG-6N5lGFtAosQ-BCmIpmCS8lFhbq3txXk8ahw35jvd6PiSDVw4wQizrwUKMBiK8sjJ3emlBH52DAMaHlGEswl7AzukmmxrJkCqo4RwY_EjSpB7IwoS31DiYM/s1600/connect-twitter-follow.png" /></a></td><td>
<a href="http://facebook.com/jimmyzotn" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLnm4vr9lIBLZoHc9FHv0QLRuQIZ0Oc4_SQQOnyK6abqXyl7tRj3KzYz7YjFFjKKKdFBs-dPEo6qHh6EiaZXf34SqojKevrsytiCvGlA5e1bnsw7LUoqFuvXVuAZ4eQYwpDLuC0QfV-g/s1600/connect-facebook-follow.png" /></a></td></tr>
</tbody></table>
<a href="http://kp3family.blogspot.com/"></a>
မွတ္ခ်က္။http://feeds2.feedburner.com/blogspot/kp3familyေနရာမွာမိမိရဲ႕RssFeedနဲ႕အစားထိုးေပးပါ။http://twitter.com/kp3familyေနရာမွာမိမိရဲ႕Twitterလင့္ခ္နဲ႕အစားထိုးေပးပါ။
http://facebook.com/jimmyzotnမွာလဲမိမိရဲ႕FaceBookနဲ႕အစားထိုးေပးလိုက္ပါ။

ႏွစ္သစ္မွာနည္းပညာသစ္ေလးေတြအတတ္ႏိုင္ဆံုးျဖန္႕ေဝေပးသြားမွာျဖစ္ပါတယ္။ဒါေၾကာင့္အီးေမးလ္ကေနအျမန္ဆံုးသိႏိုင္ရန္ေအာက္ကGoogleFriendမွMenberဝင္ေစခ်င္
ပါတယ္။SignInလုပ္ေပးၾကပါ။ျပီးေတာ့အသစ္တင္တိုင္းပို႕ေပးပါ့မယ္အီးေမးလ္လိပ္စားေလးထားသြားဆိုတဲ့ေနရာမွာမိမိရဲ႕အီးေမးလ္လိပ္စာေတြကိုလဲထည့္ေပးဖို႕ပမေမ့ၾကပါနဲ႕လို႕ထပ္ေျပာ
ခ်င္ပါတယ္။

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

Kp3နည္းပညာ၊၃၅၇၊ဘေလာ့မွာ Kp3 ရဲ႕ၾကယ္ေလးကိုအေရာင္းနဲ႕က်ေအာင္ထည့္ခ်င္ရင္

အခုတင္တဲ့ပိုစ္ေလးကေတာ့kp3နည္းပညာ၊၂၈၅၊ရဲ႕Commentsမွာေတာင္းဆိုထားတာျဖစ္ပါတယ္။ဘေလာ့ဂါေလာကမွာ ဘယ္သူမွမသံုးေသးတဲ့StarFallingColourအသစ္ေလးပါ။မိမိရဲ႕ဘေလာ့မွာKp3ရဲ႕StarFallingColourထည့္ခ်င္တဲ့ဘေလာ့မိတ္ေဆြေတြအတြက္ပါ။ ေအာက္မွာပံုနဲ႕တကြကုဒ္ေလးေပးထားပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစားလွ်က္ပါ။

ဒီမွာထည့္ေပးလိုက္ပါ။
<!-kp-3နည္းပညာ-http://kp3family.blogspot.com-->
<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:601px;top:7px;width:auto;height:653px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:720px;top:64px;width:auto;height:232px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:735px;top:50px;width:auto;height:321px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:608px;top:78px;width:auto;height:125px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:43px;top:62px;width:auto;height:10px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:539px;top:97px;width:auto;height:426px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:791px;top:45px;width:auto;height:178px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:278px;top:104px;width:auto;height:701px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:404px;top:69px;width:auto;height:211px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:331px;top:2px;width:auto;height:293px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:655px;top:89px;width:auto;height:399px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:813px;top:11px;width:auto;height:429px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:254px;top:109px;width:auto;height:146px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:616px;top:20px;width:auto;height:534px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:652px;top:42px;width:auto;height:410px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:707px;top:96px;width:auto;height:39px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:200px;top:76px;width:auto;height:137px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:309px;top:13px;width:auto;height:338px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:622px;top:107px;width:auto;height:676px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:149px;top:76px;width:auto;height:199px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:506px;top:77px;width:auto;height:344px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee>
 
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၂၃၅၊ဘေလာ့ Sidebar မွာ Multi Tabbed Navigation Widget ေလးထည့္နည္း

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

ဒီမွာသြားၾကည့္လို႕ရပါတယ္။

၁။Layout

၂။Edit HTML

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

</head>

ေတြ႕ျပီဆိုရင္ေအာက္မွာ ေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။
<script src='http://www.tricksmachine.com/wp-content/uploads/2010/02/tabber.js' type='text/javascript'/>
    <link MEDIA='screen' TYPE='text/css' href='http://www.tricksmachine.com/wp-content/uploads/2010/02/example.css' rel='stylesheet'/>
၄။Save Tamplate ကိုႏိုပ္လိုက္ပါ။

ဒုတိယအဆင့္။ ။

၅။Layout

၆။Add a Gadget

၇။HTML/JavaScript Add မွာေအာက္က Code ကိုထည့္လိုက္ပါ။
<div class="tabber">

<div class="tabbertab">
<h2>Tab 1</h2>
<p>Tab 1Code ဒီမွာထည့္ပါ.</p>
</div>


<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 Code ဒီမွာထည့္ပါ.</p>
</div>


<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 Code ဒီမွာထည့္ပါ.</p>
</div>
</div>
၈။Save ကိုႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။

မွတ္ခ်က္။ ။Tab 1,Tab 2,Tab 3 ေနရာေတြမွာမိမိၾကိဳက္သလိုနာမည္ျပန္ေျပာင္းေပးၾကပါ။

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

kp3နည္းပညာ၊၂၁၈၊ဘေလာ့မွာ Subscription Links ေတြကိုလြယ္ကူစြာထည့္နည္း

ဒါေလးကေတာ့ ဘေလာ့မွာ Subscription Links ေတြကိုထည့္ခ်င္တဲ့မိတ္ေဆြေတြအတြက္ပါ။ဒီSubscription Linksကေတာ့တခ်ိဳ႕Tamplate မွာေတာ့ Auto ပါလာပါတယ္။ မပါတာကပိုမ်ားမယ္ထင္ပါတယ္။ အသစ္ေလးပါအရင္က လည္း Add a Gadgetမွာမရိွပါဘုူးအခုမွဘဲထည့္ထားတာပါလို့ေျပာခ်င္ပါတယ္။ ေအာက္မွာထည့္နည္းေလးေတြ အဆင့္ဆင့္ကိုပံုနဲ့တကြျပထားပါတယ္။ ဘေလာ့မိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားတဲ့ kp3မိသားစု


အဆင့္-၁-Layout tabကိုႏိုပ္ျပီး Add a Page Elementကိုသြားပါ။ေအာက္ပံု


အဆင့္-၂-Subscribe To ေနရာမွာမိမိၾကိဳက္တဲ့နာမည္ေပး လို႕ရပါတယ္။ေအာက္ပံု


အဆင့္-၃-မိမိရဲ့ဘေလာ့ Homepage မွာေအာက္ပံုအတိုင္းျမင္ရပါမည္။


အဆင့္-၄-အေပၚက Posts ႏွင့္ Comments ကိုႏိုပ္ရင္ေအာက္ပံုအတိုင္းေတြ႕ရမည္။



အဆင့္-၅-ကေတာ့ Save ကိုႏိုပ္ျပီးမိမိရဲ့ဘေလာ့ Home page ကိုျပန္ၾကည့္လိုက္ပါ။ၾကိဳက္ၾကမယ္လို့ေတာ့ ထင္ပါတယ္။

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

kp3နည္းပညာ၊၂၁၁၊ဘေလာ့ ႏွင့္ ဝက္ဆိုက္အတြက္အသံုးဝင္တဲ့ Tool ၉ ခု

အခုတင္တဲ့ Post ေလးကေတာ့ဘေလာ့ႏွင့္ဝက္ဆိုက္အတြက္အသံုးဝင္တဲ့ Tool ၉ ခုျဖစ္ပါတယ္။ သိျပီးၾကတဲ့ မိတ္ေဆြေတြမ်ားသလိုအခုေနာက္ပိုင္းျမန္မာဘေလာ့ဂါအသစ္ေတြပိုးျပီးတိုးလားလို႕ထပ္တင္ေပးလိုက္တာပါ။ ဘေလာ့မွာအသံုးဝင္တဲ့ဟာေလးေတြပါ။ ဘေလာ့ကိုအခုမွအသစ္စလုပ္တဲ့ မိတ္ေဆြေတြအတြက္ တင္လိုက္တာ ပါ။ ေအာက္မွာပံုနဲ႕တကြလင့္ခ္ေတြျပထားေပးပါတယ္။

၁။Google Translate:


 ၂။Cbox:



 ၃။Yahoo Media Player:


၄။Google Talk Badge:






 ၅။ZOHO Creator

၆။Web2PDF Online


၇။whos.amung.us


၈။ShareThis or AddThis



၉။Outbrain Star Ratings Widget


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


kp3နည္းပညာ၊၁၆၄၊ဘေလာ့မွာ jQuery Text/Font Size Resizer ေလးထားခ်င္ရင္


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


                                                                         DEMO

၁။Layout

၂။Edit HTML

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

ေအာက္က Code ကိုရွာပါ၊Ctrl+F
]]></b:skin>
ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္လိုက္ပါ။
/* resizeFont
*/
#resizeFont{
text-align:right;
margin-right:10px;
}
ေအာက္က Code ကိုထပ္ရွာပါ။
</head>
ေတြ႕ျပီဆိုရင္ေအာက္မွာ ေအာက္က Code ကိုထည့္ေပးလိုက္ပါ၊
<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>
၄။Save Tamplate ႏိုပ္လိုက္ပါ။မျပီးေသးျပီ။။

ေနာက္တဆင့္

၅။Layout

၆။Page Elements

၇။Add a Gadget

၈။HTML/Javascript' မွာေအာက္က Code ကိုထည္႕လိိုက္ပါ။
style="color: magenta;"><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>
၉။Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။။

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

kp3နည္းပညာ၊၁၅၇၊Recent Comments ၾကိဳက္သေလာက္ေပၚေစခ်င္ရင္

အခုတင္တဲ့ Post ေလးကလည္းသိပ္ေတာ့အေရးအၾကီးပါဘူး၊ေတာ္ေတာ္မ်ားမ်ားသိျပီးသားပါဘဲ။
ဒါေပမယ့္မသိေသးတဲ့မိတ္ေဆြေတြရိွခဲရင္သံုးလို႕ရေအာင္ျပန္တင္တာပါ၊Recent Commentsေတြ
ကိုၾကိဳက္သေလာက္ေပၚထားလို႕ရတဲ့ Code ေလးပါ၊kp3နည္းပညာ၊၁၃၃၊မွာလည္းျပထားပါတယ္၊
ဒါေပမယ့္kp3နည္းပညာ၊၁၃၃၊မွာ(၅)ခုထက္အပိုထားလို႕မ၇ဘူးေပါ့ေနာ္.ဒီ Code ကေတာ့အရမ္းကို
ရွင္းပါတယ္၊လက္ရိွက်ေနာ္သံုးေနတဲ့ Code ပါ။ေအာက္မွာထည့္နည္းနဲ႕တကြ Code
<script style=text/javascript src=http://www.freewebs.com/filer/blogger/rc.js ></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your blog name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><div><small>↑ <a href=http://kp3family.blogspot.com/>Grab This </a><a href=http://kp3family.blogspot.com>Widget</a></small></div>


kp3familyေနရာမွာမိမိရဲ႕ဘေလာ့နာမည္ေလးအစားထိုးေပးလိုက္ပါ။
25=ဟာRecent Commentsအေ၇အတြက္ပါ၊ၾကိဳက္သေလာက္ေျပာင္းေပးၾကပါ။

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

kp3နည္းပညာ၊၁၅၂၊ဘေလာ့မွာ Page Navigation ထည့္ခ်င္ရင္(၂)

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

၁။Dashboard

၂။Layout

၃။Edit HTML



ေအာက္က Code ကိုရွာပါ၊
]]></b:skin>
ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ေတြကိုထည့္ေပးလိုက္ပါ။
.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;
}
၄။Layout

၅။Page Elements

၆။Add a Gadget

၇။HTML/Javascript' မွာေအာက္က Code ကိုထည္႕လိိုက္ပါ။ေအာက္ပံု



<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>
၈။Save ႏုိပ္လိုက္ပါ၊ျပီးပါျပီ။။

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

kp3နည္းပညာ၊၁၄၅၊ဘေလာ့Post FontကိုDropdownပံုစံေျပာင္းခ်င္ရင္

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

၁။Layout

၂။Add a page element

၃။Html/javascript
&lt;script&gt; function go1(){ if (document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value != &quot;none&quot;) { 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 != &quot;none&quot;) { document.getElementById('main').style.fontFamily =document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value } } &lt;/script&gt; &lt;form id=&quot;forma&quot; name=&quot;selecter2&quot; method=&quot;POST&quot;&gt; &lt;select onchange=&quot;go2()&quot; style=&quot;font-family:verdana;font-size:8pt&quot; name=&quot;select3&quot; size=&quot;1&quot;&gt; &lt;option value=&quot;Times New Roman&quot;/&gt;Times New Roman &lt;option value=&quot;Arial&quot;/&gt;Arial &lt;option selected value=&quot;Book Antiqua&quot;/&gt;Book Antiqua &lt;option value=&quot;Bookman Old Style&quot;/&gt;Bookman Old Style &lt;option value=&quot;Century Gothic&quot;/&gt;Century Gothic &lt;option value=&quot;Comic Sans Ms&quot;/&gt;Comic Sans Ms &lt;option value=&quot;Tahoma&quot;/&gt;Tahoma &lt;option selected value=&quot;Trebuchet Ms&quot;//&gt;Trebuchet Ms &lt;option value=&quot;Verdana&quot;/&gt;Verdana &lt;/select&gt; &lt;select onchange=&quot;go1()&quot; style=&quot;font-family:verdana;font-size:8pt&quot; name=&quot;select2&quot; size=&quot;1&quot;&gt; &lt;option value=&quot;8px&quot;/&gt;8 &lt;option value=&quot;9px&quot;/&gt;9 &lt;option value=&quot;10px&quot;/&gt;10 &lt;option value=&quot;11px&quot;/&gt;11 &lt;option selected value=&quot;12px&quot;/&gt;12 &lt;option value=&quot;14px&quot;/&gt;14 &lt;option value=&quot;16px&quot;/&gt;16 &lt;option value=&quot;18px&quot;/&gt;18 &lt;/select&gt;&lt;/form&gt;&lt;a href=&quot;http://kp3family.blogspot.com&quot;&gt;&lt;font size=&quot;1&quot;&gt;Get This&lt;/font&gt;&lt;/a&gt;

၄။Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။။

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

kp3နည္းပညာ၊၁၁၈၊မိမိရဲ႕ဘယ္သူက Comments ဘယ္ေလာက္ေပးတယ္ဆိုတာသိခ်င္ရင္

ဒီေန႕က်ေနာ္တင္မယ့္Post ေလးကေတာ့Top Comments automatically to Blogger
ဘယ္သူက Comments ဘယ္ေလာက္ေပးတယ္ဆိုတာဘေလာ့မွာနာမည္ေလးနဲ႕ေပၚေအာင္
ထားျခင္ရင္ေအာက္မွာလုပ္နည္းနဲ႕တကြ Code

၁။Layout

၂။Page Elements

၃။Add a Gadget

၄။HTML/Javascript' မွာေအာက္က Code ကိုထည္႕လိိုက္ပါ။
<script type="text/javascript">
function pipeCallback(obj) {
 document.write('<ol>');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=47909d73002419d14e697928bd9c4f24&url=http%3A%2F%2Fkp3family.blogspot.com&num=10&filter=yourname" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a
href="http://kp3family.blogspot.com/2009/12/kp3_17.html">kp3family</a></span>

၅။Save ႏုိပ္လိုက္ပါ၊ျပီးပါျပီ။။


မွတ္ခ်က္။ ။kp3family.blogspot.com ေန၇ာမွာမိမိရဲ႕ဘေလာ့လင့္ခ္ကိုထည့္ပါ။
ဘေလာ့လင့္ခ္ထည့္၇ာတြင္ (http://)ကိုမထည့္ရပါ။။

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

kp3နည္းပညာ၊၁ဝ၆၊မိမိရဲ႕ဘေလာ့မွာMulti tab Widgetထည္႔ ခ်င္ရင္

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



၁။dashboard

၂။layout


၃။add a page element

၄။html/javascript

  <style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #0084ce; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #0084ce; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #0084ce; border-right:1px solid #0084ce; border-top:1px solid #0084ce; border-bottom:0px solid#0084ce; float: left;
    display: block; width: 79px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 11px; font-weight: 900; color: #000000}
    </style>

    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>ဤေနရာမွာTab-1နာမည္ေရးပါ</a> <a>ဤေနရာမွာTab-2နာမည္ေရးပါ</a>

    <a>ဤေနရာမွာTab-3နာမည္ေရးပါ</a></div>
    <div style="width: 300px; height: 310px;" class="Halamans">

    <div class="Halaman">
    <div class="Alas">

 ဤေနရာမွာTab-1 Code ထည့္ပါ

    </div>
    </div>

    <div class="Halaman">
    <div class="Alas">

   ဤေနရာမွာTab-2Codeထည့္ပါ

    </div>
    </div>

    <div class="Halaman">
    <div class="Alas">

    ဤေနရာမွာTab-3Codeထည့္ပါ
   

    </div>

    </div>
    </div>

    </div></form>

    <script style="text/javascript" src="http://sites.google.com/site/tntbystc/Home/tabwidget-smart.txt?attredirects=0"></script>
    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>


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

kp3နည္းပညာ၊၉၈၊Pop Up Navigation Menu From Bucket

ဒါေလးကေတာ့ဘယ္လိုေခၚမွာလဲဆ္ိုရင္ေတာ့Pop Up Navigation Menu From Bucketေပါ့ေနာ္၊
က်ေနာ္တို႕ရဲ႕ႏွစ္သက္သည့္လင့္ခ္အခ်ိဳ႕ကိုေအာက္ပံုအတိုင္းျခင္းေလးထဲမွာထည့္ထားျခင္ရင္ေပါ့
ေအာက္ကျခင္းပံုကိုႏိုပ္လိုက္ရင္၊က်ေနာ္တုိ႕လင့္ခ္ေတြကိုအေပၚဘက္ကိုတက္လာတယ္။က်ေနာ္
အားလံုးပိုျပီးနားလည္ေအာင္ DEMO လင့္ခ္ေပးထားပါတယ္။မိမိရဲ႕ဘေလာ့ပိုျပီးလွပသြားမယ္လို႕
ေတာ့ထင္တာဘဲ...ဟီး




DEMO

ပထမအဆင့္


၁။dashboard>>>>>


၂။layout>>>>>


၃။add a page element>>>>>


၄။html/javascript>>>>>

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

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/stack.png"/>
<ul id="stack">
<li><a href=""><span>Aperture</span><img alt="Aperature" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/adobeAcrobat.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/aperture.png"/></a></li>
<li><a href="#"><span>All Examples</span><img alt="Photoshop" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/aperture.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/photoshop.png"/></a></li>
<li><a href="example3.html"><span>Example 3</span><img alt="Safari" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/safari.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/safari.png"/></a></li>
<li><a href="example2.html"><span>Example 2</span><img alt="Coda" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/finder.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/coda.png"/></a></li>
<li><a href="index.html"><span>Example 1</span><img alt="Finder" src="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/images/dock/rss.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/images/dock/rss.png"/></a></li>
</ul>
</div><!-- end div .stack -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://files-teckzest.bravehost.com/fisheye-iutil.min.js" type="text/javascript"></script>


ဒုတိယအဆင့္

၁။ LAYOUT>>>

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

၃။Expand Widget Templatesကိုမွန္ုျခစ္ပါ>>>

၄။Ctrl+F နဲ႔ေအာက္က Code ကိုရွာပါ။


]]></b:skin>


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


.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
right:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }
၅။Save Template ကိုႏိုပ္ပါ။ျပီးပါျပီ။။

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

kp3နည္းပညာ၊၉၇၊မိမိရဲ႕ဘေလာ့မွာ Google Search Engine စတိုင္ေလးသံုးခ်င္

မိမိရဲ႕ဘေလာ့မွာ Google Search Engine စတိုင္ေလးသံုးျခင္ရင္ေပါ့ေနာ္၊ေအာက္မွာနမူနာ
ပံုႏွင့္တကြ Code

<form id="searchThis" action="/search" style="display: inline;"
method="get"><input id="searchBox" style="width: 200px;"
value="မိမိေရးလိုသည့္စာဒီေနရာမွာေရးပါ...." name="q" onclick="this.value=''"
type="text"/><input id="searchButton" value="Search!" type="submit"/>
</form>



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

kp3နည္းပညာ၊၉ဝ၊Email Subscrtiption Form

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

အီးေမးလ္ Subscription Form ကိုဘေလာ့မွာဘယ္လိုထည့္မွာလဲဆိုရင္ေအာက္ပံု




မိမိမွာ FeedBurner Account ရွိျပီးသားဆိုရင္၊တျခားသူေတြက subscribe လုပ္လိုုက္ရင္,
မိမိက Post အသစ္တင္လိုက္တိုင္းမွာသူတိုရဲ႕အီးေမးလ္ထဲကို Auto ေရာက္ေအာင္ပို႕ေပး
ပါတယ္။မိမိရဲ႕ဘေလာ့ကိုအျမဲလာဖတ္ၾကတဲ႕သူငယ္ခ်င္းေတြအတြက္ပါအဆင္ေျပတာေပါ့
ေနာ္၊၊၊


အဆင့္ ၁။FeedBurner accountထဲကို Sign in ဝင္လိုက္မယ္ေနာ္၊ သင့္မွာ FeedBurner Account မရိွေသးဘူးဆိုရင္အရင္ဆံုးregisterလုပ္ဖို႕ရန္ ဒီမွာ အရင္သြားပါ။


အဆင့္ ၂။My Feeds ကို Click ႏိုပ္လိုက္ပါေအာက္ပံု။ေအာက္မွာေပၚလာလိမ့္မည္မိမိရဲ႕ဘေလာ့နာမည္ ေလးကိုႏိုပ္လိုက္ပါ။




အဆင့္ ၃။မိမိရဲ႕ဘေလာ့နာမည္ေလးကိုႏိုပ္ျပီးရင္ Menu Tab က Publicize tab ကိုႏိုပ္လိုက္ပါ၊ ေအာက္ပံု




အဆင့္ ၄။ဆိုက္ဘားမွာျမင္ရပါလိမ့္မည္ Email Subscriptions ကိုႏိုပ္လိုက္ပါ၊ေအာက္ပံု




အဆင့္ ၅။ေအာက္ပံုအတိုင္းျမင္ရပါလိမ့္မည္။



အဆင့္ ၆။ေအာက္မွာ Code ေပၚလာလိမ့္မည္။ေအာက္ပံု



အဆင့္ ၇။ေအာက္က Code ကို Copy လုပ္ျပီး၊မိမိရဲ႕ဘေလာ့ထဲကိုျပန္ဝင္မယ္

dashboard>>>>>layout>>>>>add a page element>>>>>html/javascript

မိမိၾကိဳက္တဲ့ေနရာမွာထားလိုက္ေပါ့ေနာ္ ျပီးပါျပီ၊၊၊၊

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

kp3နည္းပညာ၊၈၇၊Recent Comments ေတြကို Summariesနဲ႕လုပ္ခ်င္ရင္

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

၁။ Layout.

၂။ Page Elements.

၃။ Add a Gadget.

၄။ HTML / Javascript.

<ul style="font-style: italic;"><script style="text/javascript
">
function showrecentcomments(json) {
for (var i = 0; i < 20; i++) {
var entry = json.feed.entry[i];
var ctlink;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");

document.write('<li style="text-align:left">');
document.write('<a href="' + ctlink + '">' + 
entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br>');
if (comment.length < 150) {
document.write(comment + '...<a href="' + ctlink + '"> (more)
</a><br><br>');
}
else
{
comment = comment.substring(0, 150);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '"> (more
)</a><br><br>');
}
}
document.write('</li>');
}
</script>
<script src="http://ဘေလာ့အမည္ထည့္ပါ.blogspot.com/feeds/comments/
default?alt=json-in-script&callback=showrecentcomments">
</script></ul>


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

kp3နည္းပညာ၊၈၇၊မိမိရဲ႕ဘေလာ့မွာ Facebook Badge ထည့္နည္းေလး

ဒါေလးကေတာ့မိမိရဲ႕ဘေလာ့မွာ Facebook Badge ထည့္နည္းေလးပါ၊ဘေလာ့ကပိုမိုးျပီးျပည့္စံုသြား
တာေပါ့ေနာ္၊ေအာက္မွာသြားရမည္ေနရာေလးျပထားေပးပါတယ္။





၁။ဒီေနရာမွာအရင္သြားမယ္၊

၂။ေအာက္ကျပထားသည့္ပံုအတိုင္း Badge ေတြ႕ရလိမ့္မယ္။မိမိႏွစ္သက္သည့္ Badgeႏိ္ုပ္လိုက္ျပီး
ရလာတဲ့ Code ကိုထံုးစံတိ္ုင္း၊

၃။Copyလုပ္ျပီး Dashboard ->>> Layout ->>> Page Elements- >>>HTML/JavaScript>>>
မွာ Paste လုပ္လိုက္ပါ။

၄။Save ကိုနိုပ္လိုက္ပါ။ျပီးပါျပီ။

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



kp3နည္းပညာ၊၇ဝ၊Wibiya Widget Toolbar

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

ေအာက္မွစမယ္ေနာ္

Wibiya Widget Toolbarမွာပါဝင္တာေတြကေတာ့
၁. Translator
၂. Posts Navigator (Recent Article and Random Article)

၃. Community via Facebook

၄. Twitter Widget

၅. RSS Subscribers Bar
၆. Sharing Bar
၇. Blog Searches

၈. Photo Gallery

၉. Live Notifications

၁ဝ. Facebook Fan Page

၁၁. Games


ပထမအဆင့္သြားမယ္ေနာ္ Wibiya.com

ေအာက္မွာျပထားတဲ့buttonေလးကိုနိုပ္မယ္


နာမည္၊အီးေမးလ္၊Site နာမည္ေတြကိုေတာင္းလိမ့္မယ္။ေအာက္ပံု



အီးေမးလ္လိပ္စားေတြျဖည့္ျပီးသြားရင္ သူ႕ဆီကေနToken နံပါတ္ေတြျပန္ပို႕လာလိမ့္မည္။
မွတ္ခ်က္။၂ ရက္-၂ရက္ၾကာတတ္ပါတယ္

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

၁.Create A Account၂. Select A Theme ၃. Select Your Apps ၄. Get It Now

၁။ေတာင္ဆိုထားတာျဖည့္ျပီးျပီဆိုရင္(ဘာလဲဆိုတာေတာ့ေျပစရာမလိုေလာက္ပါဘူး)
ရွင္းရွင္းေလးေတြပါဘဲ

၂။Select the theme ေပါ့ေနာ္ေအာက္ပံု



၃။မိမိဘာ widget ေတြထည့္မွာလဲေပါ့ေနာ္ျဖည့္ျပီးသြားရင္

၄။ေနာက္ဆံုးအဆင့္ကေတာ့မိမိဘယ္ဝက္ဆိုက္မွာထားမွာလဲေပါ့ေနာ္ ေအာက္ပံု






မိမိေရြးျခင္းသည့္ထည့္ျခင္သည့္ဆိုက္မွာထည့္လိုက္ၾကေပါ့ေနာ္

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

kp3နည္းပညာ၊၆၉၊Auto Scrolling - Recent Posts

ဒါေလးကေတာ့Auto Scrolling - Recent Postsလို႕ေခၚပါတယ္၊တခ်ိဳ႕ဘေလာ့ေတြမွာ
တင္တာလည္းျမင္ဘူးပါတယ္Codeကေတာ့တူသလားေတာ့မသိဘူး။ လိုအပ္ခဲ့ရင္သံုးလို႕ရေအာင္ပါ သိျပီးၾကတဲ့မိတ္ေဆြလည္းမ်ားမယ္ထင္ပါတယ္ ေအာက္မွာေတြ႕ရတဲ့အတိုင္းပါ....



Code ကေတာ့ဒါေလးပါဘဲ

<script style="" src="http://dsai.588.googlepages.com/RecentPostsScrollerv2.js"> </script><script style=""> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar=">>»>>»"; </script> <script style="" src="http:// သင့္ရဲ႕ဘေလာ့အမည္.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2"> </script>

ထည့္နည္းကေတာ့ထံုးစံတိုင္းပါဘဲ>>>Layout ->>> Add a Gadget ->>> HTML/Javascript

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

kp3နည္းပညာ၊၆၆၊မိမိရဲ့ဘေလာ့related posts ေတြကို thumbnails စတိုင္နဲ႕ Auto လုပ္ခ်င္ရင္

ဒါေလးကေတာ့အမိမိရဲ related posts ေတြကို thumbnails စတိုင္နဲ႕ Auto လုပ္ေပးတဲ့လင့္ခ္ေလးပါ
တခ်ိဳ႕ဘေလာ့မိတ္ေဆြေတြသံုးတာလည္းျမင္ဘုူးပါတယ္၊မသိၾကေသးတဲ့မိတ္ေဆြေတြအတြက္ပါ......
HTML Code နဲ႕လုပ္ျခင္ရင္လည္းရပါတယ္ Code နဲ႕ဆိုရင္ပိုျပီးအလုပ္မ်ားသြားပါ၊
ဒါေၾကာင့္သူ႕ရဲ့လင့္ခ္ကိုသြားျပီးမိမိနွစ္သက္လို ဘယ္ေလာက္ေပၚေစျခင္လည္းဆိုတာေရြးလို႕ရပါတယ္
အ၇မ္းလည္းရွင္းပါတယ္။ၾကိဳက္ၾကမယ္လို႕လည္းေမ်ာ္လင့္ပါတယ္။က်ေနာ္ရဲ႕ဘေလာ့မွာလည္းေတြ့ၾကမွာပါ
Post တခုစီရဲ့ေအာက္မွာအကြက္ေလးနဲ႕ေပါ့ေနာ္.။
ေအာက္မွာပံုနဲ႕တကြလင့္ခ္






လင့္ခ္ကေတာ့ ဒီမွာ ပါ။
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

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