Blog မွာေၾကာ္ျငာမ်ားကို Slide Show နဲ႕ေဖၚျပခ်င္သူမ်ားအတြက္

Blog မွာေၾကာ္ျငာမ်ား Post မ်ား Label စသည္ျဖင့္ Link ခ်ိတ္ပီးေဖၚျပခ်င္တဲ့ဘေလာ့
သူငယ္ခ်င္းအတြက္တင္ေပးလုိက္ပါတယ္၊

အရင္ဆံုးကိုယ့္ရဲ႕ Blog ကို Sing in ၀င္ပါ

ေအာက္မွာျပထားတဲ့အတိုင္း Add a Gadget ကိုႏိုပ္ျပီး HTML/JAVA Script ကိုႏုိပ္ပါ

ေအာက္ပါ Code မ်ားကိုကူးထဲ့ျပီး Save ပါ။

<style type="text/css">

.container1 {
 width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
 position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
 position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
 position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
 line-height: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7i7SbgJA_p2gTdDtkwhin5mh4uqS8jbJ9TpPqVzksk6rw1S7-Pd8ppV7CkcZc191dQpf-b_I2Huy-49msWS7kGIJoA2K2J98LTJhbZnrllOyZLkWa_YYNlS3F62eKEhj25X6pL7b-3dI/s1600/paging_btrix_bg2.png) no-repeat;
 display: none; 
}
.paging_btrix a {
 padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
 font-weight: bold; background: #920000; border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="container1">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a>
            <a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a>
            <a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a>
            <a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a>
        </div>
    </div>
    <div class="paging_btrix">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 //Set Default State of each portfolio piece
 $(".paging_btrix").show();
 $(".paging_btrix a:first").addClass("active");
  
 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;
 
 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});
 
 //paging_btrix + Slider Function
 rotate = function(){ 
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

  $(".paging_btrix a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
  
  //Slider Animation
  $(".image_reel").animate({ 
   left: -image_reelPosition
  }, 500 );
  
 }; 
 
 //Rotation + Timing Event
 rotateSwitch = function(){  
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
   $active = $('.paging_btrix a.active').next();
   if ( $active.length === 0) { //If paging_btrix reaches the end...
    $active = $('.paging_btrix a:first'); //go back to first
   }
   rotate(); //Trigger the paging_btrix and slider function
  }, 5000); //Timer speed in milliseconds (3 seconds)
 };
 
 rotateSwitch(); //Run function on launch
 
 //On Hover
 $(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
 }, function() {
  rotateSwitch(); //Resume rotation
 }); 
 
 //On Click
 $(".paging_btrix a").click(function() { 
  $active = $(this); //Activate the clicked paging_btrix
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation
  return false; //Prevent browser jump to link anchor
 }); 
 
});
</script>

အစားထိုးရမဲ့ေနရာေတြမွာေဖၚျပမဲ့ Link နဲ႕ ပံုရဲ႕ Link ကိုအစားထိုးေပးပါ

<a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a>
ေဖၚျပစရာ ၄ ခုနဲ႕မလံုေလာက္ပါကအထက္ပါ Code ကိုေနာက္ထပ္ကူးပီးတပ္တိုးႏိုင္
ပါတယ္ဗ်ာ....

၀င္းထြဋ္တင္မွ ကူးယူ

Read More

ဘေလာ့မွာ facebook Like Twitter Like google + Lik Share ထည့္နည္း

This is also Nice social Bookmark buttons. This buttons helps you to get more visitors by
sharing your post.Because it large button Earlier i posted about How to add "Add This" Social
Bookmark Buttons. This is more attractive than it. In this tutorial also helps you to add this social
bookmark button to below post title and end of the post.

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)


3. Add check mark in Expand Widget Templates. 

4. Find this tag by using Ctrl+F   <div class='post-footer-line post-footer-line-1'/>

5. Paste below code before <div class='post-footer-line post-footer-line-1'/> code

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMGscmO2woa5Hq0yTP4VFoOeTkxFxGrIk-ejuAkOKx_Lz-nXVrKdqNkCvUo_0njpp115k9JivyVF_iTKup1a24Dffd7SRObWi6DmdojLwmKDptaqUt8iAaZFDIgxOWhw7jzM4-CfBlD6RJ/s1600/sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;} 
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
</b:if>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="helperblogger" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            
</script></div>
</div>

6. Now save your Template. You are done.

Demo below
မူရင္းလင့္ http://www.bloggertrix.com/2012/07/how-to-add-cool-social-sharing-widget.html
ကူးခိုင္းသလား မကူးခိုင္းသလားေတာ့ မသိဘူး ေကာင္းေတာ့ ကူးခ်င္စိတ္က တားမရဘူး လိုက္ကူးေတာ့တာဘဲ
က်ဳပ္က မပ်က္ႏိုင္တာေလးေတြကိုဘဲ နဲနဲ အားသန္လာတယ္။ ဒါေလးေတြက ဒီဆိုက္ကို ဟက္လို႔ ဖ်က္မွတာ
ပ်က္မွာပါ သူမ်ားဆိုက္ေတြမွာ တင္ထားတာလုိ မဟုတ္ေတာ့ ေတာ္ရံုနဲ႔ မပ်က္ဘူးေလ..ဒါေၾကာင့္ပါ။။

ဘေလာ့ေအာက္မွာ စာမ်က္ႏွာေလးေတြ ေပၚေအာင္လုပ္နည္း

In this post, im gonna explain how to add blogger page number  navigation  widget  with nice   style.

I will  include 3  style. You  can  choose it as your like.This will  helps to your  visitors  to visit every
page in your blog.  Im  using  java script ,CSS and  HTML for this widget.You can get my earlier post
about number navigation here.

မူရင္းဆိုက္ကေတာ့  http://www.bloggertrix.com/ ပါ


1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

Style 1

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px;  -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style> 
<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 2

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px;  -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style> 

<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 3

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
 margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;
 }.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
 }.showpageOf{
 margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
 }.showpagePoint {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 margin:0 3px 0 3px;padding:3px 10px;
 line-height:30px;cursor:pointer;white-space:nowrap;
 border:2px solid #5C8CFF;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;
 } </style> 

<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

7. Now save your HTML/Javascript'.

    You are done...
