မိတ္ေဆြ... ယခုလိုလာေရာက္ လည္ပတ္ျပီး နည္းပညာေတြေလ့လာသြားတဲ့အတြက္ မိတ္ေဆြအား အထူးပဲေက်းဇူးတင္ရွိပါတယ္ ေနာက္လဲ လာလည္ပါလို႕ဖိတ္ေခၚပါရေစ....
Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Saturday, 8 February 2014

ဆိုဒ္တက္လာလာခ်င္း Facebook Like box ေပၚလာေအာင္လုပ္နည္း (Blogger only)

မဂၤလာပါ။ 

 Tech in Blogging  မွႀကိဳ ဆိုပါတယ္။ ကြ်န္ေတာ့္ဆိုဒ္မွာ အလွဆင္ထားတဲ့ ဒီ 

box ကိုေ၀မွ်လိုက္ပါတယ္။ အဲ့ဒါမခက္ပါဘူး။ ဆိုဒ္ေလးစ၀င္တာနဲ႕ ဒီ fb like 

box ေပၚလာတာနဲ႕ လူတိုင္းကို Like လုပ္ဖို႕ဆြဲေဆာင္ေစတယ္ေလ။ လိုခ်င္ရင္

 ယူသြားလို႕ရပါတယ္။ Live Demo ကိုကလစ္ၾကည့္ပါ။ မယံုဘူးဆိုရင္...

http://adf.ly/NwYYY မွာယူပါ။ ဒီမွာ ယူပါ။ အဲ့ဒီမွာလည္း အသံုးျပဳနည္းေရးထားပါတယ္။ အဆင္ေျပပါေစ။

Source ဘေလာ့ခရီးသည္

ဘေလာ့တခုမွ လိုျခင္ေသာ ပုံ..ဒီဇိုင္း..ေတြရဲ႕ လင့္..ကုဒ္ ေတြကိုအလြယ္ ရယူနည္း

ကဲ  ဘေလာ့ခရီးသည္ရဲ႕  ဘေလာ့မိတ္ေဆြအေပါင္းတို႕ဗ်ားးးးးးးးးးးးးးးးးး သည္ေန႕ေတာ့  မဂၤလာသတင္းေလးလို႕လဲ ေျပာလို႕ရပါမယ္... ေနာက္..မေကာင္းေသာအတတ္ပညာကို သင္ေပးတယ္လို႕လဲ  ဆိုနိဳင္ပါတယ္....ေိေိ...ဘာျဖစ္ျဖစ္ ပညာဆိုတာ ထိန္ခ်န္မထားအပ္ဘူးးလို႕
ဆိုရိုးစကားရွိတယ္မလားး တတ္သည့္ပညာ  မွ်ေ၀ျခင္းကလည္း မဂၤလာတပါးလို႕ ဆိုရမယ္ေပါ့..အဟိ
မေကာင္းတာသင္မယ့္လူက  တရားသေဘာေတြပါေနျပီ... မေကာင္းတာဆိုေပမယ့္  ေကာင္းပါတယ္ဗ်ာ
ဒါေလးက ဘေလာ့ကာ အသစ္ေလးေတြအတြက္ အထူး လက္ေဆာင္ပါ... 
ဘာလဲဆိုေတာ့ တျခားပညာရွင္မ်ားရဲ႕ ဘေလာ့ေပၚက  အလွဆင္ထားတဲ့ ပုံေလးေတြ ဆိုဒ္ဘားက  ဒီဇိုင္းေလးေတြ  ေနာက္ မိမိဘေလာ့ကိုျပဳျပင္တဲ့ေနရာမွာလဲ...အရမ္းအသုံးး၀င္ပါတယ္.... ကိုယ္ျပဳျပင္
လိုတဲ့ ေနရာေတြကိုသည္နည္းေလးနဲ႕ ရွာျပီး Html  မွာ ကိုယ္လိုအပ္သလို အစားသြင္းအလွဆင္နိဳင္လို႕ပါဘဲ.....
ပုံေလးေတြနဲ႕ ေသျခာရွင္းျပထားပါတယ္.... သည္ေနရာမွာ ဘေလာ့ခရီးသည္ရဲ႕ အေပၚက ပုံၾကီးကို
ပုံရဲ႕ လင့္ယူၾကမယ္ဆိုပါေတာ့...အဲတာေလးနဲ႕ ဥပမာျပ ေပးသြားးမွာပါ
 အဆင့္  (၁).....  အဆင့္-၁ အေနနဲ႕... မိမိတို႕ လိုျခင္ေသာ ဘေလာ့ကို၀င္လုိက္ပါ  အဲဘေလာ့ရဲ႕
                       လိပ္စာေရွ့က  လိုဂိုေလးကို ကလစ္ပါ...ေဘာက္ေလးတစ္ခုက်လာမယ္... အဲမွာ more information ဆိုတာဆက္ကလစ္လုိက္ပါ။

