ဘေလာ့ခရီးသည္: Blog Slider

Showing posts with label Blog Slider. Show all posts

2 Dec 2015

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

6:28:00 am Unknown 2 comments

ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ ဒီ စလုိက္တာ ပံုစံေလးက အရမ္းလွပါတယ္ အသစ္ထြက္ထားတာ မၾကာေသးပါ..။ မိမိ ဘေလာ့ ေတြမွာ မိမိ ညႊန္ျပလိုတဲ့ 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

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

6:26:00 am Unknown No comments

ဒီေန႕ေတာ့ ဘေလာ့ 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.

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

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

<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

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

6:23:00 am Unknown No comments

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

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

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

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

<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

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

6:45:00 am လယ္တီေျမသား 1 comment

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

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

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

မွတ္ခ်က္ ။ ။ မိမိတို႕ ကုဒ္ေတြ ေကာ္ပီယူ ထည့္တာနဲ႕ ျပဳျပင္စရာေတြ ရွိလာမွာပါေနာ္
(၁) "ပုံလင့္ထည့္ရန္" ဆိုတဲ့ေနရာမွာ မိမိတို႕ ျပလိုတဲ့ပုံရဲ႕ လင့္ကိုပါ။
(၂) "မိမိပို႕စ္လင့္ထည့္ပါ" ဆိုတဲ့ေနရာမွာ ညႊန္ျပတဲ့ ေနရာရဲ႕ လင့္ကို ထည့္ေပးပါ။

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

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

ဆက္ေလ့လာလိုပါက .

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

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

အဆင္ေျပၾကပါေစ... မေျပတာ မရွင္းတာ ရွိပါက ခ်က္ေဘာက္မွာ ေအာ္ခဲ့ၾကပါေနာ္...

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
ကြ်န္ေတာ္ႏွင့္ကဗ်ာ{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

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

6:34:00 am လယ္တီေျမသား No comments

Excellent Content SlideShow+Slider to Blogger / WebSite

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

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

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

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

ဆက္ေလ့လာလိုပါက .

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

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

အဆင္ေျပၾကပါေစ... မေျပတာ မရွင္းတာ ရွိပါက ခ်က္ေဘာက္မွာ ေအာ္ခဲ့ၾကပါေနာ္...

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ

စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

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

6:33:00 am လယ္တီေျမသား No comments

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

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

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

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

ဆက္ေလ့လာလိုပါက .

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

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

7:54:00 am လယ္တီေျမသား No comments

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

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

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

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

ဆက္ေလ့လာလိုပါက .

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

အဆင္ေျပၾကပါေစ... မေျပတာ မရွင္းတာ ရွိပါက ခ်က္ေဘာက္မွာ ေအာ္ခဲ့ၾကပါေနာ္...

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

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

2 Dec 2015

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

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

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

19 Sept 2013

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

17 Sept 2013

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

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

16 Sept 2013

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

တင္ထားသမွ် ေခါင္းစဥ္မ်ား

မန္ဘာ၀င္လို႕အားေပးၾကပါ

Translate

Popular Posts

သည္ေလာက္ထိၾကည့္ရွဳထားတယ္

Like My Facebook Page

တင္သမွ် ေမးကေနရေနေစရန္

မိတ္ေဆြတို႕ရဲ႕ စကားသံမ်ား

အၾကံျပဳလိုျခင္တာေလးေတြေျပာပါ

ဒီေနရာမှာလည်းဝင် ေရာက် ေလ့လာနိူင်ပါတယ်

My Blog Apk Download Here

Labels

Blog Archive