ဖုန္းထဲမွာ Music\Mp3ေတြ Folder လိုက္ play လုပ္ေပးႏိုင္မယ္-Folder Music Player (MP3) PRO v1.0.9 APK

Android ဖုန္း Tablet ကိုင္းေဆာင္ထားေသာေဘာ္ဒါေတြအတြက္ Music ေတြကို Folderလိုက္ လမ္းညႊန္စာအုပ္အျဖစ္အသံုးျပဳမယ္ apk ေလးတစ္ျဖစ္ပါတယ္။playlist အျဖစ္လည္ ေဘာ္ဒါအတြက္ Auto လုပ္ေပးပါတယ္။ Music ေတြကို ဖုိင္းလိုက္ အသံုးျပဳမယ္ သီခ်င္းေတြကိုနားေထာင္းခ်င္တဲ့ ေဘာ္ဒါတို႔ အတြက္ ေတာ္ေတာ္ကို အဆင္ေျပပါတယ္ ။ Google Play Store ဆိုရင္ $ 3.56 ေပးရတယ္ဗ်ာ။ဝင္းလႈိင္ဆီမွာေတာ့  free ရတယ္ဗ်ာ။ ေဘာ္ဒါတို႔အတြက္ အသံုးျပဳမယ္ဆိုရင္ Android OS 4.0 အထက္မွာသံုးႏိုင္ျပီး ဖုိင္းဆိုဒ္ေလးကေတာ့626.6KB ျဖစ္ပါတယ္။မူနာၾကည့္ႏိုင္ေအာင္ Screen Shoot ေတြကို ေအာက္မွာရိုက္ျပထားပါတယ္ဗ်ာ။

 Download Here

www.winhlaing.org 

ဝင္းလႈိင္(နည္းပညာ)

Read More

Android ဖုန္းထဲမွာဒီဇိုင္းဆန္းတဲ့ Icon ေလးမ်ားကို အသံုးျပဳနိုင္မယ့္ -Vento Squircle - Icon Pack v2.0.0 APK

Android ဖုန္းထဲမွာဒီဇိုင္းဆန္းတဲ့ Icon ေလးမ်ားကို အသံုးျပဳနိုင္မယ့္ Icon အလန္းၾကိဳက္တဲ့ ေဘာ္ဒါတို႔ Vento Squircle - Icon Pack ေလးကို တင္ေပးလုိက္ပါတယ္။ ဒီ Android Application ၏ icon ပံုစံေလး(Screen Shoot) ေတြ႔ျမင္ရံုျဖင့္ ဒီဇိုင္းအရမ္းမိုက္ကို ေဘာ္ဒါတို႔သိရွိနားလည္း ပါလိမ့္မယ္။ က်ေနာ္လည္းဒီ Android Application ၏ icon ပံုစံေလးကို ေတာ္ေတာ္ၾကိဳက္ပါတယ္ ဒါေၾကာင္မို႔ ေဘာ္ဒါတို႔ အသံုးျပဳမယ္ဆိုရင္ အဆင္ေျပေအာင္လို႔ တင္ေပးလုိက္တာပါ။ HD ရုပ္ထြက္ မ်ိဳးနဲ႕ Icon ေပါင္းမ်ားစြာပါ၀င္ပါတယ္။Icon ရဲ႕ဒီဇိုင္း ၊ Background ၊ Theme ၊ Wallpaper ၊ Widget ၊ အနဲ႕အျခားေသာ Feature ေလးေတြရုပ္ထြက္ေတြ အရမ္းေကာင္းလြန္းတာမို႕ မွ်ေ၀ေပးလိုက္ တာပါ။ ေအာက္မွာ Screen Shoot ေတြရိုက္ျပထားပါတယ္ဗ်ာ။ နမူနာ၀င္ၾကည့္လိုက္ပါဦး သေဘာက်ျပီ ဆိုရင္ေတာ့ ေအာက္က Link မွာ၀င္ျပီးေဒါင္းယူသြားနိုင္ပါတယ္ဗ်ာ။ Android OS 4.0. ႏွင့္အထက္ ဖုန္းမ်ားမွာအသံုးျပဳႏိုင္မွာျဖစ္ပါတယ္ဗ်ာ။

WH: About 1.710HD+ Icons

WH: Dynamic Calendar Supported

WH: Cloud Base Wallpaper

WH: Categorized Icons In Picker

WH: For Unthemed Icons ; Icon Back, Icon Mask Supported

