Showing posts with label Recent Posts Widget. Show all posts
Showing posts with label Recent Posts Widget. Show all posts

Wednesday, 14 August 2013

ဘေလာ့မွာ လွပတဲ့ Most Popular Post Slider/Image Gallery V2 ေလးေနာ္

 
 မိမိတို႕ ဘေလာ့မွာ Porpulat Post  လွလွေလးေတြ လုပ္ၾကမယ္ေနာ္...အေပၚက စတိုင္ေလးနဲ႕ေပါ့ အရမ္းးလန္းတယ္... စမ္းလိုက္ေနာ္  ေအာက္မွာ နည္းလမ္းတိုင္းေလ့လာ  ျပီးလုပ္လိုက္ပါ....
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ..
►5- Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

</head>  သည္ကုဒ္ကိုရွာလိုက္ပါ  ေတြ႕တာနဲ႕  သူ႕အေပၚကေန ကပ္လွ်က္  ေအာက္ကေပးထားေသာကုဒ္ေတြကို ထည့္ေပးလိုက္ပါ...

<style type="text/css">
#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxAcEh4A4FS5fEWFne3KpYua8JTtv37ehQYt8mxQ7NoM7TtSU51KnJVMtL2W4nvyz0ZAo_QKf6H-dufPWTvXyWausKTAq75MQx0jIGcfI_8OsTLX0-bYl3DPArzGDn3Cr0dHP52u0mxT8/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://latest-hacks.googlecode.com/svn/gadgets/popularposts/popular-posts.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYSUahno3EF2DZAtxMyLQ3r1nnbRQ8s93L2mPpPvDlCswJL5bfRIOxJkmHdC02nP2sWtd1Us-YSxQdwuuUOcrnd32ZqYspAQS3E5rOlzQq1NKiCinSXdfNQYdAABp8x1pDJBB5581WuD8/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDV47kOcDsm5QyaoirhfFpVG0eZFMnakhyphenhyphenE2T65LkH9Xw-A71onmdcoyUykVGU0IRuCWK0TBmPMGoTAnsjlaaDRzhpVC1tZcJZXXT4c1_ZmlmAslGrmcg-Sl6YnAZDcKN4IbeYMWFyEMA/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

  • ေနာက္ထပ္  ေအာက္ကကုဒ္ကို  ထပ္ရွာလိုက္ပါအုံးးေနာ္...
<b:section class='sidebar' id='sidebar' preferred='yes'>
  • ေတြ႕ျပီဆိုတာနဲ႕  သူ႕ေအာက္ကေန ကပ္လွ်က္   ေပးထားေသာေအာက္ကကုဒ္ေတြကို ထည့္ေပးလိုက္ပါ....
<b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1HczHVCiPW2YbqvVrgfBp0CZnqGljdEdqlhEd5vBB8X0qW1o8yXQQdgGWvhlfFCKHMlU8fligMPtRzQpqFKyuWDx5qTEti6O3FZM4iwjPEmacDuV2cpFAiC5VJiX3FAaFFiqozFldtA/s1600/defaultimage.jpg'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

  • Now save your template
thanks: http://www.snacktools.com

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္... လိုအပ္တာမ်ားရွိပါက.. C-Box မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္... 
ဘေလာ့ခရီးသည္ 
www.ledimye.blogspot.com 
www.aungsanmks.com 
www.ninilayy.com 
တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

Read more »

Thursday, 18 July 2013

Recent Posts စလိုက္ေလးျပဳ လုပ္နည္း (7)


]Tooltips Recent Post Widget For Blogger With Thumbnail
Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုေအာက္က ကုဒ္ ထည့္ ပါ
ျပီးရင္ေတာ့ အဲ ထဲမွာ (ဘေလာ့နာမည္) ဆိုျပီ ရွိတယ္ မိးမိးဆိုက္ ကို ျပင္ ေပး ရမယ္
ေဆ႔ပါ ....
ေအာင္ျမင္ သြား ပါျပီ



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDv4kB6rTeFe5YMWTsx6SBiXJckq19d1M62UDSus1c-Nao3mr3gURmvpqsweJmqncxigOY2saIgV2iFV8_DSYeOtqcZhbIevV7vU-axvHCsDlXXeknofXcU9Pp7llUNYM7jXIZ0FlCVnBu/s1600/24work.blogspot.com.loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #1BA1E2;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" 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/24workpng" 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/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript">