အဆင့္  (၂)    သည္အဆင့္က်ေတာ့...ေဘာက္ ဇယားၾကီးးတစ္ခုက်လာပါျပီ.. အဲထဲက Media ဆိုတာ
                   ကိုကလစ္ရမွာျဖစ္ပါတယ္...အဲတာဆို  မိမိတို႕လိုျခင္ေသာ လင့္မ်ား ကုဒ္မ်ားကို ရွာေဖြနိဳင္
                    မွာျဖစ္ပါတယ္...


အဆင့္  (၃)   ဒါကေတာ့ ေနာက္ဆုံးအဆင့္ဆိုပါေတာ့....အဲထဲမွာဘဲ ပုံျပထားသလိုပါ  တခုခ်င္းရွာေဖြ  
                  ခိုးးယူ   အဲေလ.... ေလ့လာနိဳင္ပါတယ္လို႕ ေျပာလိုပါတယ္... မိမိတို႕ တခုခ်င္းကလစ္တာနဲ႕
                  ကလစ္တဲ့လင့္ဆိုင္ရာ ပုံေလးေတြဟာ ာေအာက္မွာ ျပေနပါတယ္..ကိုယ္လိုျခင္တဲ့ပုံေရာက္တာနဲ႕   အဲလင့္ကို ကူးယူု အသုံးျပဳနိဳင္ပါျပီ..... အားလုံးး  အဆင္ေျပၾကပါေစ..မခိုးတတ္ပါက...ဟုုသည္ပါးစပ္... မလုပ္တတ္ပါက
ေအာ္ခဲ့ပါေနာ္... ေိေိ...ဗ်ဲ.......


 အဆင္ေျပပါေစ
 မိမိဘေလာ့ ျပဳဲပင္ရာမွာ အရမ္းအသုံး၀င္ျပီးး ျမန္ဆန္ေစပါတယ္...
 

ဘေလာ့မွာ Slider တစ္ခုျပဳလုပ္ျခင္း (၄)

 Excellent Content SlideShow+Slider to Blogger / WebSite

 မဂၤလာပါ  သည္နည္းပညာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ ကိုယ္ညႊန္ျခင္ အေရးၾကီး ပို႕စ္ေနရာေလးေတြကို စလုိက္တာ ပုံစံေလးနဲ႕ လွလွပပ  ညႊန္ျပလိုတဲ့နည္းလမ္းေလးျဖစ္ပါတယ္... သည္လို နည္းလမ္းေလးေတြကို ပုံစံအမ်ိဳးမ်ိဳးနဲ႕ တင္ျပေပးသြားမွာ ျဖစ္ပါတယ္. ေအာက္မွာ နည္းလမ္းနဲ႕လိုအပ္တဲ့ကုဒ္ေတြ ေပးထားပါတယ္... ေလ့လာျပီး ကလိလုိက္ေနာ္....လန္းးးတယ္...ဂ်

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

အဲေနရာမွာ ေအာက္ကကုဒ္ေတြ ကို ထည့္ေပးလိုက္ပါေနာ္....

<script src="http://24work.webs.com/24work-blogspot/featured-post/17-content-code/excellent-slideshow-compressed.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0UqhsiJP4uBtNt_kSfDADiEBjwtQapmSkjIg5ZTBqRneDRdufpNaZpZksgKF1J4oIsPU8A2PwVCI7HLz1wF3ttpnvUMc9zK8tL7oa4KU-x-AVTB87m_HnzcGsmY32xJS5byuxKDmy6s4S/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhox0IBsbbo4RZ8MCWRype1f1-E1kvNwQ1Q7r6yKIder4un0dwHcEa2y9ge1Y6A17zgL1uszQBp8DeF29wJruzNN6CI2X0pLrwg-r_m5Il03YtqyWHlxdsoNnMnh84KH5lce-6M5qKHM62i/) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVT18jJWkcE3nw_Q0TvgeT6uSNzRxX_mI7FhSAD6rHW0GKTuDSZ7Bw5S0u1ODEc5QDHC9eFpi4QI-1vCFPycdsUAIVm9zsjsuMfmFqUIHFkg7lgY7xv338YmzhdBHgyY4v9G2IQMh8wPV8/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUKqnhaciSXBQ9dj6M0nF-rxxLVnQtoG-teCycf-fj18ZMhVNXJOd5ZESrABG8XURksmhkX8MVFSSVpe6u569QRwun-sl1MBcmvHKn4g-KlEayhyphenhyphen4CQBTc41pbWVq9irvtwxMkLXbu3bjt/) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiTZJumtuHNcwM1CSEt8Z3FiY_NcqwAIaE7agBgNd0cMvrrBOHILc8Hr2HrQ7inh6zJALCaeoWAUdw000gBRkkQowhxi5QvJuMYV_6g3Q8PHulTv_jTFoZKJWW1KK3sIHJRL7riHX9pWD1/) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
</style>


<div style="float:left;">

<ul id="slideshow">


<li>
<h3>Enter Title 1 Here</h3>

<span>ပုံလင့္ထည့္ရန္</span>

<p>Enter Description 1 Here.</p>
<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img src="ပုံလင့္ထည့္ရန္" alt="" /></a>
</li>


<li>
<h3>Enter Title 2 Here</h3>

<span>ပုံလင့္ထည့္ရန္</span>

