Win Htut Tin: Blog နည္းပညာမ်ား

Showing posts with label Blog နည္းပညာမ်ား. Show all posts

Friday, April 12, 2013

Blog မိတ္ေဆြမ်ားအတြက္ Css3 Shadow Style Vertical Menu

9:39 AM

winhtuttin

No comments

Blog သူငယ္ခ်င္းမ်ားအတြက္ Css3 Shadow Style Vertical Menu ေလးတင္ေပးလုိက္
ပါတယ္။

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

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

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

<style>
.btrix_blockmenu{
font: bold 14px Germand;
width: 190px; /* width of menu */
}
.btrix_blockmenu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.btrix_blockmenu ul li{
margin:0;
padding:0;
}
.btrix_blockmenu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btrix_blockmenu ul li a:hover, .btrix_blockmenu ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}
</style>

<div class="btrix_blockmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">About Us</a></li>
<li><a href="(ဒီေနရာမွာကိုယ့္ရဲ႕ URL ကိုထဲ့ေပးပါ)">Contact me</a></li>
</ul>
</div>

<li><a href="#">Home</a></li>
ဥပမာ။ ။ ( # ) ေနရာမွာညႊန္းခ်င္တဲ့ Link ကိုထဲ့ျပီး၊ Home , Tutorials , Category
Download , About Us တို႕ေနရာမွာကိုယ္ညႊန္းခ်င္တဲ့ Title ကိုေျပာင္း
လဲႏိုင္ပါတယ္ခင္ဗ်ာ.........

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

10:12 AM

winhtuttin

No comments

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/AVvXsEh3ZgQFmGp9UmDp6xQJFX2CuYA6qEJMrYoj2d4hLE6HnHqlXoogJ9NxUdsZ5KADV88YvJdd9MTQHBb6V4R2RySm30eGoJqeisSJowJf4IHGFv7L80kYxNVcn5pdBtEmbn5lSd35btJzWJw/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 ကိုေနာက္ထပ္ကူးပီးတပ္တိုးႏိုင္
ပါတယ္ဗ်ာ....

Blog သူငယ္ခ်င္းမ်ားအတြက္ Isometrica ပံုစံ Social Media Widget

2:34 AM

winhtuttin

No comments

Blog သူငယ္ခ်င္းမ်ားအတြက္ Isometrica ပံုစံ Social Media Widget ေလးပါႏွစ္သက္
မဲ့သူငယ္ခ်င္းမ်ားအတြက္အသံုးျပဳႏိုင္ေအာင္တင္ေပးလုိက္ပါတယ္။

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

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

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

<style>
/* Bloggertrix  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="ကိုယ့္ရဲ႕ www.digg.com/ Link ကိုထဲ့ပါ"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5m6alwVH5f1uLlTkpuyTw8brZBZV10MizTmNLdy-8KAA_SSUEradXLIkxb-3kwVLDEaBK__Nehbke0wrZNhfKoU6KmWy-QTz7NcMfNGgVVoNUdf56Vmv9ZKXzwATHYw7sLqBAfse8Ui0/s1600/btrix-small-digg.png" title="Add to Digg" /></a></li>
<li><a href="ကိုယ့္ရဲ႕ www.facebook.com/ Link ကိုထဲ့ပါ"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqW529ytPHpa-ovsOHsjN17hyphenhyphenKobe6jAvCVv-CcyyYJ4htxvmltcEo2_rmsFr4kHDpNoVigz9s-T_fMTQ19F8z4W8aAp7MbhqzfuupS2yTpfU-UiQCglxfG_yToh6vWe9iXJqH3hieYeM/s1600/btrix-small-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="ကိုယ့္ရဲ႕ www.plus.google.com/ Link ကိုထဲ့ပါ"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2COIOPq05hw0eZ_vowZ9X2gVPgbEadyi6AJFvkuS4jRzff9Vkwhpm07FxoN5pX2i-H-LRwCfdw_XG1XUw1JwiSpiqPzFyfHX-QMvecgm6kw25JqOuX4XvTeXIgJtXNB0fo8Scbqe1cyM/s1600/btrix-small-google.png" title="Add to Digg" /></a></li>
<li><a href="ကိုယ့္ရဲ႕ www.twitter/ Link ကိုထဲ့ပါ"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfyv-68watlgxV3fsENNmEMRnAtxbUtqS4KvzWAiW50LP_NN_l1-x7wTP7VAI3CSQfetY5qHTI_zNTRZMp5qNKPscAd3SMJmfO0Q8YQwYHsqO2OqBOVHeOw5WMTTrCA3Xv1d1wLjzcEE/s1600/btrix-small-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="ကိုယ့္ရဲ႕ feeds2.feedburner.com/ link ကိုထဲ့ပါ"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGu_A0Aku62qh9Q-Rqd5_QRxG5oJKuPPb_5U8eTuV6wMuXZrx_W-pfgE8ClrCYggiV2bs0gzMVs_g6LFyLknpHtHanap3JyoW3vrJHBdyL-8fBZ8l8MucxOEINQuDQg7ZApLOBDjQHKjk/s1600/btrix-small-rss.png" title="Add RSS Feed" /></a></li>
</ul>
</center>

Social Media Widget with Search Box

1:28 AM

winhtuttin

No comments

Blog သူငယ္ခ်င္းမ်ားအတြက္ Social Media Widget နဲ႕ Search box အသစ္ေလးပါ
ႏွစ္သက္တဲ့သူငယ္ခ်င္းမ်ားအတြက္ေအာက္မွာ HTML Code နဲ႕နည္းလမ္းေလး
ေလ့လာၾကည့္ေပးပါ။

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

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

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

<style>
#btrixwidget{width:307px;
padding:0 0 5px 0;
border:1px solid black;}

#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanm_J1r3fZQaOSFpxS3NY8_8opX57kSyA7Rgn9ajx5pgHTajjmP0jGmksWJKQkMVbu2DOXXUk04NH3S1eTiY7GDvLrc2bOc1Y06RtPc5F3T-CGIOa3Ytb1ZnPpmKxTu-wcoHCuWLpYRdI/s1600/blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#btrix-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
  
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
  
form#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>

<div id="btrixwidget"><center>
<a href="ကိုယ့္ရဲ႕twitter.com link ကိုထဲ့ပါ" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMDELj5Jdv0PtalzYFe5ALQ8WE1ENHI0jdKS1AOO3Ye70BnIacYVm6gMIh4ZUUuJK0lAThpr8fyIpoZl6zaRolNgtavQEce4_dOiXCY0y5_zEA0Tn4Q7nRv2RXvlLbNLMwrrWVZBvtSU/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249"></a>

<a href="ကိုယ့္ရဲ႕ facebook.com Link ကိုထဲ့ပါ" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv47N974NEkYqHJCElmdGXOHQTsP6pFhSfXf8rEnxH-unDE5ZfGr1DoEWQDW6Puh7admNTGEu8A42VvguvNlrjlrvrW9qK07RK19JSfiFuKCwAIZ6SRAwv1ga7NplHwei8JFu3VGA0jyg/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248"></a>

<a href="ကိုယ့္ရဲ႕feeds.feedburner.com link ကိုထဲ့ပါ" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfNBPraOpke1A34O6tUQl536Bj1W8-odcgqPlWSF-YvAulfdbx8_LP0XIpg87NxuckkdVDBpJovaVuI4wVRC4Uua9TOTbhJXmfwWctxAR20sWzcqfXOLHs-G-rPta5R_wqhnRjRoB_YlA/s1600/btrix-rss.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251"></a>

<a href="ကိုယ့္ရဲ႕ au.linkedin.com link ကိုထဲ့ပါ" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYn_GNfgSYAUxuz2rmx4ZfEDkTfDcL8K5O4LhFKLAr5NcYO2y7BbdOjI19D3YoiXTfbPYDDKnLozHy7MDT5Oyw5aK4p6SCJQW4ZitnnSjpNHmaINVdsbXD2eXwNmsXjsdmEahW2gS-iI/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250"></a>

<div id="btrix-searchbox">
    <form id="btrix-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
</center>
</div>

twitter , facebook , feeds.feedburner , au.linkedin စသည့္ေနရာေတြမွာကိုယ့္ရဲဲ႕
Link ထဲ့လိုက္ပါ။

Blog မိတ္ေဆြမ်ားအတြက္ Rss Subscription Widget

11:06 AM

winhtuttin

No comments

ကိုယ့္ရဲ႕ Blog မွာ " Follow By Email " Widget ကိုအထက္ပါပံုစံအတိုင္းထားလိုပါက
အရင္ဆံုး Blog ကို Log in ၀င္ပါ၊ ပံုမွာျပထားတဲ့အတိုင္း Layout ကိုႏိုိပ္ပါ

Add Gadget ကိုႏိုပ္ျပီး HTML/Javascript ကိုေရြးခ်ယ္ပါ

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

<style>

#socialbox{border:2px solid black;
width:270px;padding: 5px 5px 5px 5px; }

img.beintouch:hover {
    background: none repeat scroll 0 0 #ffbc99;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #ffbc12;
}
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwr-wa9uCR2bi4wWANfwe8RzXtI7IA_JzMMVVvWabrzvs4PpNQywjz3bbzZzbSKYkZZoBIn1lnUlqPXi6RmCb5qkE4gd0yJQuMXIXDwng4edBq8ZFUxPNCRO83dlrW5lMnIwbGvYv8uQ/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 120px;
}
.ebutton {
    background: #D55959;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}
</style>
<br />
<div id="socialbox">
<table align="" cellpadding="1px" cellspacing="0px" style="width: 290pxpx;"><tbody>
<tr><td>
<a href="facebook link ထဲ့ရန္" rel="nofollow" target="_blank"> <img class="beintouch" src="http://i.imgur.com/R5mGwKN.png" /></a></td><td>
<a href="twitter link ထဲ့ရန္" rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/sLQD6km.png" /></a></td><td>
<a href=" pinterest.com link ထဲ့ရန္ " rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/hQCqF3v.png" /></a></td><td>
<a href="https://plus.google.com link ထဲ့ရန္" rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/RB3hk7c.png" /></a></td><td>
<a href="http://feeds.feedburner.com link ထဲ့ရန္" rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/SQ3iiPf.png" /></a><a href="http://bloggertrix.com/"></a></td></tr>
</tbody></table>
<div>
<center>
<b>Post အသစ္မ်ားသင့္ gamilေရာက္လိုပါက</b></center></div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="ဒီေနရာမွာသင့္ရဲ့ feedburner လင့္ကိုထဲ့ပါ" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailtext" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input alt="" class="ebutton" title="" type="submit" value="Subscribe" />
</form>
</div>

အားလံုးအစားထိုးျပီးရင္ Save လိုက္ပါ။အဆင္ေျပၾကပါေစဗ်ာ

Blog မ်ားအတြက္ Ice Cubes Social Widget

11:03 PM

winhtuttin

No comments

Blog မ်ားအတြက္ေရခဲ့ပံုစံ Social Widget ေလးတင္ေပးလိုက္ပါတယ္။
အရင္ဆံုး Blog ကို Log in ၀င္ပါ၊ ပံုမွာျပထားတဲ့အတိုင္း Layout ကိုႏိုိပ္ပါ

Add Gadget ကိုႏိုပ္ျပီး HTML/Javascript ကိုေရြးခ်ယ္ပါ

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

<style>
/* */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="ကိုယ့္www.linkedin.com link ကိုထဲ့ပါ"><img src="http://i.imgur.com/WEp6YRx.png" title="Add to Facebook" /></a></li>
<li><a href="ကိုယ့္www.facebook.com/ link ကိုထဲ့ပါ"><img src="http://i.imgur.com/jeE6f0C.png" title="Add to Facebook" /></a></li>
<li><a href="ကိုယ့္ www.stumbleupon.com link ကိုထဲ့ပါ"><img src="http://i.imgur.com/ZXfGRQm.png" title="Add to Digg" /></a></li>
<li><a href="ကိုယ့္ www.twitter link ကုိထဲ့ပါ"><img src="http://i.imgur.com/IflrlYI.png" title="Add to Twitter" /></a></li>
<li><a href="ကိုယ့္ feeds2.feedburner.com link ကိုထဲ့ပါ"><img src="http://i.imgur.com/O411upW.png" title="Add RSS Feed" /></a></li>
</ul>
</center>

အနက္ေရာင္ Template မ်ားအတြက္ search box

2:06 AM

winhtuttin

No comments

အနက္ေရာင္ Template အတြက္လိုက္ဖက္တဲ့ search box ေလးပါ၊ႏွစ္သက္တဲ့မိတ္ေဆြ
မ်ားအသံုးျပဳႏိုင္ေအာင္တင္ေပးလုိက္ပါတယ္။

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

Edit Html ကိုႏိုပ္ပါ

Ctrl + F အကူအညီနဲ႕ </head> ကိုရွာပါ၊ေတြ႕ျပီဆိုရင္

</head> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။

<style type='text/css'>
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_K0ztel3UNugYruqVlARtc2ypEzfnsAz5B9aqeIbqM5cpAbWfGG3kfUYrc6KIi__CRc_LmnyAfAN_eDS7OIJFb7LgKxwpy9xW-H30Ha-K3D_X_OldazzOCGHsIO_AwENtjndjeuzLk-tR/);
}
#search form {
margin: 0;
padding: 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search p {
margin: 0;
font-size: 85%;
}