var rpTitle = "Latest Post", // Widget Title

numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png", // Image that show up if the post doesn't have a image
blogURL = "http://ဘေလာ့နာမည္.blogspot.com/"; // Your Blog Address
</script><script src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-6.js" type="text/javascript"></script>




ဆက္လက္ၾကိဳးစားေရးသားေပးပါဦးမယ္ဗ်ာ
ေအာင္ေလး

Read more »

Recent Posts စလိုက္ေလးျပဳ လုပ္နည္း (6)

Flexible Recent Posts Widget With Thumbnail
Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုေအာက္က ကုဒ္ ထည့္ ပါ
ျပီးရင္ေတာ့ အဲ ထဲမွာ (ဘေလာ့နာမည္) ဆိုျပီ ရွိတယ္ မိးမိးဆိုက္ ကို ျပင္ ေပး ရမယ္
ေဆ႔ပါ ....
ေအာင္ျမင္ သြား ပါျပီ



<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" 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/24workpng" 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/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-5.js"></script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://ဘေလာ့နာမည္.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>



ဆက္လက္ၾကိဳးစားေရးသားေပးပါဦးမယ္ဗ်ာ
ေအာင္ေလး

Read more »

Recent Posts စလိုက္ေလးျပဳ လုပ္နည္း (5)

Scrolling Recent Post Gadget For Blogger

Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုေအာက္က ကုဒ္ ထည့္ ပါ
ျပီးရင္ေတာ့ အဲ ထဲမွာ (ဘေလာ့နာမည္) ဆိုျပီ ရွိတယ္ မိးမိးဆိုက္ ကို ျပင္ ေပး ရမယ္
ေဆ႔ပါ ....
ေအာင္ျမင္ သြား ပါျပီ


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" 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/24workpng" 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/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://24work.ucoz.com/24work-blogspot/recent-posts/hb-recentposts-2.js" ></script>
<script style='text/javascript' src='http://24work.ucoz.com/24work-blogspot/recent-posts/hb-jquery-ticker.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://ဘေလာ့နာမည္.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>









ဆက္လက္ၾကိဳးစားေရးသားေပးပါဦးမယ္ဗ်ာ
ေအာင္ေလး

Read more »

Recent Posts စလိုက္ေလးျပဳ လုပ္နည္း (4)

  Stylish Animated Blogger Recent Posts Widget
Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုေအာက္က ကုဒ္ ထည့္ ပါ
ျပီးရင္ေတာ့ အဲ ထဲမွာ (ဘေလာ့နာမည္) ဆိုျပီ ရွိတယ္ မိးမိးဆိုက္ ကို ျပင္ ေပး ရမယ္
ေဆ႔ပါ ....
ေအာင္ျမင္ သြား ပါျပီ



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}


#workwidget li:hover {
background: #84f6f5;

}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" 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/24workpng" 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/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ဘေလာ့နာမည္.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.js' type='text/javascript'></script>
</div>

ဆက္လက္ၾကိဳးစားေရးသားေပးပါဦးမယ္ဗ်ာ
ေအာင္ေလး

Read more »

Recent Posts စလိုက္ေလးျပဳ လုပ္နည္း (3)

Animated Recent Post Widget Sliding Recent Post Widget
Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုေအာက္က ကုဒ္ ထည့္ ပါ
ျပီးရင္ေတာ့ အဲ ထဲမွာ (ဘေလာ့နာမည္) ဆိုျပီ ရွိတယ္ မိးမိးဆိုက္ ကို ျပင္ ေပး ရမယ္
ေဆ႔ပါ ....
ေအာင္ျမင္ သြား ပါျပီ



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" 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/24workpng" 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/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-2.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://ဘေလာ့နာမည္.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>





ဆက္လက္ၾကိဳးစားေရးသားေပးပါဦးမယ္ဗ်ာ
ေအာင္ေလး

Read more »

Recent Posts စလိုက္ေလးျပဳ လုပ္နည္း (2)