မူရင္းဆိုက္ကေတာ့ ဒီမွာပါကြယ္..http://www.bloggertrix.com/2012/11/attractive-numbered-page-navigation.html

 

Read More

ဘေလာ့ႏွင့္ ပါတ္သက္တာေလးမ်ား ရွာေဖြစုစည္းမႈ ဘေလာ့လင့္ေတြကိုကာလာမ်ိဳးစံုေပၚေအာင္လုပ္နည္း

  ဒီနည္းလမ္းေလးကိုလဲဘေလာ့မိတ္ေဆြမ်ား ႀကိဳက္နွစ္သက္ႀကလိမ့္မယ္ထင္ပါတယ္.ဒါကေတာ့ မိမိတို ့က လင့္ေတြကို ေမာက္စ္နဲ ့ေထာက္လိုက္ရင္ အေရာင္အမ်ိဳးမ်ိဳးနွင့္ေပၚေအာင္လုပ္တဲ့နည္းေလးပါ.လုပ္နည္းကလဲမခက္ပါဘူး. 

၁. Go to Dashboard, click Design, click Edit HTML.

၂. (Ctrl+F) ျဖင့္ </head> ကိုရွာျပီးေအာက္ကကုဒ္ကို အဲဒီ</head> ေအာက္မွာထည့္ေပးလိုက္ပါ.
<script language='javascript' src='http://sites.google.com/site/blogfuelblogfuel/widgets-js/LinkPelangi.js'/>

၃. ျပီးရင္ေတာ့ Click Save Template.
မိမိတို ့ဘေလာ့ကလင့္ေလးေတြကို အထက္မွာေျပာခဲ့တဲ့အတိုင္းေမာက္စ္နဲ့ေထာက္ႀကည့္လိုက္ရင္လွပတဲ့ ကာလာေလးေတြအလုပ္လုပ္ေနတာကိုေတြ ့ရပါလိမ့္မယ္.


====================================================

Blog hack မခံရေအာင္ ဘယ္လိုၾကိဳတင္ကာကြယ္မလဲ။

Blog hack မခံရေအာင္ ဘယ္လိုၾကိဳတင္ကာကြယ္မလဲေပါ့ ကိုညီေနမင္းရဲ႔ Blog ေလး hack ခံရရခ်င္း

သတိရလိုက္မိတာေလးေပါ့။ ဆိုေတာ႔ သူမ်ားခံရတာကို ေအာ္ဟုတ္ပါလား။ ဆိုျပီးေတာ႔ ၾကည့္မေနေတာ႔ဘဲ။

ကိုယ့္ကိုကိုယ့္ အသိေပးရပါမယ္ ဒီလိုမ်ိဳး မျဖစ္ေအာင္ ငါဘယ္လို ဒီလို hack တာကေန ကိုယ့္ Blog ကို ကာကြယ္ရမလဲဆိုျပီးေတာ႔  ကၽြန္ေတာ္ ခ်က္ခ်င္းသတိရမိတာနဲ႔ ႏွစ္ေပါက္ေအာင္ အသံုးျပဳေနျပီး ျဖစ္တဲ႔ 

ဒီ Blogger.com ထဲက ေက်ာ္ေက်ာ္သြားတဲ႔ function ေလးကို ေက်ာ္သြားလို႔မျဖစ္ဘဲ အသံုးျပဳရပါေတာ႔မယ္။

ဒါကေတာ႔ Blogger.com က dashboard မွာရွိတဲ႔ Settings ကိုႏွိပ္ပါ။

အထက္ပါ ပံုအတိုင္း Export ကိုႏွိပ္ပါျပီးေနာက္

DOWNLOAD BLOG ကိုႏွိပ္ပါ။ ဒါဆိုရင္ 

Save file ဆိုျပီးေတာ႔ Save ခိုင္းပါလိမ့္မယ္ ဒီအခါမွာ ကိုယ့္ရဲ႔ Computer ထဲမွာျဖစ္ျဖစ္၊

USB ထဲမွာျဖစ္ျဖစ္...လံုျခံဳတဲ႔ေနရာမွာ သိမ္းထား႐ံုဘဲ.. 

ကယ္ဒီ blog hack ခံရျပီး လံုး၀ဖြင့္မရေတာ႔ဘူးဆိုရင္ Blogger Account တခုျပန္ဖြင့္ျပီးေတာ႔

import blog မွာ အရင္က DOWNLOAD လုပ္ထားတဲ႔ Blog ကိုျပန္တင္..

နဂိုအတိုင္း Comments ပါအပါအ၀င္ျပန္လည္ရရွိပါမယ္။။။။ ခင္ေမာင္စိုး မြန္ျပည္နယ္မွ ကူးယူေဖာ္ျပသည္  အေပၚက သံုးပို႔စ္ပါ)

==============================================

 ဘေလာ့ခရီးသည္မွ ကူးယူေဖာ္ျပထားတာေလးမ်ား။

အားေလာ့လုံးမဂၤလာပါဗ်ာ.. ဘေလာ့ခရီးသည္ မိတ္ေဆြအေပါင္း ရႊင္ေပ်ာ္ ခ်မ္းသာၾကပါေစလို႕ ေမတၱာပို႕သလုိက္ရပါတယ္... သည္တစ္ခါ တင္ေပးမဲ့ နည္းပညာေလးကေတာ့ အေတာ္ေလး အသုံး၀င္ပါတယ္.. ကြ်န္ေတာ္တို႕ ဘေလာ့ေတြမွာ loading time အခ်ိန္ၾကာျမင့္ မွ
ဘေလာ့ပြင့္က်လာတာမ်ိဳး ရွိၾကပါတယ္.. အဲတာကေတာ့ အဓိက မိမိတို႕ဘေလာ့မွာ Widget ေတြ
အရမ္းမ်ားေနရင္ ေသာ္၄င္း  video ေတြ ဖလက္ေတြ အရမ္းမ်ားေနေသာ္၄င္း ျဖစ္တတ္ပါတယ္..
ဒါေၾကာင့္ မိမိတို႕ဘေလာ့မွာ Widget ေတြကို လိုသည္ထက္ပိုမတင္သင့္ေၾကာင္း ေျပာပါရေစ..
သည္နည္းေလးဟာ မိမိတို႕ဘေလာ့ကို အသင့္တင့္ ပိုမိုျမန္ဆန္ေစတဲ့ နည္းပညာေလးဆိုမမွားပါဘူးးးးး
ကုဒ္ေလးေတြကို ထည့္ေပးလုိက္ရံုပါဘဲ... ကဲ စမယ္ေနာ္..
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  Expand  Widget  Template  ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
 </head>  ဆိုတာကိုရွာလုိက္ပါ ေတြ႕တာနဲ႕ သူ႕ေအာက္မွာကပ္လ်က္ ေပးထားတဲ့ကုဒ္ေတြကို
        ထည့္ေပးလုိက္ပါ...