#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgofN4aR4HZwFzlj013uu13FCuz2Qpkns2BaplNStphexAdnqFzoJcPDVXqf0QgSUOVFQ97dIYqWI6tBkrKQWljKWSPBJHAka4Pu0PwzxAzqKUuM5XQM04yu0jxjgNYsVy2FU8Pvk5aFeVL/s1600/sform.png) no-repeat;
border:none;
font: normal 100% &quot;Tahoma&quot;, Arial, Helvetica, sans-serif;
color:#C6C6C6;
}

#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZhTeoo3RC4zTAMUewXeAQFb_y6NGMtyq4uaag0JWu-0Lifp86WNjsgwE0_Z9vbGqiQbO4ITY-oiW-Ll8avWv7pGBUCn0KBAXDXqb5rcN7mwHzaPjVCyo8hOR8ec8njJnVt62J4T7qFDf/);
border:none;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}

</style>

ျပီးရင္ Layout ကိုေရြးပါ

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

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

<div id='search'>
<form id="searchform" action="http://Your site /search" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>

အနီေရာင္ျပထားတဲ့ Your site ေနရာမွာကိုယ့္ Blog ရဲ႕ URL Link ကိုအစား
ထိုးေပးလုိက္ပါ။
အဆင္ေျပပါေစဗ်ာ....