WH: Scrollable Wallpaper when applied

WH: Apply, 22 launcher cards, 15 direct apply, 7 manual

WH: Smart Icon Request Section

WH: See & Search all icons included with icon name

WH: Muzei Live Wallpaper support

WH: Regular Update

Download Here 

www.winhlaing.org 

ဝင္းလႈိင္(နည္းပညာ)

Read More

မိမိ ဘေလာ့မွာ facebook comment အလြယ္တကူ ထည့္နည္း

ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ မိမိ ဘေလာ့မွာ facebook comment အလြယ္တကူ ထည့္နည္းေလးကို တင္ၿပသြားခ်င္ပါတယ္..။ ဘေလာ့မွာ facebook comment ထည့္နည္းေတြကေတာ့ အမ်ားၾကီးရွိၾကမွာပါ ဒါေပမယ့္ ထည့္နည္းေတြက ခက္ေဟာင္းက ဟာေတြ မ်ားပါတယ္ အဆင္မေၿပၾကတာေတြ႕ရပါတယ္.. ယခု ကြ်န္ေတာ္ တင္ၿပမယ့္ဟာကေတာ့ လြယ္ကူေစၿပီးေတာ့ 100% အဆင္ေၿပေစမွာပါ..။

ပထမဆုံးအေနနဲ႕Comments စလုပ္ဖို႕အတြက္(ဒီေနရာေလး)ကိုသြားလိုက္ပါ။

 ေအာက္မွာေဖာ္ၿပထားတဲ့ပုံတိုင္း Comments ကို ဆက္ၿပီးလုပ္ေဆာင္သြားပါ။

Url to comment on အထဲမွာ မိမိ ဘေလာ့လိပ္စာ (သို႕) မိမိရဲ႕ https://www.facebook.com/page XXXXX အဆင္ေၿပေစမယ့္ ဟာကိုေရြးထည့္ပါ။ width မွာေတာ့ (600) ထည့္ေပးပါ။ Number of Posts (10) ထည့္ေပးပါ။

ေနာက္တဆင့္အေနနဲ႕ ကုဒ္ကိုယူရန္ အေပၚပုံက Get Code ဆိုတာကလစ္ရမွာၿဖစ္ပါတယ္။

 အေပၚပုံေလးက်လာမယ့္ နံပါတ္ (၁) ကုဒ္ေတြကို ေကာ္ပီယူရမွာၿဖစ္ပါတယ္။

အေပၚပုံေလးက်လာမယ့္ နံပါတ္ (၁) ကုဒ္ေတြကို ေကာ္ပီယူလာၿပီး Convert , Html5 ကုဒ္ေၿပာင္းရမွာၿဖစ္တဲ့ အတြက္ (ဒီေနရာေလး) မွာ Html5 ကုဒ္ Convert ေၿပာင္းလိုက္ပါ။

HTML ကေန Convert ေၿပာင္းၿပီးေတာ့ ယူရမွာၿဖစ္ပါတယ္။

Convert ေၿပာင္းၿပီးလို႕ ရလာတဲ့ Code ကို ေကာ္ပီ ကူးၿပီးေတာ့ ...

1. Blogger dashboard ကိုသြားလိုက္ပါ။
2. template ကိုကလစ္နိုပ္ပါ > edit html ကို၀င္ပါ။
3. {Ctrl+f} (သို႕) F3 အကူညီျဖင့္ </body> ကုဒ္ကို ရွာလိုက္ပါ။
4.  ေတြ႕ျပီဆိုရင္ </body> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေကာ္ပီကူးလာတဲ့ ကုဒ္ မ်ားကူးထဲ့ျပီး Save Template ကိုႏိုပ္ပါ။

1. ေနာက္ထက္ {Ctrl+f} (သို႕) F3 အကူညီျဖင့္ <b:include data='post' name='post'/> ကုဒ္ကို ရွာလိုက္ပါ။
2. ေတြ႕ျပီဆိုရင္ <b:include data='post' name='post'/> ရဲ႕ေအာက္မွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template ကိုႏိုပ္ပါ။

<b:if cond='data:blog.pageType == "item"'>
                 &lt;div
                     class=&quot;fb-comments&quot;
                     data-href=&quot;<data:post.url/>&quot;
                     data-width=&quot;590&quot;
                     data-num-posts=&quot;100&quot;&gt;
                 &lt;/div&gt;
            </b:if>

 မိတ္ေဆြ ရဲ ဘာေလာ့ ထဲမွာ ဝင္ၾကည့္လိုက္ပါ facebook comment ေတြ႕ရပါလိမ္႕မယ္။