ထည့္ရမဲ့ကုဒ္ေတြကေတာ့............

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;http://beautifulbloggerwidgets.googlecode.com/files/grey.gif&quot;,threshold : 200});
});
</script>

ကုဒ္ကလည္းမမ်ားတာမို႕ လြယ္ကူစြာလည္းထည့္နိဳင္ပါတယ္.. စမ္းၾကည့္လုိက္ပါေနာ္ အရင္ကထက္ေတာ့
ပိုမိုျမန္ဆန္လာတာေတာ့ ကြ်န္ေတာ္ လက္ေတြ႕ သုံးထားပါတယ္...
 ျပီးတာနဲ႕  Save Template လိုက္ပါေနာ္........

=====================================

မိမိဘေလာ့ပုံေလးနဲ႕ကုဒ္ေရာပါ လုိျခင္သူယူနိဳင္ရန္

ဒါေလးကေတာ့  C-Box ကေနေတာင္းဆိုထားတာေလးပါ...ကြ်န္ေတာ္ ျပန္လည္ မွ်ေ၀လုိက္ပါတယ္..
ေ၀မင္း: က်ေတာ္အကို႕ဘေလာ့မွာလိုမ်ိဳး ပံုနဲ႕ကုဒ္ေလးလုပ္ခ်င္ပါတယ္(ဘေလာ့ခရီးသည္ကိုသင့္ဘေလာ့မွာထားမယ္ဆို 

 ေအာက္ကကုဒ္ကိုယူထည့္လိုက္ပါ။)အဲ့လိုပံုစံမ်ိဳးေလ
လုပ္နည္းေလးကေတာ့ မခက္ခဲလွပါဘူးး ကြ်န္ေတာ္ အသင့္ ထည့္နိဳင္ေအာင္ ကုဒ္ပါ တန္းေပးလုိက္ပါတယ္....

<div style="text-align: center;"><a href="http://www.aungsanmks.blogspot.com/" style="background-color: white;" target="_blank"><img style="width: 233px; height: 123px;" src="http://i.minus.com/ibzKGs07CjKUWB.png" /></a></div><textarea style="width: 279px; height: 44px;" cols="25">&lt;center&gt;&lt;a href="http://www.aungsanmks.blogspot.com/" style="background-color: white;" target="_blank"&gt;&lt;img style="width: 233px; height: 165px;" src="http://i.minus.com/ibzKGs07CjKUWB.png" /&gt;&lt;/a&gt;&lt;/center&gt;</textarea>

မွတ္ခ်က္   ။                               ။ အထက္ပါ ကုဒ္ေတြကို မိမိတို႕ ဘေလာ့ကာရဲ႕ layout--
html/java-script ကိုကလစ္ျပီးက်လာတဲ့ ေဘာက္ေလးထဲကို ထည့္ေပးလိုက္ပါ။
ကုဒ္ေတြမွာ ေသျခာၾကည့္လိုက္ပါ...
(၁)  အနီေရာင္နဲ႕ ျပထားတဲ့ ကြ်န္ေတာ့္ရဲ႕ ဘေလာ့လိပ္စာ url ေနရာကို  မိမိတို႕ ဘေလာ့ url နဲ႕အစားထိုးေပးပါ။
(၂)  အစိမ္းေရာင္နဲ႕ နံပါတ္ေလးေတြမွာ မိမိတို႕ လိုအပ္သလို ဘေလာ့နဲ႕ လိုက္ဖက္မဲ့ နံပါတ္ေတြအတိုင္း ေျပာင္းလဲေပးလိုက္ပါ။
(၃)  အနက္ေရာင္ေတြကေတာ့ ပုံရဲ႕လင့္ေတြပါ.. ပုံရဲ႕လင့္ေနရာမွာ မိမိတို႕ လုပ္ထားတဲ့ ပုံကို www.minus.com မွာ upload တင္ျပီး direct link ကိုယူျပီး ထည့္ေပးလုိက္ပါ။
         လုပ္ၾကည့္လိုက္ပါေနာ္..အဆင္ေျပပါေစ..

===========================

ဒါေလးေတြအားလံုး က်ဳပ္ေရးထားတာဆိုလို႔ ဓါတ္ပံုေလးပါ။ က်န္တာကေတာ့

ခင္ေမာင္စိုး (မြန္ျပည္နယ္မွ) ႏွင့္ ဘေလာ့ခရီးသည္တို႔ ထံမွ ကူးယူေဖာ္ျပထား

တာေလးေတြပါ။ အားလံုး ရႊင္လန္းခ်မ္းေျမ့ၾကပါေစ။ လြယ္ကူစြာျဖင့္ ဘေလာ့ကို

အတုိက္ခိုက္ မခံရပါေစႏွင့္။ တစ္ကယ္လို႔ အတိုက္ခံရလွ်င္လည္း ဒီအေပၚကနည္း

ေလးအတိုင္း ျပည္လည္တည္ေဆာက္ႏိုင္ေအာင္ ေဒါင္းေလာ့ခ်ၿပီး ေသခ်ာ သိမ္းထားလိုက္ပါ။ အားလံုးကို ေက်းဇူးတင္ပါတယ္။ လာလည္ေပးတဲ့အတြက္ေပါ့။

Read More

Slider ေလးလုပ္ရေအာင္ မိုးေကာင္းကင္မွ