Css3 Cycling Slideshow For Blogger

11:59 AM

winhtuttin

No comments

ကိုယ့္ရဲ႕ Blog မွာ ဓါတ္ပံုေတြ/ေၾကာ္ျငာေတြကို Slideshow နဲ႕ေဖၚျပခ်င္တဲ့မိတ္ေဆြ
မ်ားအတြက္တင္ေပးလုိက္ပါတယ္။

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

Edit Html ကိုႏိုပ္ပါ

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

]]></b:skin> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။

/* fade slider www.bloggertrix.com*/
.content h1 {
 font-size:48px;
 color:#000;
 text-shadow:0px 1px 1px #f4f4f4;
 text-align:center;
 padding:60px 0 30px; 
}

/* LAYOUT */
.container {
 margin:0 auto;
 overflow:hidden;
 width:960px;
}

/* CONTENT SLIDER */
#content-slider {
 width:100%;
 height:360px;
 margin:10px auto 0;
}
/* SLIDER */
#slider {
 background:#000;
 border:5px solid #eaeaea;
 box-shadow:1px 1px 5px rgba(0,0,0,0.7);
 height:320px;
 width:680px;
 margin:40px auto 0;
 overflow:visible;
 position:relative;
}
#mask {
 overflow:hidden;
 height:320px;
}
#slider ul {
 margin:0;
 padding:0;
 position:relative;
}
#slider li {
 width:680px;
 height:320px;
 position:absolute;
 top:-325px;
 list-style:none;
}