<p>Enter Description 3 Here.</p>
<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img src="ပုံလင့္ထည့္ရန္" alt="" /></a>
</li>


<li>
<h3>Enter Title 3 Here</h3>

<span>ပုံလင့္ထည့္ရန္</span>

<p>Enter Description 3 Here.</p>
<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img src="ပုံလင့္ထည့္ရန္" alt="" /></a>
</li>


<li>
<h3>Enter Title 4 Here</h3>

<span>ပုံလင့္ထည့္ရန္</span>

<p>Enter Description 4 Here.</p>
<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img src="ပုံလင့္ထည့္ရန္" alt="" /></a>
</li>


<li>
<h3>Enter Title 5 Here</h3>

<span>ပုံလင့္ထည့္ရန္</span>

<p>Enter Description 3 Here.</p>
<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img src="ပုံလင့္ထည့္ရန္" alt="" /></a>
</li>


</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">
<h3></h3>
<p></p>
</div>
</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>

</div>


<script type='text/javascript'>
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>


  မွတ္ခ်က္    ။                ။  မိမိတို႕ ကုဒ္ေတြ ေကာ္ပီယူ ထည့္တာနဲ႕ ျပဳျပင္စရာေတြ ရွိလာမွာပါေနာ္

(၁) "ပုံလင့္ထည့္ရန္" ဆိုတဲ့ေနရာမွာ မိမိတို႕ ျပလိုတဲ့ပုံရဲ႕ လင့္ကိုပါ။( ႏွစ္ေနရာ ထည့္ေပးရပါမည္)
(၂) "မိမိပို႕စ္လင့္ထည့္ပါ"  ဆိုတဲ့ေနရာမွာ ညႊန္ျပတဲ့ ေနရာရဲ႕ လင့္ကို ထည့္ေပးပါ။
(၃) Enter Title 1 Here ဆိုတာကေတာ့ ညႊန္ျပတဲံ ပို႕စ္ရဲ႕ ေခါင္းစဥ္အမည္ေပါ့ေနာ္ ။
(၄) Enter Description 4 Here.ဆိုတာကေတာ့ မိမိတို႕ ေရးလိုေသာ စာသားအနည္းငယ္ေရးလိုက္ပါ။

ဒါဆိုရင္ ျပည့္စုံပါျပီ  မိမိတို႕ဘေလာ့ေပၚမွာ ေအာ္တို သြားေနတဲ့ စလိုက္ေလးကိုပိုင္ဆိုင္ပါျပီ သူကေတာ့

၅   ခုတိတိပါ၀င္တာျဖစ္ပါတယ္.. မိမိလမ္းညႊန္လိုေသာ ေနရာ ၅ ခုကိုထည့္လုိက္ပါေနာ္...
 

ဘေလာ့မွာ Slider တစ္ခုျပဳလုပ္ျခင္း (၃)




 မဂၤလာပါ  သည္နည္းပညာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ ကိုယ္ညႊန္ျခင္ အေရးၾကီး ပို႕စ္ေနရာေလးေတြကို စလုိက္တာ ပုံစံေလးနဲ႕ လွလွပပ  ညႊန္ျပလိုတဲ့နည္းလမ္းေလးျဖစ္ပါတယ္... သည္လို နည္းလမ္းေလးေတြကို ပုံစံအမ်ိဳးမ်ိဳးနဲ႕ တင္ျပေပးသြားမွာ ျဖစ္ပါတယ္... နံပါတ္ (၁) - နံပါတ္ (၂) ကိုူလည္း တင္ျပထားခဲ့ျပီးျဖစ္ပါတယ္...ေနာ္... ေအာက္မွာ နည္းလမ္းနဲ႕လိုအပ္တဲ့ကုဒ္ေတြ ေပးထားပါတယ္... ေလ့လာျပီး ကလိလုိက္ေနာ္....လန္းးးတယ္...ဂ်

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

အဲေနရာမွာ ေအာက္ကကုဒ္ေတြ ကို ထည့္ေပးလိုက္ပါေနာ္....

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://24work.webs.com/24work-blogspot/featured-post/17-content-code/n17-content-slider-04.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#myslides{
background:#2c3133;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 95%; /*Width of Carousel Viewer itself*/
height: 165px; /*Height should enough to fit largest content&#39;s height*/
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 17px ; /*margin around each panel*/
width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#040404; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 10px 10px 10px; /*margin around each panel*/
padding:0px 0px;
}
</style>



<div id="myslides">

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQwYgYOTSdt-TcYl3PvrLw7LQsbFYH5UDSDmZON0uRS-Z5A8MyDibUFZ-yLcurn48M78bod-8j8cRUjeyWij3gmweKzIWPgTsY_Qtxx_ojIuedyVSPQi4eYy5hgfPODVCNJiW15EzJU2Eh/', -14, 60], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGXF3kY5forOwGoUgvakKWZYqZRLIbB8tJB7iBQkl53GToPb_yKFxNGQnBJ_T5mElkDe1yn87VZnAavRMpBuOhX3bJvIHOV73TRzDUsa-0Vy5DnXe-588OAWSYcFNoenOibqzmktD_WZTb/', 0, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank" title="This is featured post 1 title">
<img alt=" " width="200" src="ပုံလင့္ထည့္ရန္" height="120"/>
</a>
</div>