အားလံုးကို ေက်းဇူးတင္ပါတယ္။

ဘေလာ့မွာ facebook comment အလြယ္တကူ ထည့္နည္း
======================= 

   www.ayekyaw.org

Read More

ဘေလာ့မွာ ဒီဇိုင္းလွလွေလး Image Slider ၿပဳလုပ္နည္း ( ၁ )

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

နမူနာကိုၾကည့္ပါ

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript 
3. Copy the code below and paste on it. 

>>> ၿပဳလုပ္နည္း

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

ဒါဆိုအဆင္ေျပပါၿပီ

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
 overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>
  <li><a href="http://dimpost.com">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge0zV-VLOCKq1BOzjTF4gJovlmyRtOhdfWgNhmTfV2BCHEPKHcKnHYYTL6_3zS7GT8vuiKnB6rZXpfmS5vtEmNEV4-6vB_V4D2u0QeBBLeFl9jl9WUaR9M-074fJmtwF9Bm4c6TyTRBg2V/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvfkieBdZmDkJqyI_ucrmRNQPIBxb8UTNqE1gaL4HfrDlk4OqcaMS79OCGxbQXpJg7vwFWSf0mL8Z10fZzVqYA4xqTj73OD_svgkHCkm6Z2eayYvyjE3_0pCdQU2enRCfEQNg7-hWIj70l/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9C2iRyzFrS7LxXkyIpMr5EBpLcNRa4sCR2XJjs2rljvSfeVsru4GIdAhrWuUsgzGyK15QGc3OPUMLZIBai3f7z76_YaNruJDrEeOKHdoiki0acCmQYeXob8GucxVrIatJBsj-bX7Q6RdK/s550/sample3.jpg" title="True Nature"/>
  </a>Tree in field with blue sky.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8hkXKaFw4mGjigSk56MDBb8XMNsFzjWRtP8aeXH8d9SZ7UWEpdDmy6Ilmy04JORP8ni4brFYfoDZx6Niz0cKfMB5eswFwbXYU5Jty4-h46VVvsO4HB2yH5DE9myLzAE2y9jUEtCBP-xE/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIc07JmgB5_J6v85Cbtxd11iyMwXbUhUCvEEA93YmdpOCNBtO94saVir_-AY59XmczqIOrSkp7lCjdjFh5ccRDyddOcdJvmxshzabba9oesY5SXSwM_5FndauhZ56XivoYlBt9LE8aoNF/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI0xspNitvatQr75xNMCMG3P2HKz0C1N6XUL_oFIo_PCu7A9l0SpPPsz-AVPWTWD-NIVQ7NnnDYV9x4grrSlo12zls2_IfneJtGPpclat2T2T8jZnF9iSqQKlg2jbn00RgJzAMLhIRjpM3/s550/sample6.jpg" title="Sunshine"/>
  </a></li>
   </ul>
    </div> 
    
 <div class="jslider_thumbs">
        <div>
  <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKpRTskmqCDeE3_Ayc1ffdyLNseQGr5dvfN67Y49ahQd5xhiVnvM-TwTP3__cf3FHIAu82JncgIK-9qMQeXdqjp19C3kOrMxHJojPs1CEQCONH9iHB4D2abk7dx4LXb_elfAN9YQ5H1Vkn/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUCNuRDvyMKreCKWkbpfOEPopzfPWK8NVJDRp8XcAecCC83nhkwsVOGJNbP5lVu9vVR5OOwaf63haIMcd6fQUQ_Lj0fpTXZ2qdwWnGBx6UVydOtaBTBAHrkLncQi_WhhfKVUTrbV9BnXE/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rzkI03jb7drqvBUmnzGw0X-0nXiK7Ulrusj9lrnE2dpzAIObqzUhzNFu6jPQE9b5sp9QMb4-3mWqupKNF4SbaaVHiPwqKMtwZTUltwT53SuA29PBvmsBbODTKleODFwlBpFvuCtN5eY_/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMoscqHY1mpAClQGYoO4G8vUFkC7KV9w8AxFJkTU1i5tJWHMBrfwgUztLcXGvt5QGQE4zsvDsLUATZTdO1NrJLctKRUuJUcYyBqEzOowM-z5sYn1zFiC6JuTrfMtSwkyUtTvb4T8Qo0vwp/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoRyZzuGc1Sefth6NEATiPNLcXmH5PYieyHX7kUjbqBJGQv5hJG3bmZHkJ-7X-_bU3TMW6x2FBphNiPCBx3BwAaXXpX4nr1B8qoOOKnTVz1-uOVR6UmLKSxr8fcDWwaUl8tKxkfjVX40AL/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEsxAKZ6SIvG9uyF3yK_8o0c5K6P4ZGnJgfDkg74y-k4Pz7vy1hXkrfWv9OVWvLNpU6q3_QphH003CGpwRK6leoUj1Ew_tOf5tm6eJH2IfOwRsUjy-t4sc9YbZE7SE3qnSLphJjnG9U0mk/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