#slider li.firstanimation {
 -moz-animation:cycle 25s linear infinite; 
 -webkit-animation:cycle 25s linear infinite;  
}
#slider li.secondanimation {
 -moz-animation:cycletwo 25s linear infinite;
 -webkit-animation:cycletwo 25s linear infinite;  
}
#slider li.thirdanimation {
 -moz-animation:cyclethree 25s linear infinite;
 -webkit-animation:cyclethree 25s linear infinite;  
}
#slider li.fourthanimation {
 -moz-animation:cyclefour 25s linear infinite;
 -webkit-animation:cyclefour 25s linear infinite;  
}
#slider li.fifthanimation {
 -moz-animation:cyclefive 25s linear infinite;
 -webkit-animation:cyclefive 25s linear infinite;  
}

#slider .tooltip {
 background:rgba(0,0,0,0.7);
 width:300px;
 height:60px;
 position:relative;
 bottom:75px;
 left:-320px;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out;  
}
#slider .tooltip h1 {
 color:#fff;
 font-size:24px;
 font-weight:300;
 line-height:60px;
 padding:0 0 0 20px;
}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
 left:0px;
}
#slider:hover li, 
#slider:hover .progress-bar {
 -moz-animation-play-state:paused;
 -webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar { 
 position:relative;
 top:-5px;
 width:680px; 
 height:5px;
 background:#000;
 -moz-animation:fullexpand 25s ease-out infinite;
 -webkit-animation:fullexpand 25s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; } 
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:325px; opacity:0; z-index:0; } 
 21% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-moz-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; } 
 60% { top:325px; opacity:0; z-index:0; }
 61% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:325px; opacity:0; z-index:0; }
 21% { top:-325px; opacity:0; z-index:-1; }
 50% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-webkit-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; }  
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; z-index:0; } 
 60% { top:325px; opacity:0; z-index:0; } 
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}