<div class="panel">
<a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank" title="This is featured post 2 title">
<img alt="" width="200" src="ပုံလင့္ထည့္ရန္" height="120"/>
</a>
</div>

<div class="panel">
<a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank" title="This is featured post 3 title">
<img alt="" width="200" src="ပုံလင့္ထည့္ရန္" height="120"/>
</a>
</div>

<div class="panel">
<a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank" title="This is featured post 4 title">
<img alt="" width="200" src="ပုံလင့္ထည့္ရန္" height="120"/>
</a>
</div>

<div class="panel">
<a href="မိမိပို႕စ္လင့္ထည့္ပါ" title="This is featured post 5 title">
<img alt="" width="200" src="ပုံလင့္ထည့္ရန္" height="120"/>
</a>
</div>


</div>
</div>
</div>
<div class="clear"></div>


 မွတ္ခ်က္    ။                ။  မိမိတို႕ ကုဒ္ေတြ ေကာ္ပီယူ ထည့္တာနဲ႕ ျပဳျပင္စရာေတြ ရွိလာမွာပါေနာ္

(၁) "ပုံလင့္ထည့္ရန္" ဆိုတဲ့ေနရာမွာ မိမိတို႕ ျပလိုတဲ့ပုံရဲ႕ လင့္ကိုပါ။
(၂) "မိမိပို႕စ္လင့္ထည့္ပါ"  ဆိုတဲ့ေနရာမွာ ညႊန္ျပတဲ့ ေနရာရဲ႕ လင့္ကို ထည့္ေပးပါ။
(၃)This is featured post 5 title  ဆိုတာကေတာ့ ညႊန္ျပတဲံ ပို႕စ္ရဲ႕ ေခါင္းစဥ္အမည္ေပါ့ေနာ္ ။


ဒါဆိုရင္ ျပည့္စုံပါျပီ  မိမိတို႕ဘေလာ့ေပၚမွာ ေအာ္တို သြားေနတဲ့ စလိုက္ေလးကိုပိုင္ဆိုင္ပါျပီ သူကေတာ့
၅   ခုတိတိပါ၀င္တာျဖစ္ပါတယ္.. မိမိလမ္းညႊန္လိုေသာ ေနရာ ၅ ခုကိုထည့္လုိက္ပါေနာ္...
 

ဘေလာ့မွာ Slider တစ္ခုျပဳလုပ္ျခင္း (၂)



 မဂၤလာပါ  သည္နည္းပညာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ ကိုယ္ညႊန္ျခင္ အေရးၾကီး ပို႕စ္ေနရာေလးေတြကို စလုိက္တာ ပုံစံေလးနဲ႕ လွလွပပ  ညႊန္ျပလိုတဲ့နည္းလမ္းေလးျဖစ္ပါတယ္... သည္လို နည္းလမ္းေလးေတြကို ပုံစံအမ်ိဳးမ်ိဳးနဲ႕ တင္ျပေပးသြားမွာ ျဖစ္ပါတယ္... နံပါတ္ (၁)  ကိုူလည္း တင္ျပထားခဲ့ျပီးျဖစ္ပါတယ္...ေနာ္... ေအာက္မွာ နည္းလမ္းနဲ႕လိုအပ္တဲ့ကုဒ္ေတြ ေပးထားပါတယ္... ေလ့လာျပီး ကလိလုိက္ေနာ္....လန္းးးတယ္...ဂ်

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

အဲေနရာမွာ ေအာက္ကကုဒ္ေတြ ကို ထည့္ေပးလိုက္ပါေနာ္....

<script src="http://24work.webs.com/24work-blogspot/featured-post/17-content-code/contentslider-n-b-l-t-r.js" type="text/javascript"/>
<script src="http://24work.webs.com/24work-blogspot/featured-post/17-content-code/n17-content-slider-026.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 5px solid #333333;
border-bottom-width: 5px;
width: 565px; /*width of featured content slider*/
height: 175px;
margin-left:15px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
margin-top:0px;
}
.pagination{
width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: #333333;
padding: 5px 10px;
margin-top:-3px;
height:30px;
margin-left:15px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #000;
background: #AAAAAA;
}
.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FFF;
}

</style>



<div class="sliderwrapper" id="slider1">
<div class="contentdiv">
<img height="115" src="ပုံလင့္ထည့္ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
<div class="contentdiv">
<img height="115" src="ပုံလင့္ထည့္ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
<div class="contentdiv">
<img height="115" src="ပုံလင့္ထည့္ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
<div class="contentdiv">
<img height="115" src="ပုံလင့္ထည့္ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
<div class="contentdiv">
<img height="115" src="ပုံလင့္ထည့္ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="မိမိပို႕စ္လင့္ထည့္ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
</div>
<div class="pagination" id="paginate-slider1">
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

 မွတ္ခ်က္    ။                ။  မိမိတို႕ ကုဒ္ေတြ ေကာ္ပီယူ ထည့္တာနဲ႕ ျပဳျပင္စရာေတြ ရွိလာမွာပါေနာ္