http://1.bp.blogspot.com/-mLI/UUI/AAB4k/j6RY/s550/sample1.jpg

အေပၚက အနီေရာင္ေလးနဲ႕ ၿပေပးထားတဲ့ စာတမ္းမွာ မိမိ ၾကိဳက္ႏွစ္သက္တဲ့ ဓါက္ပံု လင့္ ကိုေၿပာင္းနိုင္ပါတယ္..။

မွတ္ခ်က္ ။ ကုဒ္ေတြထဲက # ေနရာမိမိညြန္လိုတဲ့လင့္ကိုထည့္ပါ။

   www.ayekyaw.org

Read More

ဘေလာ့မွာ ဒီဇိုင္းလွလွေလး Image Slider ၿပဳလုပ္နည္း ( ၂ )

ဒီေန႕ေတာ့ ဘေလာ့ post ေတြ မ်ားမ်ား တင္ေပးမလို႕ အစီစဥ္ရွိပါတယ္..။ ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ ဒီ စလုိက္တာ ပံုစံေလးက အရမ္းလွပၿပီး ရိုးရွင္းပါတယ္ အသစ္ထြက္ထားတာ မၾကာေသးပါ..။ မိမိ ဘေလာ့ ေတြမွာ မိမိ ညႊန္ျပလိုတဲ့ Image Slider ဒီဇိုင္းလွလွ ေလးေတြနဲ႕ ညြန္ၿပလို႕ရမွာၿဖစ္ပါတယ္။ အသံုးၿပဳနည္းကေတာ့ လြယ္ကူေစပါတယ္ ေလ့လာၾကည့္နိုင္ပါတယ္..။

နမူနာကိုၾကည့္ပါ

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript 
3. Copy the code below and paste on it. 

>>> ၿပဳလုပ္နည္း

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

ဒါဆိုအဆင္ေျပပါၿပီ