ျပီးရင္ Layout ကိုေရြးပါ

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

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

<div class="container">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFQ55VEtVF4iAl_H8T5ZXmxB2-6tSj3QRriDW5QmnrQGHUfTJGkpDYyuLl5nvR5Jtnz4D7oj2FZMkwfovdJdRnNH5FORsExZ8by2zCt7oQ6UEjPVnBsNpVT7ww3VSdKYulgjoYaeBzujV/s1600/green.jpg" alt="Green"/>
            </a>
            <div class="tooltip">
            <h1>Green</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR-peFTUHRnm1dBu8b2Fr277hUCHevKf3j9RubIgpACdkDdKWNbulp-Q4gMEc7Xy5ZqdjKwj_x4MpC6rjMKtnqT26PD26ApNvC_lpamnVo9PSHken8jx77RMrT6FA36cZ0TeRREIZnye_w/s1600/wallpapers-1.jpg" alt="Car"/>
            </a>
            <div class="tooltip">
            <h1>Car</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWsx3n8wJGn5FXR9oTf3U9EBsmxtuSB5OBOKfeES_bfb_4kYyMCeIoUgwTJS-Ws0SJj3NzEjn9vnVVfawioiMjr2lCiag3Ju6W2iIDHuR5OCaWKNTHUGPAn4WVRCIXUGckx3_NGvrFLby/s1600/nature2.jpg" alt="Nature"/>
            </a>
            <div class="tooltip">
            <h1>Nature</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibqTXPU6M1S57WGu0CTz8fyhk9atV9iWHk7kHjSWYLKOirIQUpRJGCsGh1duUfq-EHLoOSwyBA2nimx1ZgVDvdNxeHw1SqR2ov0LsOjr_08aNdyb4sHajR-GveTc-42HTh3Qg3y-BfNFXu/s1600/nature.jpg" alt="Nature"/>
            </a>
            <div class="tooltip">
            <h1>Nsture</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW263peys9JR7Q9uP7Gue00mYz453nQ9gnQgH1TBpGn37JG6aq_SsRv6wIBppmJZz2BN2xSSaF5xhPp-aDM-ilCBwO3tJ24uJ6K9bG-jJvV8Bu1eYsUbjj9jLAjT6Hi0lSmju0Mq1HFE1l/s1600/nature3.jpg" alt="Yellow"/>
            </a>
            <div class="tooltip">
            <h1>Yellow</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW263peys9JR7Q9uP7Gue00mYz453nQ9gnQgH1TBpGn37JG6aq_SsRv6wIBppmJZz2BN2xSSaF5xhPp-aDM-ilCBwO3tJ24uJ6K9bG-jJvV8Bu1eYsUbjj9jLAjT6Hi0lSmju0Mq1HFE1l/s1600/nature3.jpg ဒီလိုဓါတ္ပံု Link ေတြေနရာမွာကိုယ့္ရဲ႕ဓါတ္ပံု Link ကိုအစားထားေပးလိုက္ပါ။
အဆင္ေျပပါေစဗ်ာ....

Blog မ်ားအတြက္ Animated Drop Down Vertical Menu Bar

11:29 PM

winhtuttin

No comments

Blog မ်ားအတြက္ Vertical menu bar အသစ္ေလးတင္ေပးလိုက္ပါတယ္။ဒီ menu
bar ေလးက Title ကို pointer နဲ႕ထိတာနဲ႕ link ေလးေတြေအာက္ကိုဆင္းလာမွာပါ။
ႏွစ္သက္သူမ်ားအသံုးျပဳႏိုင္ေအာင္တင္ေပးလုိက္ပါတယ္။