Stylish Scrolling Recent Posts widget
Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုေအာက္က ကုဒ္ ထည့္ ပါ
ျပီးရင္ေတာ့ အဲ ထဲမွာ (ဘေလာ့နာမည္) ဆိုျပီ ရွိတယ္ မိးမိးဆိုက္ ကို ျပင္ ေပး ရမယ္
ေဆ႔ပါ ....
ေအာင္ျမင္ သြား ပါျပီ



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjABGzmTtqPzlHJMK7cwO7CMow5c30nPKFmIQItAOmvjW4pNHtfgs_KHpYHuF4oNP04tmXV9H9NXrlfFsT8eOMuxzX8QlBLRbku6JwzdhN51kU2ovK41-3HDWLDOZCpmuhl1VnfkbcvUy/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" 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/24workpng" 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/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ဘေလာ့နာမည္.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.js' type='text/javascript'></script>
</div>





ဆက္လက္ၾကိဳးစားေရးသားေပးပါဦးမယ္ဗ်ာ
ေအာင္ေလး

Read more »

Recent Posts စလိုက္ေလးျပဳ လုပ္နည္း (1)

Recent Post With Thumbnail Simple Spy
Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုေအာက္က ကုဒ္ ထည့္ ပါ
ျပီးရင္ေတာ့ အဲ ထဲမွာ (ဘေလာ့နာမည္) ဆိုျပီ ရွိတယ္ မိးမိးဆိုက္ ကို ျပင္ ေပး ရမယ္
ေဆ႔ပါ ....
ေအာင္ျမင္ သြား ပါျပီ



<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjABGzmTtqPzlHJMK7cwO7CMow5c30nPKFmIQItAOmvjW4pNHtfgs_KHpYHuF4oNP04tmXV9H9NXrlfFsT8eOMuxzX8QlBLRbku6JwzdhN51kU2ovK41-3HDWLDOZCpmuhl1VnfkbcvUy/s1600/24work-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->

</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" 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/24workpng" 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/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbAhPdC-K21Y94XvwT5JDvqsQy7devBjQmQBP6sGdwK8sO9G_QAZtk8jD4GNvZd7rrgVfwp7xHehbGB8rfuUej63gtjltgcrxZAwVdaMjlxy4d_e2U5RYouKAyZmDi9dT6J-yl-KdOcf9/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ဘေလာ့နာမည္.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com.js' type='text/javascript'></script>

</div>


ဆက္လက္ၾကိဳးစားေရးသားေပးပါဦးမယ္ဗ်ာ
ေအာင္ေလး

Read more »

Tuesday, 20 November 2012

ေနာက္ဆုံးတင္သမွ် Slider Post ေလးလုပ္နည္း( ရွယ္ေနာ္ )

အားလုံးေသာမိတ္ေဆြအေပါင္းတို႕ မဂၤလာပါေနာ္..သည္ေန႕ တင္ေပးမဲ့ နည္းပညာေလးကေတာ့ အရမ္းလန္းပါတယ္ဗ်ာ... ဘာလို႕လဲ ဆိုေတာ့ ဘာမွ အေကာင့္ေတြ ဘာေတြညာေတြ၀င္စရာမလိုဘဲ
လုပ္နိဳင္ပါတယ္.. html ေတြကိုလဲ သြားစရာမလိုဘူးေနာ္.. မိမိတို႕စိတ္တိုင္းက် လုပ္ျပီး ရလာတဲ့ ကုဒ္ေလးကိုဘဲ ေကာ္ပီယူလာျပီး blogger>>layout>>javascript ထဲကိုတန္းထည့္ေပးယုံနဲ႕....
ဘေလာ့ကာမ်ား သိပ္လိုျခင္ ထားျခင္ၾကတဲ့ ေနာက္ဆုံးတင္သမွ် ဆိုတဲ့ ပို႕စ္ေလးေတြကို..slider ဒီဇိုင္းေလးနဲ႕ပါ ကြ်န္ေတာ့္ ဘေလာ့မွာ C-Box ေအာက္ကတင္ထားတာ ေတြ႕ၾကမွာပါ...ကဲ .....
ႏွစ္သက္ၾကမယ္ဆိုတာ ယုံ ၾကည္ပါတယ္.... စမယ္ေနာ္..........
ပဆမဆုံး ေနာက္ဆုံးတင္သမွ်စလုိက္တာေလးနဲ႕ လုပ္ဖို႕     သည္ေနရာ   ေလးကိုသြားလုိက္ပါ။
ပုံေလးေတြ နဲ႕ ရွင္းျပလုိက္ပါမယ္...