<style type="text/css">
/* http://dimpost.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
        
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdHbQRrtiJJvK797KUNd61wOGac9fd3eECrDdG7OXUpPt-dBvj9ujC2PD1psi_XGXeDU_hcOjt_ppg-6P_pZ_nnkBW02OWKMxFgxeoscNZ9hTh0744JFfBT8kn6BbIrS_W1fk8ucUgK6Ax/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px; 
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Qd130rIk2DL7u6l_e-_SArMErVpE5VVdIMUsySiqDtQjF7EKgcPxcUJ8PKRa9nw2ewqwz62dBkhkH8W2cvPyN5Uc3V-evB-uSp2MQLm6g3HZ_zvbEBclaw62s8y1G8Zk_3MYkkuHBVJa/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider 
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5_YC4yoCkMLzqDCeuLCpiOzMzgGeXIKZrM4VWHzgX0BJZkcxO057r4B9tZRbWMtNvhQnaX9qGllA8zcu9_Xk457LT37ZbAi-Kxyh3TG__nK1aoKqe_7D6EtoW4jEpF9M5tPUuXqMnOsgu/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwucf7B-gBrOU3Xm8IPdVeGvK3ew3ohXKTJZqWZEb1au0nONx5iEUJ5ZaG69eA3n_H0Co2iZnJ4hdfb07qPCfzkPOHrJlnRUqaPUcv0aTHqz0uFh3w8zqKIIj1pmZutRW0xbpGTzB6vXsD/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBaM66d23GaoWoSlmwrFwqmAlsIfdz4A-tsK3k5MoBLWbb9FIgB8F7ZYFsTkdM4Bdvo6Jq-QK0CGQBeQSHlKPdlgNlnVFlX2_scjx4f1qoH8pYPYzEl2FO_LmaP6Ln5qDXCwabGF-0446i/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxyppBeU3rMlYp8W2bbV9vuJikLMp3h4X0IPGiH4feiqm3Bhhi2NJDPfnfM4nsO8BVnMt3vvSVFl3xMbns3g0wM0IisscMJYNIbTMc757v_0ClKfh2Lep2tv1VZQbrEZYZBiA3NEBITfg/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ-G4z36MY9SrJL9Skx15Dgcx150hJG7BozQRiJxBoydGkqsxvdBUvIvE7yFkeZPztR7d9NrZ_6Nu4GBH3vRJ1zHldqHc1k8AXAb3KGl7AevKcnl0kSWUsog0qCzdmbgciHewS2dzLKB_8/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

http://1.bp.blogspot.com/-mLI/UUI/AAB4k/j6RY/s550/sample1.jpg

အေပၚက အနီေရာင္ေလးနဲ႕ ၿပေပးထားတဲ့ စာတမ္းမွာ မိမိ ၾကိဳက္ႏွစ္သက္တဲ့ ဓါက္ပံု လင့္ ကိုေၿပာင္းနိုင္ပါတယ္..။

မွတ္ခ်က္ ။ ကုဒ္ေတြထဲက # ေနရာမိမိညြန္လိုတဲ့လင့္ကိုထည့္ပါ။

    www.ayekyaw.org

Read More

ဘေလာ့မွာ ဒီဇိုင္းလွလွေလး Image Slider ၿပဳလုပ္နည္း ( ၃ )

ဒီေန႕ေတာ့ ဘေလာ့ post ေတြ မ်ားမ်ား တင္ေပးမလို႕ အစီစဥ္ရွိပါတယ္..။ ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ ဒီ စလုိက္တာ ပံုစံေလးက အရမ္းလွပၿပီး ရိုးရွင္းပါတယ္ အသစ္ထြက္ထားတာ မၾကာေသးပါ..။ မိမိ ဘေလာ့ ေတြမွာ မိမိ ညႊန္ျပလိုတဲ့ Image Slider ဒီဇိုင္းလွလွ ေလးေတြနဲ႕ ညြန္ၿပလို႕ရမွာၿဖစ္ပါတယ္။ အသံုးၿပဳနည္းကေတာ့ လြယ္ကူေစပါတယ္ ေလ့လာၾကည့္နိုင္ပါတယ္..။

နမူနာကိုၾကည့္ပါ

1. Go to Blogger Dashboard > Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript (below header)
4. Paste code inside it,

>>> ၿပဳလုပ္နည္း

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

ဒါဆိုအဆင္ေျပပါၿပီ

 

<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEFZjiRUt4iGGJ4W1bwUkafvz6q87osP2k_Ny-TnbwFFJPDFncZTq4R7z7Zt70XXs69XDCpH2YL4JL3A7-JXdgqvmyNZeNBI4ToOTaSQqgYUhRBydn6bGJeCKZLmF2f9FWBThOq6ZxyX0/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTMW6O0viuZp270AqWYv59bubKzk9StJOnGdkoOcr_hlkAe5kPUgREPt7XQk-8GU6R3dSrTFoST58CM3NXWPrl2BP0Ct77yB6DJuVyLab_AnZRdJUUm7v9YpkbHEuFo1AoGpB5br6uwY/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEF17aZpuJ5kq-YMVBbfz5HuaO5M_VVKXcHiZTvC2cv1JWPGKGOqFi7AsFJtskmJZMqIjc7ioUVrh6UusI-U6ZeJQuiXxS2f1UmHyiD3VlUrdzLuna2KMN1-zmF4IAmJIBipj0XMxdTok/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://helperblogger.ucoz.com/demo/js-slider/js-image-slider.js" type="text/javascript"></script>

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

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div> 

http://1.bp.blogspot.com/-mLI/UUI/AAB4k/j6RY/s550/sample1.jpg

အေပၚက အနီေရာင္ေလးနဲ႕ ၿပေပးထားတဲ့ စာတမ္းမွာ မိမိ ၾကိဳက္ႏွစ္သက္တဲ့ ဓါက္ပံု လင့္ ကိုေၿပာင္းနိုင္ပါတယ္..။

မွတ္ခ်က္ ။ ကုဒ္ေတြထဲက # ေနရာမိမိညြန္လိုတဲ့လင့္ကိုထည့္ပါ။

  www.ayekyaw.org

Read More