အရင္ဆံုး Blog ထဲ့ကို Log in ၀င္ပါ။ပံုမွာျပထားတဲ့အတိုင္း Template ကိုႏိုပ္ေပးပါ။

Edit HTML ကိုႏိုပ္ျပီး Ctrl + F အကူအညီနဲ႕ ]]></b:skin> ကိုရွာပါ၊ေတြ႕ျပီဆို
ရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္ပါ Code ေတြကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။

/* The CSS Code for the menu starts here bloggertrix.com */
.container {
    background: url("../images/robot.png") no-repeat scroll 90px 35px rgba(255, 255, 255, 0.6);
    border: 1px solid #FFFFFF;
    height:400px;
    margin:20px auto;
    padding:10px;
    position:relative;
    width:715px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#nav {
    border:3px solid #3e4547;

    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWkkSwm8CJITbUL7ttK6s9xZE_yv6vYnzkOb9MGjMQNbBv62foIzwg7AQFSPzC5ycjOU4TN6OmamDaINIH-MqljQjTI3HkNwA8saZF9yoYFNGOQB9W_8uPKU0rF-o-7NDZhYc32bwF4oN/s1600/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsH3qwn1ZZp7sLP0rJmSrKc9aM9_HuRg9HdtPmgTerUpHQjL2CA2UVjlL39uMfmSJbWzeCnF1Pk7Ui7zf3sQbiRriDE1yc1agWUXZkgNZAo0H910X48WOhDEuxM6hyphenhyphen_E-6o3mxEfZaD1Sh/s1600/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipoaQzd6z2sqxK4hYxRDAnAVb7uI35IomWxoxIT7MKZCzpRTTjeuaOFMV7bQ-HVX7JOXSCFvdB624ZpSDBIMQhWVibwBYrgCCq2d4Gjn6W7aiwRmI32R7ydumT_Z-ir37xizT7WXWBXygA/s1600/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;
    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover li {
    margin-top:0;
}

ပံုမွာျပထားတဲ့အတိုင္း Layout ကိုႏိုိပ္ပါ

Add Gadget ကိုႏိုပ္ျပီး HTML/Javascript ကိုေရြးခ်ယ္ပါ

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

<div class="container">

            <ul id="nav">
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9185d-VXxRHn91NwCCHL4WsuZxonjoewEq_40XLZTkXeWnmVooUNNbrhfkndLfBf6b6L0SLoknrmwAG5aZNlY_1fKO8Yu4CLK70fisyOpVJM4wiChrlNSP3tUpLLzMbWQdK7WT8HAdVNY/s1600/arrow.png" /> Home</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9185d-VXxRHn91NwCCHL4WsuZxonjoewEq_40XLZTkXeWnmVooUNNbrhfkndLfBf6b6L0SLoknrmwAG5aZNlY_1fKO8Yu4CLK70fisyOpVJM4wiChrlNSP3tUpLLzMbWQdK7WT8HAdVNY/s1600/arrow.png" />HTML</a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvu5Fbd7z7mguFR2nTBhmyoIPH1gLKM7O21JJD96NUQ9-PoOQYHGoLx8dPxrFfzfjgI7RRod76CHz986tsH8MzsfVoaY_RNx9cP3yp_2eudh3QsUdpktFruCvsSCeYN3V1BbfoE1v1hck/s1600/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 1</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 2</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 3</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 4</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 5</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9185d-VXxRHn91NwCCHL4WsuZxonjoewEq_40XLZTkXeWnmVooUNNbrhfkndLfBf6b6L0SLoknrmwAG5aZNlY_1fKO8Yu4CLK70fisyOpVJM4wiChrlNSP3tUpLLzMbWQdK7WT8HAdVNY/s1600/arrow.png" />jQuery</a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 6</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 7</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 8</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 9</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVckDz5shwCoUnkwMYdUriIrfDFlutXR73atjr-ivWMvUdgiUOuXMbqh1zavL59CL_cFPDsAl_I8med1O5I6uBVc-hrKdxz9yx2xTJNLrACAKYZEDU-qhSuoik6g8k1wf-2qymsriaUhdH/s1600/empty.gif" />Link 10</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9185d-VXxRHn91NwCCHL4WsuZxonjoewEq_40XLZTkXeWnmVooUNNbrhfkndLfBf6b6L0SLoknrmwAG5aZNlY_1fKO8Yu4CLK70fisyOpVJM4wiChrlNSP3tUpLLzMbWQdK7WT8HAdVNY/s1600/arrow.png" />PHP</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9185d-VXxRHn91NwCCHL4WsuZxonjoewEq_40XLZTkXeWnmVooUNNbrhfkndLfBf6b6L0SLoknrmwAG5aZNlY_1fKO8Yu4CLK70fisyOpVJM4wiChrlNSP3tUpLLzMbWQdK7WT8HAdVNY/s1600/arrow.png" />MySQL</a></li>
                <li><a href="http://www.bloggertrix.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9185d-VXxRHn91NwCCHL4WsuZxonjoewEq_40XLZTkXeWnmVooUNNbrhfkndLfBf6b6L0SLoknrmwAG5aZNlY_1fKO8Yu4CLK70fisyOpVJM4wiChrlNSP3tUpLLzMbWQdK7WT8HAdVNY/s1600/arrow.png" />XSLT</a></li>
            </ul>

        </div>

Title ေတြေျပာင္းလဲႏိုင္ျပီး " # " ေနရာေတြမွာႏွစ္သက္ရာ Link ေတြအစားထိုးေပးလုိက္ပါ။

8:59 AM

winhtuttin

No comments

Blog မ်ားအတြက္ Social Media Widget အသစ္ေလးတင္ေပးလိုက္ပါတယ္။ Icon
ေလးေတြကို Pointer နဲ႕ထိလိုက္တာနဲ႕လည္သြားတဲ့ Widget ေလးပါ။ျပဳလုပ္ရတာ
လြယ္ကူျပီးကိုယ့္ရဲ႕ facebook, twitter, stumbleupon, feedburner ေတြရဲ႕ Link ေတြ
ကိုညြန္းေပးမွာပါ။ျပဳလုပ္နည္းေလးေအာက္မွာၾကည့္ေပးပါ။

အရင္ဆံုး Blog ကို Log in ၀င္ပါ၊ ပံုမွာျပထားတဲ့အတိုင္း Layout ကိုႏိုိပ္ပါ

Add Gadget ကိုႏိုပ္ျပီး HTML/Javascript ကိုေရြးခ်ယ္ပါ

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

<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} 
p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
p#socialicons1 img {    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}
p#socialicons1 img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} 
p#socialicons2 img {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;} 
p#socialicons2 img:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);}</style>