က်ဳပ္ဒီေကာင္ေလးကို ရွာေနတာၾကာၿပီဗ်ာ အခုမွ ေတာကလားထြက္လာတဲ့ ကိုမုဆိုးႀကီးဆီမွာ ေတြ႔လို႔ ကူးယူခဲ့ပါ
တယ္။ လိုအပ္သူမ်ားလည္း သံုးႏိုင္ေအာင္ စုေဆာင္းထားလိုက္ပါၿပီ သေဘာက်သူမ်ား အိုင္တီမုဆိုးႀကီးကို ေက်း
ဇူးတင္ၾကပါ။ အိုင္တီမုဆိုးသို႔သြားရန္ =≥≥ သူရဲ့ေရးသားထားတာေလးကို ဖတ္ၾကည့္ၿပီး ကိုယ္တိုင္လုပ္ၾကည့္ပါ။

ကၽြန္ေတာ့္ဘေလာ့ရဲ႕ ညာဖက္ေဘးမွာ လုပ္ထားတဲ့ Slider ေလးမွာ သံုးထားတဲ့ code ေတြကို မွ်ေ၀ေပးလိုက္ ပါတယ္ဗ်ာ ပထမဆံုး Layout ကေန Add a Gadget ကို ဖြင့္ပါတယ္ အဲဒီထဲကမွ HTML/Java Scripts ကို ေရြးလိုက္ပါတယ္Title ေနရာမွာေတာ့ ႀကိဳက္တာထည့္ေပါ့ (ကၽြန္ေတာ္ကေတာ့ Update Posts လို႔ ထည့္ထားပါတယ္) ျပီးရင္ ေအာက္က Contents အကြက္ထဲမွာ ေအာက္က ကုဒ္ေတြကို ထည့္ေပးလိုက္ပါတယ္

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:225px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:225px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:10px; height:20px; 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> <script language='javascript'> imgr = new Array(); imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[1] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[2] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[3] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; showRandomImg = true; boxwidth = 230; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 11; acolor = "#666"; aBold = true; icon = " "; text = "Replys"; showPostDate = false; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "ဒီေနရာမွာ ကိုယ့္ဘေလာ့လိပ္စာ/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script type='text/javascript'> //<![CDATA[ /* * Recent Post with Spy effect for blogger.com * Script combined from bloggerstricks.com and spy effect from jqueryfordesigners.com * By Abu Farhan (www.abu-farhan.com) */ jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push(" <li>"+e(this).html()+"</li> ")});o=i.length;l.wrap('<div class="spyWrapper" /> ').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v=' <li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate"> '+n+'</div> <div class="spycomment"> '+cmtext+"</div> ";document.write(v);j++}document.write("</ul> ")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>'); //]]> </script> </div>



အဲဒီထဲမွာ "ဒီေနရာမွာ ကိုယ့္ဘေလာ့လိပ္စာ/" လို႔ ေရးထားတဲ့ေနရာမွာ ကိုယ့္ဘေလာ့ရဲ႕ URL ေပါ့ .. ဥပမာ ကၽြန္ေတာ့္ဘေလာ့အတြက္ဆိုရင္ "http://itmotesoeway.blogspot.com/" လို႔ ထည့္လိုက္တာေပါ့ ..(" နဲ႔ /" ေတြ က်န္ခဲ့တတ္ပါတယ္)
အဲဒီထဲမွာ boxwidth=230 ဆိုတာက ကိုယ့္ရဲ႕ ေနရာအက်ယ္အ၀န္းနဲ႔ ကိုက္ညီေအာင္ ခ်ိန္ၫွိရမယ့္ slider ရဲ႕ အက်ယ္ပါ View Blog မွာ သြားၾကည့္ အဆင္မေျပေသးရင္ ျပန္ျပင္ေပါ့ ..အဲဒီလိုပဲ  thumbwidth = 50 တို႔ thumbheight = 50 တို႔ ဆိုတာက ကိုယ့္ရဲ႕ Link Title ရဲ႕ေရွ႕က ပံုေလးရဲ႕ အက်ယ္နဲ႔ အျမင့္ေပါ့ .. က်န္တာေတြလည္း Value ေတြကို လိုသလို လိုက္ေျပာင္းလို႔ရပါတယ္ ..ကဲ .. အဆင္ေျပပါေစဗ်ာနည္းပညာလမ္းေၾကာင္းေပၚက သူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္ အိုင္တီမုဆိုး 
က်ဳပ္သေဘာက်လို႔ ကူးလာတာပါ လိုအပ္သူမ်ား လြယ္ကူစြာ အသံုးျပဳႏိုင္ရန္ ရည္ရြယ္ပါတယ္။ အားလံုး မပင္မပန္းဘဲ မိမိလိုအပ္တာေလးကို ယူငင္သံုးေဆာင္ႏိုင္ၾကပါေစ။ မိုးေကာင္းကင္ OHNTHAR ။

ဘေလာ့ေအာက္မွာ စာမ်က္ႏွာေလးေတြ ေပၚေအာင္လုပ္နည္း

In this post, im gonna explain how to add blogger page number  navigation  widget  with nice   style.

I will  include 3  style. You  can  choose it as your like.This will  helps to your  visitors  to visit every
page in your blog.  Im  using  java script ,CSS and  HTML for this widget.You can get my earlier post
about number navigation here.

မူရင္းဆိုက္ကေတာ့  http://www.bloggertrix.com/ ပါ


1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

Style 1

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8bjH5hYSDuQAn4bj47y2sJObCl_sqCZPto0TFhx26se8D5hGH9N_s5HUz8VRUI6DL6xGfsMA_2Pn_eKbaHBFmERRDm4VCHFgiZMZOOh6fFwswwOZifg_gZjX9axEnQMh_Ecx5wN6P3U/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px;  -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style> 
<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 2

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xe_iShEmLxz7JsGTx9x7hE27Hj4YWc2sIbLELUyiq5Hhq4nypWY8w6f-ZDFF4rmtjBr1u_KcUomq6jSY3Dc48rXhQ9tQvVgTw4Io_SMbpAD8B8RNGC97hFyC_rH92dBMSq8dEl9d6Gc/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px;  -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style> 