(၁) "ပုံလင့္ထည့္ရန္" ဆိုတဲ့ေနရာမွာ မိမိတို႕ ျပလိုတဲ့ပုံရဲ႕ လင့္ကိုပါ။
(၂) "မိမိပို႕စ္လင့္ထည့္ပါ"  ဆိုတဲ့ေနရာမွာ ညႊန္ျပတဲ့ ေနရာရဲ႕ လင့္ကို ထည့္ေပးပါ။
(၃) Title-of-Post ဆိုတာကေတာ့ ညႊန္ျပတဲံ ပို႕စ္ရဲ႕ ေခါင္းစဥ္အမည္ေပါ့ေနာ္ ။
(၄)  Slide Description [...]  ဆိုတာကေတာ့ မိမိတို႕ ေရးလိုေသာ စာသားအနည္းငယ္ေရးလိုက္ပါ။
ဒါဆိုရင္ ျပည့္စုံပါျပီ  မိမိတို႕ဘေလာ့ေပၚမွာ ေအာ္တို သြားေနတဲ့ စလိုက္ေလးကိုပိုင္ဆိုင္ပါျပီ သူကေတာ့
၅   ခုတိတိပါ၀င္တာျဖစ္ပါတယ္.. မိမိလမ္းညႊန္လိုေသာ ေနရာ ၅ ခုကိုထည့္လုိက္ပါေနာ္...
 

ဘေလာ့မွာ Slider တစ္ခုျပဳလုပ္ျခင္း (၁)



 မဂၤလာပါဗ်ာ.... အားလုံးကို နည္းပညာေလးတစ္ခု လက္ဆင့္ ကမ္းျခင္ပါတယ္.. ဒါေလးကေတာ့.. မိမိတို႕
ဘေလာ့မွာ ကိုယ္ညႊန္ျပျခင္ေသာ ေနရာေလးေတြ ပို႕စ္ေလးေတြအား   Slider ေလးနဲ႕ ခပ္လန္းလန္းေလး
လမ္းညႊန္ျပသေပးတဲ့နည္းလမ္းေလးဘဲ ျဖစ္ပါတယ္... သည္လို နည္းလမ္းေလးေတြကို က်ေနာ္ ပုံစံအမ်ိဳးမ်ိဳးနဲ႕ ေရးသား တင္ျပသြားပါ့မယ္... ဒါေလးကေတာ့ အေပၚျပထားတဲ့ ပုံစံ နမူနာေလးအတိုင္းေပါ့
ေအာက္မွာ ထည့္နည္းနဲ႕ လိုအပ္ေသာကုဒ္ေတြ ေပးလိုက္ပါတယ္ေနာ္....
သူကေတာ့ ေအာ္တို စလုိက္ေလးသြားေနမယ္ေနာ္....လန္းးးးတယ္..ေိေိ

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ



 အဲမွာဘဲ ေအာက္က ေပးထားတဲ့ ကုဒ္ေတြကို ထည့္ေပးလိုက္ပါေနာ္.....



မွတ္ခ်က္           ။                          ။  ကုဒ္ေတြကို ျပဳျပင္ရန္  ေသျခာ ၾကည့္ေပးပါေနာ္....

(၁) ကုဒ္ေတြကို ေကာ္ပီယူျပီးတာနဲ႕ ထည့္လုိက္ပါ  ကုဒ္ေတြ ထဲမွာ မိမိတို႕ ပုံေတြ ေခါင္းစဥ္ေတြ လင့္ေတြ
     အစားထိုးေပးရမွာ ေတြ ရွိပါေသးတယ္....

(၂)   ပုံလင့္သည္မွာ ထည့္ပါ   ဆိုတဲ့ေနရာမွာ မိမိတို႕ ေဖၚျပလိုေသာပုံ ရဲ႕ လင့္ကို ထည့္ပါ။
(၃)   လင့္ထည့္ေပး၇န္    ဆိုတဲ့ေနရာမွာ ကလစ္တာနဲ႕ ေရာက္သြားမည့္ ေနရာ လင့္ကိုပါ။
(၄)   ေခါင္းစဥ္အမည္   ဆိုတာမွာ ကိုညႊန္ျပတဲ့ လင့္ရဲ႕ title အမည္ေပါ့....။
(၅)  slider 1 စာသားေရးရန္    ဆိုတာကေတာ့ ေခါင္းစဥ္ / ပုံ နဲ႕သက္ဆိုင္ေသာ စာသားအနည္းငယ္ေပါ့။
      slider  2.3.4.5. အားလုံးထို႕နည္းတူပါဘဲေနာ္....


Source ; ဘေလာ့ခရီးသည္

Sunday, 26 January 2014

Template ေဒါင္းယူျပီး xml ဖိုင္ရယူနည္း (ဘေလာ့အတြက္ အေရးပါေသာက႑)

