kp3နည္းပညာ၊၁၁၆၊Post ေတြကိုစလံုးအၾကီးအေသးႏွင့္ Post အေရာင္ေျပာင္းတဲ့ Code

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


၁။Dashboard

၂။Layout

၃။Edit HTML

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

</head> 

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

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

၄။Layout

၅။Page Elements

၆။Add a Gadget

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

<!-- Code Begins -->
<!-- http://TheUnnecessaryWorld.co.cc -->
<style type="text/css">
/** TUW Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } #fcw-white { background: #FFFFFF !important; } #fcw-blue { background: #0066CC !important; } #fcw-gray { background: #666666 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#FFFFFF" });
return false;
});

$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});

$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color -- ends

// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});

$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});

$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});

$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Change Font Color </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">white</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
</ul>
</div>

<div class="tuw-fcw">
<h2> Change Font Size </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
</ul>
</div>
</div>
<!-- TUW Blogger Change Font color and size widget ends -->
<!-- Code ends -->

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

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

Related Post

Posted in: HTML, WIDGET