<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 3

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
 margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;
 }.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
 }.showpageOf{
 margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
 }.showpagePoint {
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPrR0oTJJrC3Q_PnvFoYXlnVMeKdYdy7pkvELCp7JOJ1SuSnEwqd9b7qxg24MCYCTYfTIMmudUCmb9ofIttz-Zl1tw6NZBtEOZ_nSVqBkjdZdrjwCSKZr5hhcOg55HmcGgeJi3pwnIWk/s1600/darkblue.png) repeat-x;
 margin:0 3px 0 3px;padding:3px 10px;
 line-height:30px;cursor:pointer;white-space:nowrap;
 border:2px solid #5C8CFF;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;
 } </style> 

<a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsIxIsSf3fEeitTFROXODJk3aJqDKUP722qRa_7lUytLAHXUCNYny0Gnsgwh86m_zQsF3-0JA7ZMVG6KTme3gzLLoPJEEP1KqKOzT1IHNGszWEF5VA0grvDABGZ8wG6glYlT5HsAzlC8k/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

7. Now save your HTML/Javascript'.

    You are done...
မူရင္းဆိုက္ကေတာ့ ဒီမွာပါကြယ္..http://www.bloggertrix.com/2012/11/attractive-numbered-page-navigation.html

Read More

အလြယ္ကူဆံုး ဘေလာ့တစ္ခု တည္ေဆာက္ရေအာင္ မိုးေကာင္းကင္ ေဖာင္းျပင္

ကဲဗ်ာ gmail အေကာင့္တစ္ခုရွိသူတိုင္း ဘေလာ့ေလးတစ္ခုတည္ေဆာက္ႏိုင္ရန္အတြက္ ေရးလိုက္ပါတယ္။ မသိ
ေသးသူမ်ား မရွိေသးသူမ်ား စမ္းသပ္တည္ေဆာက္ႏိုင္ရန္အတြက္ပါ။ အက်ဥ္းေလးပါဘဲ ဓါတ္(10)ပံုထဲပါ။ အဲဒါ
ေလးၾကည့္ၿပီး လုပ္ရွားလိုက္ရင္ ဘေလာ့ပိုင္ရွင္တစ္ေယာက္ျဖစ္ပါၿပီ။ စီးပြါးေရးသမားေတြလည္း စိတ္ႀကိဳက္ဘေလာ့ တစ္ခုတည္ေဆာက္ႏိုင္ရန္အတြက္ေပါ့ဗ်ာ။ကဲေျပာေနတာၾကာတယ္ စလိုက္ရေအာင္
ပထမဆံုး www.blogger.com လို႔ Browser မွာရိုက္ထည့္ပါ။ ေအာက္ကပံုေလးေပၚလာပါၿပီ။ မိမိ gmail အေကာင့္
ႏွင့္ Password ကိုျဖည့္လိုက္ပါ။

ကဲ ဒုတိယပံုေလးကို ၾကည့္လိုက္ပါ။

 တတိယပံုေလးကိုၾကည့္ပါ။ လွမင္းမွာ ကိုယ့္နာမည္ေရး hlamin မွာ မိမိထည့္လိုတဲ႔ ဘေလာ့လိပ္စာေပးပါ။ က်ဳပ္ရဲ႕့ hlamin ဟာ www.hlamin.blogspot.com ျဖစ္သြားမွာပါ။ ဒါေၾကာင့္မိမိရဲ့နာမည္ရင္းျဖစ္ျဖစ္ႀကိဳက္ရာေပးပါ။ပံုပါအ
တုိင္း  ၾကည့္ၿပီး လုပ္ရႈားၾကရေအာင္ဗ်ာ။

Create blog ကိုႏွိပ္လိုက္ရင္ ေအာက္ကပံုအတိုင္းျမင္ရမွာပါ။ (1) ျပထားတဲ႔ေနရာေလးကိုႏွိပ္ပါ။ ဒါက Post အသစ္တစ္ခု တင္စမ္းၾကည့္ရေအာင္ ဘေလာ့တည္ေဆာက္တာကၿပီးသြားၿပီ။

 ကဲဗ်ာဒီပံုကေတာ့ New Post ေပါ့ဗ်ာပို႔စ္တစ္ေရးေတာ့မယ္ ေခါင္းစီးေရးရန္ေနရာမွာ မိမိစိတ္ႀကိဳက္ေရးပါ။ ပံုမွာျပထားသည့္အတိုင္း လုပ္စမ္းၾကည့္ပါ။

ပို႔စ္ကိုစိတ္ႀကိဳက္ေရးၿပီးရင္ Publish ႏွိပ္ကာ အတည္ျပဳလိုက္ပါ။ ဒါပို႔စ္တစ္ခုေရးသားျခင္းပါဘဲ။ ဒီလိုဘဲေနာက္ စိတ္ႀကိဳက္ပို႔စ္ေတြ အမ်ားႀကီးေရးသားႏိုင္ပါၿပီ။ မိမိႏွစ္သက္ရာေပါ့ဗ်ာ။ ကဗ်ာ၀ါသနာပါရင္ ကဗ်ာေရးေပါ့။ ဂိမ္း၀ါသနာပါရင္ ဂိမ္းအေၾကာင္းေရးေပါ့ စီးပြါးေရး၀ါသနာပါရင္ စီးပြါးေရး ေရးသားၾကေပါ့။

ကဲဗ်ာ Publish ႏွိပ္ၿပီးသြားရင္ေတာ့ အေပၚပံုကိုၾကည့္ပါ။ ကိုယ္ျပဳျပင္ခ်င္တာေတြကို ကလိႏိုင္ပါၿပီ။

 ကဲဒါကေတာ့ View blog ေပါ့ မိမိေရြးခဲ႔တဲ႔ Template ေနာက္ခံအေရာင္အတိုင္းဘဲ။ မိမိေရးသားခဲ႔တဲ႔ ခ်စ္ေတာ့ခ်စ္