မဂၤလာပါ ဘေလာ့ခရီးသည္ကိုလာေရာက္အားေပးၾကေသာ မိတ္ေဆြအေပါင္းတို႕ ဗ်ားး
ခုတင္မွာေလးကေတာ့ C-Box ကေတာင္းဆိုမွဳေလးျဖစ္သလို ဘေလာ့သမားေတြအတြက္ မသိမျဖစ္
သိထားရမည့္ အေၾကာင္းရာေလးဆိုလည္း မမွားပါဘူးး  ဘေလာ့ေတြမွာ မိမိတို႕ စိတ္ၾကိဳက္
template ေတြ ဒီဇုိင္းလွလွေလးေတြ နဲ႕ျပဳျပင္ဖန္တီးဖို႕ဆိုတာ သည္နည္းလမ္းေလးကို သိကုိထားမွ
ျဖစ္မွာမို႕ပါ...ဒါေၾကာင့္ ေတာင္းဆိုမွဳ အရေရာ..သိသင့္တယ္ထင္တာမို႕ ေစတနာနဲ႕ေရာ သည္နည္းေလးကို  ထေရးျဖစ္တာပါ.... Template ေတြကို ေဒါင္းယူျပီး မိမိဘေလာ့ထဲမွာ စိတ္တိုင္း
က် သြင္းယူတဲ့ နည္းလမ္းေလးဘဲ ျဖစ္ပါတယ္.... အေသးစိတ္ ပုံေလးေတြနဲ႕ တစ္ကြ ေဒါင္းယူနည္း
ေဒါင္းထားေသာ တက္ပလက္ဖိုင္ကေန xml ဖိုင္ေလးယူနည္း ရွင္းျပထားပါတယ္... ေဒါင္းယုံနဲ႕ မရပါ
xml ဖိုင္ေလးကိုသာ မိမိတို႕ ဘေလာ့ထဲကို Upload ထည့္မွသာလွ်င္ လိုျခင္ေသာ တက္ပလက္ ဒီဇိုင္းေတြကို ရရွိမွၾ ျဖစ္ပါေၾကာင္းးးးးးးးးးးးးးးးးး ကဲစမယ္  ေလကရွည္ေနျပီ...ေိေိ....
 ေတာင္းဆိုသူမိတ္ေဆြပါ......
 လကၤာ: တက္ပလက္ အသစ္ေတြကို ေဒါင္းယူနည္းနဲ႕ xml ယူနည္းေလးေရးေပးပါလားဗ်ာ


ပထမဆုံးအေနနဲ႕  တက္ပလက္ ေဒါင္းလို႕ ရတဲ့ ဆိုဒ္လိပ္စာေလးေပးပါ့မယ္.....

               + တက္ပလက္မ်ားကို     သည္မွာ     ရွာေဖြေဒါင္းယူပါ  ။

               + ေနာက္ထပ္လိုအပ္က     သည္မွာ    ဆက္လက္ရွာေဖြနိဳင္ပါတယ္  ။
ေနာက္ထပ္  လိုအပ္ေသးပါက.... တက္ပလက္ဆိုဒ္ေပါင္းမ်ားစြာရွိပါတယ္...
         http://www.dailybloggertemplates.com/
         http://www.deluxetemplates.net/page/2
         http://www.dhetemplate.com/
         httphtetnaykha.blogspot.com
         http://www.soratemplates.com/
 သည္ဆိုဒ္ေတြဆိုရင္ဘဲ  လုံေလာက္ပါျပီေနာ္  အမ်ားၾကီးးးးကိုရနိုင္လို႕ပါ....
ကဲ တက္ပလက္တစ္ခုကို ေဒါင္းရင္းနဲ႕  ဥပမာ ျပဳတင္ျပလိုက္ပါ့မယ္...

   အဆင့္   (၁)  အေနနဲ႕.......တက္ပလက္ဆိုဒ္ထဲ၀င္လိုက္ပါျပီ


မိမိတို႕ စိတ္ၾကိဳက္ စာမ်က္ႏွာအလုိက္ ေရြးခ်ယ္နိဳင္ပါတယ္... ေရြးခ်ယ္စရာေတြအမ်ားၾကီးးပါေနာ္
စာေတြ ၾကည့္ျပီး လုိအပ္သလို ေရြးနိဳင္ပါတယ္... တက္ပလက္တိုင္းမွာ နာမည္ေလးေတြရွိပါတယ္...
ေသျခာ ၾကည့္လိုက အမည္ကိုကလစ္နိဳင္ပါတယ္... ပုံၾကီးမူရင္းကို ျမင္လိုက Demo ဆိုတာကို ကလစ္ၾကည့္လုိက္ပါ....ေဒါင္းလိုက Download ေပါ့...ခုေတာ့တစ္ခု ေရြးလုိက္ျပီေပါ့..ေအာက္မွာ

  အဆင့္   (၂)  အေနနဲ႕ ဆက္ၾကည့္လိုက္ပါ...........