ဘာမွ ထူးထူးေထြေထြ လုပ္ဖို႕မလိုပါဘူးး အဓိကအခ်က္ေလးေတြကိုဘဲ ေျပာျပသြားပါ့မယ္..
ပထမဆုံး အထက္ဆုံးမွာ မိမိဘေလာ့လိပ္စာ ဆိုတာ ထည့္ေပးလုိက္ပါ...ေနာက္ အဲေအာက္နားက
လိုသလိုထားပါဆိုတာက မိမိဆို႕ ေဘလာ့ဆိုဒ္ဘားက စေကးေတြအတိုင္း လိုအပ္သလို ထားေပးနိဳင္ပါတယ္.. ဥပမာ width 270..hight..400 အဲလိုမ်ိဳးေပါ့.. ထားလုိက္ပါ..
အဲေအာက္က ဟာေတြေတာ့ မိမိတို႕ အဆင္ေျပသလို ကလိၾကည့္ေပါ့...သိပ္အေရးမပါလို႕ပါ.
မေျပာေတာ့ပါဘူးေနာ္.... ကဲ..ညာဘက္ျခမ္းၾကည့္မယ္.. ညာဘက္ျခမ္းမွာက
မိမိတို႕ ရရွိမဲ့ slider ပုံေလး ရွိေနပါတယ္. မိမိ ေျပာင္းေပးသလို သူက လိုက္ေျ့ပာင္းေနမွာပါ
ပုံေလးအထက္က ပုံစံေရြးပါ ဆိုတဲ့ေနရာမွာ ဒီဇိုင္း ( ၇ ) မ်ိဳးတိတိ ပါတယ္ေနာ္...
တစ္ခုခ်င္းစီ ကလစ္ၾကည့္ ပုံေလးေအနထားေျပာင္းေပးလိမ့္မယ္... ၾကိဳက္တဲ့ ကာလာနဲ႕ ဒီဇိုင္း
ရလာတာနဲ႕ အတည္ထားေပးလုိက္ေတာ့ေပါ့........ ကဲဒါဆို ရပါျပီ...
အဲပုံေအာက္က ကုဒ္ယူရန္ ဆိုတဲ့ အကြက္ထဲမွာ ကုဒ္ေတြ ရေနပါျပီ... ေကာ္ပီ ယူလိုက္ပါေတာ့...
မိမိတို႕ ဘေလာ့ထဲကို ထည့္လို႕ ရပါျပီ... ထည့္နည္းကေတာ့..

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

 မထည့္တတ္ေသးေသာ ဘေလာ့ကာအသစ္ေတြအတြက္ေတာ့   သည္မွာ      ထည့္နည္းပါ။

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

Read more »

Saturday, 17 November 2012

Popular Post လွလွေလးဖန္တီးၾကရေအာင္

How To Add Multi-Color Popular Posts Widget For Blogger



သည္နည္းပညာေလးကေတာ့ ကြ်န္ေတာ္ အဂၤလိပ္ဆိုဒ္တစ္ခုကေန ေတြ႕ရွိကူးယူ
ခဲ႕တယ္ဆိုတာ ပထမဆုံး ၀န္ခံလိုက္ပါရေစ.. ႏွစ္သက္သေဘာက်လို႕ ခုလို ျပန္လည္တင္ျပေပးလိုက္ရျခင္းပါ.. သည္နည္းေလးကို စမ္းသတ္ၾကည့္လိုက္ပါ..အရမ္းေသသပ္လွပတဲ့ ေပၚျပဴလာပို႕စ္ေလးေတြကို မိမိတို႕ဘေလာ့မွာ ေတြ႕ျမင္ရမွာ ျဖစ္ပါတယ္...
 
 
 လက္ေတြ႕စမ္းသတ္ၾကည့္လိုက္ပါေနာ္....