တယ္ဒါေပမယ့္ဆိုတဲ႔ ပို႔စ္ေလးတစ္ခုပါ။ စာသားေတြအမ်ားႀကီးေရးသားလို႔ရပါတယ္။ ဓါတ္ပံုေတြလည္းထည့္လို႔
ရပါတယ္။ ဗြီဒီယိုဖိုင္ေတြလည္းထည့္လို႔ရပါတယ္။ အေပၚမွာ ျပခဲ့တဲ႔ပံုမွာ ပါၿပီးသားေတြပါ။

 ကဲအေပၚပံုကိုၾကည့္ပါ။ ဒါကေတာ့က်ဳပ္ေရးေနက်စတိုင္ဘဲ သူမ်ားေတြေတာ့မိသိဘူး။ Post အသစ္တင္ခ်င္ရင္ အေပၚမွာ ခဲတံေလးလိုပံုပါတယ္ သူ႔ကို ေထာက္ၾကည့္ရင္ New Postလို႔ေတြ႔မယ္ ပို႔္စ္တစ္ခုေရးခ်င္ရင္ အဲဒီကိုႏွိပ္ေပါ့ဗ်ာ။ အေပၚမွာ ျပခဲ႔တဲ႔အတိုင္း ပို႔စ္ေရးသားလို႔ရပါၿပီေနာ္။ ပံုေလးၾကည့္ၿပီးလုပ္ရႈားလိုက္ေတာ့။

 ဒါကေတာ့ Add Gadget ကိုႏွိပ္လုိက္ရင္ ျမင္ရတဲ႔ပံုပါ။ ဒီအထဲမွာ ကိုယ္ႀကိဳက္တာေလးေတြထည့္လို႔ရပါတယ္။ တစ္ခုၿပီးတစ္ခု လုပ္စမ္းၾကည့္ပါ။ ကိုယ္ႀကိဳက္တာေတြ႔ရင္ ေနာက္ဆံုးေတာ့ Save ရံုဘဲေလ။ ဒါနဲ႔ပါတ္သက္လို႔
ေတာ့ အမ်ားႀကီးဘဲ။ က်ဳပ္ရဲ့ဘေလာ့ကိုဘဲၾကည့္လိုက္ပါ။ ညာဘက္ခ်မ္းမွာ ကိုယ္သေဘာက်တာေတြ အမ်ား
ႀကီး ေကာက္ထည့္ထားတာဘဲ။ စမ္းသပ္ပါ စမ္းသပ္မွ ေအာင္ျမင္ပါမည္။ အထူးသျဖင့္ ဒို႔ေဖာင္းျပင္သားမ်ားအ
တြက္ေပါ့ဗ်ာ။ က်ဳပ္တို႔က တိုင္းစြန္ျပည္ဖ်ားကဆိုေတာ့ မလုပ္တတ္ၾကဘူးေလ။ ဒါေၾကာင့္ အေကာင္းဆံုးနဲ႔ အက်ဥ္းဆံုးျဖစ္ေအာင္ ေရးသားလိုက္တာပါ။

ကဲဒါကေတာ့ မိမိဘေလာ့ကို ေဒါင္းေလာ့ခ်တဲ႔ေနရာေလးပါ။ဒီေနရာကိုကေတာ့ Template ကိုႏွိပ္ရင္ေရာက္ပါတယ္။ ဒီေကာင္အသံုးျပဳပံုကေတာ့။ မိမိဘေလာ့တစ္စံုတစ္ရာ အမွားမရွိရေအာင္ ပို႔စ္ေလးငါးခု
တင္ၿပီးတိုင္းလုပ္ထားသင့္တယ္။ တစ္ခုခုမွားသြားရင္ ျပန္ၿပီးေတာ့ သိမ္းဆည္းလို႔ရတာေပါ့ဗ်ာ။ Setting ပိုင္းကိုေတာ့ မေရးေတာ့ဘူးဗ်ာ။ ဒီထက္အက်ယ္ကိုေတာ့ စာအုပ္တင္ေပးပါ့မယ္။ က်ဳပ္ကေတာ့ အဲဒီစာအုပ္
ၾကည့္ၿပီးလုပ္ခဲ႔တာဘဲ ဒါေပမယ့္ စာအုပ္ကၾကာၿပီဆိုေတာ့ မတူတာေတြမ်ားတယ္။ ပံုစံတူေလးေတြပါဘဲ။
ကဲဗ်ာ ဒီေနာက္ဆံုးပံုေလးေနရာမွာ အသံုး၀င္တာေတြ အမ်ားႀကီးပါ။ Template ဒီဇိုင္းခ်ိန္းလိုရင္လည္း ခ်ိန္းလို႔ ရပါတယ္။ Template ဒီဇိုင္းေလးေတြကို www.google.com မွာ ရွာၾကည့္ပါ။ firebox ညာဘက္ခ်မ္းေလးမွာ Template လို႔ရိုက္ထည့္လိုက္တာနဲ႔ က်လာပါလိမ့္မယ္ free ရတဲ႔ Template ေလးေတြကို ရွာၿပီး ေဒါင္းေလာ့ ေဒါင္း
ၿပီးရင္။ Choose file မွာ Upload လုပ္ကာတင္လိုက္ေပါ့။ မတင္ခင္ က်ဳပ္ေရွ႔ကေျပာခဲ့သလို ေဒါင္းထားပါ။ ဒါမွမေကာင္းရင္ ျပန္ျပင္လို႔ရေအာင္ေပါ့ဗ်ာ။
    ကဲဗ်ာ လက္ေတြ႔စမ္းသပ္ျခင္းျဖင့္ အက်ိဳးရွိတဲ႔ လုပ္ငန္းေတြ ေအာင္ျမင္ဖို႔လုပ္ေဆာင္ၾကပါ။ ေက်ာက္သမားေတြ