မိမိေရြးထားေသာ တက္ပလက္ေလးေပါ့... Preview ကိုကလစ္ပါက ဆိုဒ္ၾကီးျမင္ရမယ္...
ကဲ  Download ၾကစို႕ ၾကာေနမယ္..ေနာ္..ေဒါင္းလိုက္ပါျပီဗ်ာ.. ခဏေလးဘဲ ေစာင့္ပါ....စကၠန္႕ပိုင္းမွ်သာ ၾကာမွာပါ....

   အဆင့္  (၃)   အေနနဲ႕ ေဒါင္းထားတဲ့ ဟာေလးျပီးသြားတဲ့အခါမွာေပါ့..


Open floder  ကိုကလစ္ဖြင့္လိုက္ပါ... မဟုတ္လည္း မိမိစက္ထဲ ေဒါင္းေလာ့၀င္တဲ့ ဖိုင္ထဲသြားလုိက္ေပါ့.....သည္လိုေလးေတြ႕မယ္...ေအာက္မွာ....

  အဆင့္  (၄)   ကေတာ့ ေဒါင္းထားတဲ့ တက္ပလက္ ဖြင့္လုိက္ပါ.....


ေတြ႕ျပီေနာ္  ကြ်န္ေတာ္ ဥပမာျပထားတဲ့ တက္ပလက္ေလးက အမည္က music plus ဆိုတဲ့ဟာပါ။
အဲတာေလး မိမိတို႕ ထဲေတြ႕တာနဲ႕  ညာကလစ္ေပးပါ  Extract to musicplus/ ဆိုတာေလးကို ကလစ္ေပးလိုက္ပါ...( မွတ္ခ်က္ ။   ။ musicplus ေနရာမွာ မိမိတို႕ေဒါင္းေသာ template အမည္ပါ)
ကလစ္ျပီးတာနဲ႕  Floder အ၀ါေလးက်လာမွာျဖစ္ပါတယ္.....ေအာက္မွာၾကည့္ပါ

Music Plus ဆိုတဲ့အမည္နဲ႕ Floder အ၀ါေလးပါ...အဲတာေလးကို ဖြင့္လိုက္ပါ... တစ္ခါဖြင့္ယုံနဲ႕ xml ဖိုင္ေလး မေတြ႕ေသးပါက ေတြ႕သည့္တုိင္ ဖိုင္ေလးေတြကို ဆက္ဖြင့္ေပးလိုက္ပါ...ေတြ႕ျပီဆိုတာနဲ႕..

  အဆင့္  (၅)   xml ဖိုင္ေလးကို ေတြ႕ျပီဆိုတာနဲ႕.....ေအာက္မွာ...xml ဖိုင္

ကဲဂ်ာ....ရပါျပီ  xml ဆိုတဲ့ ဖိုင္ေလး...သူဘဲ အဓိကက်တာေလ...သူကဘဲ မိမိတို႕ဘေလာ့ကို
ေျပာင္းလဲေစနိဳင္တာပါဗ်ာ...ဒါေလးရဖို႕အေရးးးးးးးဟူးးးးးးးးးးးးးးးေမာလုိက္ထာ..ေိေိ
အဲတာေလးေတာ့ ေသေသျခာျခာ မီးလုံေသတၱာေလးနဲ႕ သိမ္းက်ေနာ္....ဟိဟိ
Template ခ်ိန္းနည္းကိုေတာ့            သည္ေနရာမွာ    ဆက္လက္ေလ့လာလိုက္ပါေနာ္....။ 

Thursday, 23 January 2014

Blogger သူငယ္ခ်င္းမ်ားအတြက္ Post မွာ Auto Read More ျပဳလုပ္နည္း


အခု Post ေလးကေတာ့ Blogger ညီကိုမ်ားအတြက္သီးသန္႕ Post ေလးျဖစ္ပါတယ္။ ဆရာၾကီးေတြအတြက္ မဟုတ္ပါဘူး။ အခုမွစျပီး Blog ကိုေလ့လာေနတဲ့ ေဘာ္ဒါေတြအတြက္ပါ။ Post ေတြမွာ Jump Break လုပ္စရာ မလိုဘဲနဲ႕ Auto Read More ျဖစ္ေနေစမယ့္ HTML Code ျဖစ္ပါတယ္။ ထည့္ရတာလည္းအေတာ္ေလးလြယ္ ကူပါတယ္။ အေအာက္မွာပံုနဲ႕တကြအေသးစိတ္ေဖာ္ျပေပးလိုက္ပါတယ္ဗ်ာ။ ေအာက္မွာၾကည့္လိုက္ၾက ရေအာင္ဗ်ာ။ လူတိုင္းလြယ္ကူစြာလိုက္လုပ္ႏိုင္ေအာင္လို႕ အေသးစိတ္ တဆင့္ျခင္းေရးျပေပးထားပါတယ္။
Step-1
အေပၚကပံုအတိုင္း  Dashboard > Template > Edit HTML ထဲကို၀င္သြားလိုက္ပါ။
Control + F ႏွိပ္ျပီး Search Box မွာ</head> ကိုရွာလိုက္ပါ
ေတြ႕ျပီဆိုရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က Code ကို Copy to Paste လုပ္ေပးပါ။
<script type='text/javascript'>
var noImgSum = 200;
imgSum = 450;
iHt = 250;
iWd = 250;