<center><p id="socialicons">    
<a href="http://www.facebook.com/winhtuttin" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCrcHWKRj1qoQX7uNb1f7cPyvma9dyc5YZQwOQnAh-3Pe8UaLb41veYapgVgThQW3cQ_UWi00JbX5J8B5z7mQaPkDIOdDc51YE8G0I52n4znaHg4EWnxAlmcj_9njmW_0jfJwpaWt-I-eG/s1600/bloggertrix-facebook.png" /></a>    
<a href="http://www.twitter.com/winhtuttin" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvGCohW0dE6dUCnnVI7vFM0K8BbI2n3dyV95qTyMxOVUSIEhHnkNt9GfOxXIiC1F8cc9FCX8A4qyQhWgxWAuEyP7Y_c57QvIjjtfPJbSKCFlFg9db42PzeETUFOjbkCihl2dv3RNqakzbt/s1600/bloggertrix-twitter.png" /></a>    
<a href="https://www.stumbleupon.com/winhtuttin" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwJmBWsrC5DnzbgyGrnB6EPLkw0VA73Vokx3L-c4XMsnqM2g-1PKpx7ei85dgRvCGYS7j-QyMCmH0_13WJOq4Xu6_37FY47_bf0g887FvNB-TzOECXfxK5Frv92rSqqUU96hJ22iME59jp/s1600/bloggertrix-stumbleupon.png" /></a>    
<a href="http://feeds.feedburner.com/winhtuttin/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcVRMa2N04YeS9_TdP6rpCOMBw9kimjlG0ZKyhXjCJvjlzF99PWaPtGwbMS-93NnWkEhiR871mCkHXmLTEYV9wgc_dECoQwvTCdMImsmUTUBMt1q66qNud2d0ZYOGM0tP33idqwQPRKn9/s1600/bloggertrix-rss.png" /></a></p></center>

Colour နဲ႕ျပထားတဲ့ Link ေနရာမွာကိုယ့္ရဲ႕ Link ကိုအစားေပးလိုက္ပါ။ ဥပမာ
http://www.facebook.com/winhtuttin ဆိုတဲ့ link တစ္ခုလံုးကိုကိုယ့္ရဲ႕ Link နဲ႕
အစားထားေပးပါ။

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