လည္း ၀က္ဆိုက္ေထာင္ၿပီး။ ေၾကာ္ျငာၾကေပါ့။ ကုမၼဏီ ပိုင္ရွင္ေတြလည္း မိမိတို႔ကိုယ္တိုင္ေရးႏိုင္ရင္လည္း
ေရးေပါ့ဗ်ာ။ ဘယ္သူမဆိုေပါ့ဗ်ာ ကိုယ္၀ါသနာပါတာေရးၾက ေၾကာ္ျငာၾကေပါ့။ လိုအပ္တဲ႔ တန္ဆာပလာေတြလည္း
က်ဳပ္ဆိုက္ထဲမွာထည့္ထားတယ္။ သူမ်ားဆိုက္ေလးေတြကေကာင္းတာ ကုိယ္သေဘာက်တာေလးေတြကို ကူး
ယူၿပီးေတာ့ အားျဖည့္တင္ဆက္ထားတယ္။ သေဘာက်ရင္ယူသံုးၾကေပါ့ဗ်ာ။ ဘေလာ့နဲ႔ပါတ္သက္ရင္ ဘေလာ့ႏွင့္
ပါတ္သက္သမွ်လို႔ က်ဳပ္တင္ထားတာရွိပါတယ္ အဲဒီမွာရွာၾကည့္ပါ။ ေနာက္ၿပီးေကာင္းတဲ႔ဆိုက္ေလး ႏွစ္ခုသံုးခု   ေဖာ္ျပေပးလိုက္ပါ့မယ္။ ဒါကေတာ့ http://kp3family.blogspot.com/  KP 3ဆိုက္ေလးႏွင့္ http://kyawkothein.blogspot.com/ ေက်ာ္ကိုသိန္းဆိုက္ေလးပါ။ ဒီေနရာေတြမွာ ဘေလာ့ႏွင့္ပါတ္သက္လို႔ ေလ့
လာႏိုင္ပါတယ္ဆိုတဲ႔ အေၾကာင္းေျပာၾကားရင္း ဒီေန႔အတြက္ ဒီေလာက္နဲ႔ဘဲ ေက်နပ္ႏွစ္သိမ့္ၾကပါဦးလို႔ ေျပာပါရ
ေစေတာ့ဗ်ာ။ ႀကိဳက္သူမ်ားလည္း ကူးယူသြားႏိုင္သည္ ။ 16.11.2012 အမွတ္တရ။ မိုးေကာင္းကင္မွ ေရးသား
တင္ဆိုက္သည္။ မပ်င္းရင္လည္း အလည္လာၾကပါဦးလို႔ ဒီေနရာကေန ဖိတ္ေခၚလိုက္ပါတယ္။ လိုအပ္တာေလးေတြရွိရင္လည္း အႀကံဥာဏ္ေလး Cbox မွာေရးသားေပးခဲ႔ၾကပါဦးဗ်ာ။ ေစာင့္ေမွ်ာ္ရင္းျဖင့္....
   ကဲဒါကေတာ့ အဆင့္ျမင့္အင္တာနက္အသံုးျပဳနည္းဆိုတဲ႔ စာအုပ္ေလးပါ။  က်ဳပ္ရဲ့ေရးသားခ်က္က အျပည့္အစံု
မဟုတ္ပါဘူး။ ဒါေၾကာင့္ ဒီစာအုပ္ေလးကို ဖတ္ၿပီးလည္း လုပ္ေဆာင္ၾကည့္ၾကပါဦး။ ဒီစာအုပ္လည္း အမွန္ေျပာ
ရရင္ အျပည္စံုဆံုးေတာ့မဟုတ္ပါ။ မိမိတို႔ေလ့လာသင့္တာေတြကို ေလ့လာမွ ျပည့္စံုလာမွာပါ။ ကဲေျပာေနတာၾကာ
တယ္ကြယ္။ ေဒါင္းၿပီးဖတ္ၾကေတာ့ဗ်ာ။ လုပ္သင့္တာကို လုပ္ၾကေပေတာ့။

♣♣♣♣ Download mediafire ♣♣♣♣
ကဲဗ်ာက်ဳပ္တင္ထားတဲ့ပို႔ေလးက ဓါတ္ပံုေလးေတြကိုလည္း စုစည္းၿပီးတင္ေပးလိုက္ပါတယ္။ 
♣♣♣♣ Download mediafire ♣♣♣♣
ဓါတ္ပံုေလးၾကည့္ၿပီး လုပ္ရႈးလို႔ ရေအာင္ေပါ့ဗ်ာ။ လာလည္သည့္အတြက္လည္းေက်းဇူးတင္ပါတယ္ ။ က်ဳပ္ေရးသားတာေလးေတြကို မပ်င္းမရိဖတ္ေပးတဲ႔အတြက္လည္း ေက်းဇူးတင္ပါတယ္ေနာ္...။

Read More

Blog မွာ Cool CSS3 Drop Down Menu ထည့္ျခင္းႏွင့္ စာတန္းေျပးေအာင္လုပ္နည္း

 ကိုေက်ာ္ကိုသိန္းထံမွ ကူးယူတင္ဆက္ထားျခင္းပါ။  မူရင္းဆိုက္သို႔သြားရန္...
ကၽြန္ေတာ္ Cool CSS3 Drop Down Menu  တင္ျပလိုက္ပါတယ္  ပံုေလးကို ႀကည့္လိုက္ပါ ႀကိဳက္တယ္ စိတ္တိုင္းႀက တယ္ အသံုးျပဳခ်င္တယ္ ဆိုရင္ ေတာ့ ေအာက္ေပးထားတဲ ့အတိုင္း ယူျပီးအသံုးျပဳ  ႏိုင္ႀကပါေစ....ေအာက္မွာ ေပးထားတဲ့ code ကို copy ကူးျပီး 
Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

<style> /*------ CSS3 Drop Down Menu By B2W (beautifulbloggerwidgets.blogspot.com)---------*/ #b2w-menu, #b2w-menu ul { margin: 0; padding: 0; list-style: none; } #b2w-menu { width: 100%; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #b2w-menu:before, #b2w-menu:after { content: ""; display: table; } #b2w-menu:after { clear: both; } #b2w-menu { zoom:1; } #b2w-menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #b2w-menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #b2w-menu li:hover > a { color: #fafafa; } *html #b2w-menu li a:hover { /* IE6 only */ color: #fafafa; } #b2w-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #b2w-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #b2w-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #b2w-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #b2w-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #b2w-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #b2w-menu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #b2w-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #b2w-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #b2w-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #b2w-menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #b2w-menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #b2w-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style> <ul id="b2w-menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphic design</a></li> <li><a href="#">Development tools</a></li> <li><a href="#">Web design</a></li> </ul> </li> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="http://beautifulbloggerwidgets.blogspot.com/">Create This »</a></li> </ul>




  ျပီးရင္ Save  လိုက္ပါ ျပီးပါျပီ  ။
မသိေသးတဲ့ မိတ္ေဆြမ်ားအတြက္ျဖစ္ပါတယ္ ။
မိတ္ေဆြမ်ားအားလံုးေပ်ာ္ရႊင္ပါေစ.......


 ======================================================