</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function autoReadMore(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = noImgSum;
if(img.length>=1) {
imgtag = '<img id="autoReadMoreImg" src="'+img[0].src+'" width="'+iWd+'px" height="'+iHt+'px"/>';
summ = imgSum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

 
 Step-2
ေနာက္ထပ္ Search Box မွာအေပၚကပံုအတိုင္း <data:post.body/> ဆိုျပီး ထပ္ရွာၾကည့္ပါ
ေတြ႕ျပီဆိုရင္<data:post.body/> ကို Select ေပးျပီး ေအာက္က Code ကို Copy to Paste နဲ႕အစားထိုးေပး လိုက္ပါ။

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> autoReadMore("summary<data:post.id/>");
</script>
<a id='readmore' expr:href='data:post.url'>Read More ...</a>
</b:if>
</b:if>

ဒါဆိုရင္ေတာ့ Auto Read More အတြက္ လုပ္ေဆာင္ရမွာကျပီးဆံုးသြားပါျပီ။ဒီေနရမွာ မိမိစိတ္ၾကိဳက္ျပင္ ဆင္ႏိုင္တာေလးတစ္ခုရွိပါတယ္။ ပထမဦးဆံုးအဆင့္မွာ ေပးထားတဲ့ Code ေလးကိုျပင္ဆင္ႏိုင္ပါတယ္။

var noImgSum = 200;
ဒီေနရမွာ 200 ဆိုတာ ပံုနားမွာေပၚမယ့္စာလံုးရဲ႕အေရအတြက္ျဖစ္ပါတယ္။ imgSum = 450;  
ဒီေနရာမွာ 450 ဆိုတာက Post မွာ Read More မတိုင္ခင္မွာေပၚေစခ်င္တဲ့စာလံုးအေရအတြက္ျဖစ္ပါတယ္။ 
iHt = 250;
iWd = 250;

ဒီႏွစ္ခုကေတာ့ Post မွာေပၚမယ့္ ပံုရဲ႕အေရအတြက္ျဖစ္ပါတယ္။
ျပင္စရာရွိတာေတြလည္းျပင္ျပီးသြားျပီဆိုရင္ေတာ့ Save Template မႏွိပ္ခင္မွာ Preview Template ကိုအရင္ နွိပ္ျပီး Preview ၾကည့္ေစခ်င္ပါတယ္။ Error မရွိဘဲ စိတ္ၾကိဳက္ျဖစ္ျပီဆိုေတာ့မွ Save Template ကိုႏွိပ္ေစခ်င္ ပါတယ္ဗ်ာ။
ဒီေလာက္ဆိုရင္ေတာ့ အဆင္ေျပေျပနဲ႕လိုက္လုပ္ႏိုင္မယ္လို႕ယူဆရပါတယ္ဗ်ာ။အားလံုးဘဲအဆင္ေျပၾက ပါေစေနာ္။



Blog မွာ WaterEffect CSS Download Buttons ထဲ့နည္း

အရင္ဆံုးကိုယ့္ရဲ႕ Blog ထဲ့သို Log in ၀င္ပါ၊ေအာက္ပါပံုအတိုင္း Template ကိုႏိုပ္ပါ





Edit Html ကိုႏိုပ္ပါ
Ctrl + F အကူအညီနဲ႕ ]]></b:skin> ကိုရွာပါ၊ေတြ႕ျပီဆိုရင္

]]></b:skin> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။
.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw6ERcqd6QGK2_mUO4YtGpiBOrHW7mmjuootswPY2APDillPupSNsLHzjqJPB1aKkD1D-5T1P_DrXDeQwJw_il70id7QOcswb3nodKX9Ot2jVNJqpiexJKTl-d7AT8S753XaTWukp7yBI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

ေအာက္က Code ေတြကကိုယ္ပိုစ့္တင္တိုင္း Download link ေပးတဲ့ေနရာမွာသံုး
ရမဲ့ Code ေတြပါ။အဲဒီ Code ကို Notepad နဲ႕ Save ထားျပီးေနာက္ပိုင္း post တင္
တုိင္းဆက္လက္အသံုးခ်ႏိုပ္ပါျပီဗ်ာ.....

<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>

အနီေရာင္ျပထားတဲ့ Blue,orange စသည္တို႕က Download button ေတြကိုအေရာင္
ေတြပါ

Your Link ေနရာမွာ Download link ထဲ့ေပးပါ

Live Demo ဆိုတဲ့ေနရာမွာ ႏွစ္သက္ရာေရးလို႕ရပါတယ္နမူနာအေနနဲ႕ Download
ရယူရန္ Click ဆိုျပီးထဲ့ျပထားပါတယ္။

အားလံုးအဆင္ေျပပါေစဗ်ာ.......
စလုပ္ကာစမိတ္ေဆြမ်ားအတြက္အၾကံေပးခ်င္တာကေတာ့ကိုယ့္ Blog နဲ႕ Tamplate တူ
တဲ့ အရံ Blog တစ္ခုမွာေသခ်ာနားလည္ေအာင္စမ္းသပ္ျပီးမွ ကိုယ့္ Blog မွာအသံုးခ်ပါ။  


Source ; Win Htut Tin