12:36 PM

winhtuttin

No comments

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

Edit Html ကိုႏိုပ္ပါ

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

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

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

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

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

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

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

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

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

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

Blog မွာ Facebook like box slidedoor ထဲ့နည္း

11:07 AM

winhtuttin

1 comment

ကိုယ့္ရဲ႕ Blog မွာ Facebook like box ေလးကို Slidedoor ေလးနဲ႕ထဲ့နည္းေလးပါ။
နည္းလမ္းေလးကိုေအာက္မွာၾကည့္ေပးပါ။
အရင္ဆံုးကိုယ့္ရဲ႕ Blog ထဲ့သို Log in ၀င္ပါ၊ေအာက္ပါပံုအတိုင္း Template ကိုႏိုပ္
ပါ

Edit Html ကိုႏိုပ္ပါ

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

<script type='text/javascript'>

jQuery(document).ready (

function(){jQuery(&quot;#facebook_right&quot;).hover(function(){
 jQuery(this).stop(true,false).animate({right: 0}, 500); },

function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -249}, 500); }); 

});

</script>

ျပီးရင္ Layout ကိုေရြးပါ

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

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

<style>
img, a { border: 0; }#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:245px;height: 310px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 290px;position: fixed;right: -249px;}
#facebook_right img {position: absolute;top: 70px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
</style><div id="on"><div id="facebook_right" style="top: 30%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZcgAbgno-DP2q8eGkufj57VhQSTJ8G3xcbW-HYWjxDNvGD0a9CKBbH5_WvtP19lfXpTtpzIpzgy_I68rynJMpXCbyyUrGpX4cJyLaBDojH0f1HRWQ-SQBvqFqFFtQBGqqoAUQH70bwfA/s1600/FB.png" />

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Trix%2F110888928990749&amp;
width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true">
</iframe>

<a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href=""></a></div></div></div>

အနီေရာင္ျပထားတဲ့ေနရာမွာကိုယ့္ရဲ႕ fan page link ကိုထဲ့ရမွာပါေအာက္မွာဆက္ၾကည့္ပါ အရင္ဆံုး

ျပီးရင္ကိုယ့္ရဲ႕ fan page link ကိုပံုမွာျပထားတဲ့ေနရာမွာကူးထဲ့ျပီး Get Code ႏိုပ္ပါ။

IFRAME ကိုႏိုပ္ျပီးေအာက္ပါ Code မ်ားကိုအနီေရာင္ျပထားတဲ့ Code မွာအစားထိုး
ေပးရမွာျဖစ္ပါတယ္၊ျပီးရင္ Save ပါအဆင္ေျပသြားပါလိမ့္မယ္ဗ်ာ....

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

Win Htut Tin

Latest Posts

အေၾကာင္းအရာမ်ား

Friday, April 12, 2013

Blog မိတ္ေဆြမ်ားအတြက္ Css3 Shadow Style Vertical Menu

Thursday, April 11, 2013

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

Monday, April 8, 2013

Blog သူငယ္ခ်င္းမ်ားအတြက္ Isometrica ပံုစံ Social Media Widget

Sunday, March 31, 2013

Social Media Widget with Search Box

Wednesday, February 13, 2013

Blog မိတ္ေဆြမ်ားအတြက္ Rss Subscription Widget

Tuesday, January 29, 2013

Blog မ်ားအတြက္ Ice Cubes Social Widget

Friday, January 18, 2013

အနက္ေရာင္ Template မ်ားအတြက္ search box

Wednesday, January 16, 2013

Css3 Cycling Slideshow For Blogger

Tuesday, January 15, 2013

Blog မ်ားအတြက္ Animated Drop Down Vertical Menu Bar

Blog မ်ားအတြက္ New Social Media Widget

Saturday, January 12, 2013

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

Friday, January 11, 2013

Blog မွာ Facebook like box slidedoor ထဲ့နည္း

Win Htut Tin Blog.apk

လစဥ္တင္ေသာ post မ်ား

Follow by Facebook

Latest internet apps download ရယူရန္

For Window 7 (32 Bit)

For Window Xp (32 bit)

blog သူငယ္ခ်င္းမ်ား

Followers

အခက္အခဲ့မ်ားတိုင္ပင္ရန္

Now Online