၁    ။  ကၽြန္ေတာ္ မိတ္ေဆြမ်ားကို  Blog အတြက္ CSS3 Drop Down Menu အေရာင္ႏွစ္မ်ိဳး  တင္ေပးလိုက္ပါတယ္ အသံုးျပဳရတာလည္း လြယ္ကူပါတယ္ အသံုးျပဳခ်င္တဲ့ မိတ္ေဆြမ်ား  ေအာက္မွာေပးထားတဲ့  code  ကို  Copy ကူးျပီး ...

Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။ <style> #mbt-menu, #mbt-menu ul { margin: 0; padding: 0; list-style: none; } #mbt-menu { width: 960px; margin: 60px auto; border: 1px solid #000; background-color: #333; background-image: -moz-linear-gradient(#800000, #333); background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#800000)); background-image: -webkit-linear-gradient(#333, #800000); background-image: -o-linear-gradient(#800000, #999); background-image: -ms-linear-gradient(#333, #800000); background-image: linear-gradient(#800000, #333); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #mbt-menu:before, #mbt-menu:after { content: ""; display: table; } #mbt-menu:after { clear: both; } #mbt-menu { zoom:1; } #mbt-menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #mbt-menu a { float: left; padding: 12px 30px; color: #FFFF00; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #mbt-menu li:hover > a { color: #fff; } *html #mbt-menu li a:hover { /* IE6 only */ color: #000; } #mbt-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; background: -moz-linear-gradient(#800000, #999); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#333, #800000); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #mbt-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mbt-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #mbt-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #mbt-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #mbt-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #mbt-menu ul a:hover { background-color: #fff; background-image: -moz-linear-gradient(#800000, #000); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #mbt-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #mbt-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #mbt-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #mbt-menu ul li:first-child a:hover:after { border-bottom-color: #fff; } #mbt-menu ul ul li:first-child a:hover:after { border-right-color: #fff; border-bottom-color: transparent; } #mbt-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style> <ul id="mbt-menu"> <li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္ </a></li> <li> <a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a> <ul> <li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li> <li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li> <li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li> <li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li> </ul> </li> <li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li> <li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li> <li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li> </ul>


 ျပီးရင္ Save လိုက္ပါ...

================================================================


ကၽြန္ေတာ္ blog မိတ္ေဆြမ်ား အတြက္  textarea ေလးေတြ တင္ျပလိုက္ပါတယ္ textarea ကို အသံုးျပဳျပီး ေရမယ္ ဆိုရင္ေတာ့  Post ေရးတဲ့ အခါမွာ  HTML နဲ ့ေရးရမွာ ျဖစ္ပါတယ္ ေရးျပီးသြားျပီ ဆိုရင္  Compose ျပန္ေျပာင္းျပီ  Publish ႏွိပ္လိုက္ရင္ ရပါျပီ.....

( ပံုစံ ၁ )
 . ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(251, 239, 255); border-color: rgb(202, 61, 217); border-radius: 7px 7px 7px 7px; border-style: solid; border-width: 1px 1px 1px 20px; color: #ca3dd9; height: 32px; line-height: 1.5em; padding: 5px; width: 400px;"> ေရးခ်င္တာေရးပါ   </textarea>


ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.

 (  ပံုစံ ၂ )
ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.

 <textarea cols="20" name="code" rows="3" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 2px inset rgb(204, 204, 204); color: white; line-height: 1.5em; padding: 0pt 7px;"> ေရးခ်င္တာေရးပါ </textarea>



( ပံုစံ ၃ )
  ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


  <textarea cols="20" name="code" rows="3" style="-moz-border-radius: 10px 10px 10px 10px; background: none repeat scroll 0% 0% rgb(191, 250, 255); border-color: rgb(255, 233, 0) rgb(64, 255, 31) rgb(64, 255, 31) rgb(255, 233, 0); border-style: solid; border-width: 4px; color: red; line-height: 1.5em; padding: 5px;"> ေရးခ်င္တာေရးပါ </textarea>


( ပံုစံ ၄ )
  ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

<textarea cols="20" name="code" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% rgb(255, 218, 175); border: 2px ridge rgb(127, 69, 0); color: #7f4500; line-height: 1.5em; padding: 5px;"> ေရးခ်င္တာေရးပါ </textarea> 



( ပံုစံ ၅ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


 <textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(218, 255, 191); border: 2px dashed rgb(41, 95, 0); color: #295f00; line-height: 1.5em; padding: 5px;"> ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.


( ပံုစံ ၆ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


  <textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(239, 0, 144); border: 3px dotted rgb(255, 239, 249); color: #ffeff9; line-height: 1.5em; padding: 5px;">  ေရခ်င္တာေရးပါ </textarea>



( ပံုစံ ၇ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


  <textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(255, 0, 10); color: white; line-height: 1.5em; padding: 5px;"> ေရခ်င္တာေရးပါ  </textarea>


( ပံုစံ ၈ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ 


  <textarea name="code" rows="2" cols="50" style="background:  #EFF5FB; color: #000; border: 1px solid #ccc; border-left: 20px solid  #0174DF; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;">   ေရခ်င္တာေရးပါ  </textarea>


ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.


( ပံုစံ ၉ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ 


<textarea name="code" rows="2" cols="40" style="background:#E0ECF8;  color:#FF0000; border-bottom: 4px solid #FE2E2E; border-right: 4px  solid #01DF01; border-top: 4px solid #01DF01; border-left: 4px solid  #FE2E2E; line-height:1.5em; padding:5px; -moz-border-radius:10px;">  ေရခ်င္တာေရးပါ    </textarea> 


( ပံုစံ ၁၀ )


ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


<textarea name="code" rows="2" cols="42" style="background:  #FAAC58; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em;  padding: 5px;">  ေရခ်င္တာေရးပါ </textarea>  



 ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

( ပံုစံ ၁၁ )


ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

   <textarea name="code" rows="2" cols="42" style="background:#AC58FA;  color:#fff; border:3px double #ffaf; line-height:1.5em;  padding:5px;">  ေရခ်င္တာေရးပါ </textarea> 



ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


( ပံုစံ  ၁၂ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

<textarea style="height: 31px; width: 400px;">  ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

မိတ္ေဆြမ်ားအားလံုးကို ေလးစားလွ်က္.....

မိုးေကာင္းကင္မွ သေဘာက်သျဖင့္ ကူးယူထားျခင္းျဖစ္ပါတယ္။... 
 

Read More