နည္းလမ္းေလးနဲ႕ လုိအပ္တဲ့ကုဒ္ေတြကို ေပးထားပါတယ္...
 
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  TEMPLATE    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
              /* Variable definitions  ကုဒ္ကိုရွာလုိက္ပါ ေတြ႕တာနဲ႕ သူ႕ေနာက္ကေန ေပးထားတဲ့ 
ေအာက္ကကုဒ္ေတြကို ထည့္ေပးလုိက္ပါေနာ္....


<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>

ေနာက္တဆင့္ေအနနဲ႕   ]]></b:skin>ကုဒ္ကိုရွာလုိက္ပါေနာ္ေတံ႕တာနဲ႕ ]]></b:skin>  သည္ကုဒ္ေလးမတိုင္မွီမွာ ေအာက္ကကုဒ္ေတြကို ထည့္ေပးလို္က္ပါ။
 

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

 
ေနာက္ထပ္ ရွာရအုံးမယ္ သည္းခံေနာ္....ဟိဟိ...
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> ေတြ႕ျပီဆိုတာနဲ႕ </b:widget>သည္ကုဒ္ေလးထိေရာက္ေအာင္ ဖ်က္ေပးလိုက္ပါ..  ျပီးတာနဲ႕ ေအာက္ကကုဒ္ေတြကို ခုဏ ဖ်က္ထားတဲ့ ေနရာကို အစားထိုးထည့္ေပးလိုက္ပါ..

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1HczHVCiPW2YbqvVrgfBp0CZnqGljdEdqlhEd5vBB8X0qW1o8yXQQdgGWvhlfFCKHMlU8fligMPtRzQpqFKyuWDx5qTEti6O3FZM4iwjPEmacDuV2cpFAiC5VJiX3FAaFFiqozFldtA/s1600/defaultimage.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1HczHVCiPW2YbqvVrgfBp0CZnqGljdEdqlhEd5vBB8X0qW1o8yXQQdgGWvhlfFCKHMlU8fligMPtRzQpqFKyuWDx5qTEti6O3FZM4iwjPEmacDuV2cpFAiC5VJiX3FAaFFiqozFldtA/s1600/defaultimage.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

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

 ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။
လယ္တီေျမသား www.ledimyethar.com
ဘေလာ့ခရီးသည္ http://aungsanmks.blogspot.com/
မွတ္စုစာအုပ္ http://aungsan96.blogspot.com/
ဓမၼဗိမာန္ http://dhamabimarn.blogspot.com/

Read more »

Monday, 17 September 2012

Recent Posts Widget Thumbnail for Blog


ဒီ widget ေလးကေတာ့ တျခား recent posts widget ေတြနဲ႔ မတူပါဘူး၊ ေတာ္ေတာ္ေလး လန္းတယ္လို႔ ဆိုရမွာပါ။ လုပ္နည္းေလးကလည္း လြယ္ကူလြန္းပါတယ္။ က်ေနာ့္ဘေလာ့မွာ ထည့္ထားတဲ့ recent posts widget ပံုစံေလးပါ။ ထည့္ခ်င္လို႔ ရွိရင္..


ပထမဆံုးက်ေနာ္တို႔ ဒီေနရာ ေလးကို သြားလိုက္ပါ။ ေအာက္ကပံုအတိုင္း ေပၚလာပါလိမ့္မယ္။

ပံုထဲကအတိုင္း ကိုယ့္စိတ္ႀကိဳက္ ျပင္ၿပီးရင္ေတာ့ ေအာက္က ပံုအတိုင္း အနီေရာင္နဲ႔ ေဘာင္ခတ္ထားတဲ့အတိုင္း Customize ဆိုတာကို ႏွိပ္ပါမယ္။

ၿပီးရင္ ေအာက္ကပံုအတိုင္း အနီေရာင္ ျပထားတဲ့ Add Widget to My Blog ဆိုတာကို ႏွိပ္ေပးလိုက္ပါ။

ဒါဆိုရင္ ေအာက္က ပံုအတိုင္း ျဖစ္သြားပါမယ္.

 ဒီေနရာမွာ ADD WIDGET ဆိုတာကိုႏွိပ္ၿပီး တစ္ခါတည္း ထည့္လို႔ ရပါတယ္. (သို႔မဟုတ္)
Edit content: ဆိုတာကိုႏွိပ္လိုက္ၿပီး Box ထဲက code ေတြကို copy ကူးထားလိုက္ပါ....
ၿပီးရင္ Layout ထဲက Page Element ထဲက Add Gatget ဆိုတာကို ႏွိပ္ၿပီး HTML/Java Script မွာ သြားထည့္လိုက္ပါ။ ၿပီးရင္ Save ေပးလိုက္ပါ။ gatget ကို ေနရာခ်ၿပီး Save ေပးလိုက္ရံုပါပဲ။ 

ဒါဆိုရင္ Recent Posts widget ကို ထည့္လို႔ ၿပီးသြားပါၿပီခင္ဗ်ာ။


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

Read more »