Blog မွာပါတဲ့ ေနာက္ခံပံု ေျပာင္းနည္းနဲ ့ကိုယ္ပိုင္ဒီဇိုင္းပံု ထည့္သြင္းနည္းပါ

ဒီနည္းကေတာ့ မကလိလို ့ မသံုးျဖစ္တာေနမယ္ ဘေလာ့ကို  ေနာက္ခံပံု အမ်ားၾကီး

သူ ့မွာပါတဲ ့ေနာက္ခံ ေျပာင္းခ်င္ေျပာင္း ကိုယ္ပိုင္  ပံုရွိရင္လည္း  ေျပာင္းလို ့ရတယ္

ခ်စ္သူရွိတဲ့သူကေတာ့ ခ်စ္သူေနာက္ခံပံုေလးနဲ ့ဆို ပိုေကာင္း။ေျပာင္းစရာရွိေျပာင္း

ဒီအဆင့္မွာ သံုးတတ္ရင္  ဘေလာ့ကို   စိတ္ၾကိဳက္  အက်ဥ္းအက်ယ္  ဒီဇိုင္းပံုစံကိုမွ

ႏွစ္လိုင္းထားမလား  ေမာင္(စြယ္စံုက်မ္း) စတိုင္ သံုးလိုင္းခြဲမလားဆိုတာေတြလည္း

ျပင္ဆင္ေရးဆြဲႏိုင္ပါတယ္ လိုအပ္လို ့အျမန္ေျပာင္းခ်င္ရင္ ေအာက္ကလင့္ကိုႏွိပ္..။

အျမန္ေရာက္ခ်င္ရင္ ႏွိပ္လိုက္ - http://www.blogger.com/template-Design editor

•  http://www.zwmnna.com

Read More

မိမိတို႕ဘေလာ့ကို PASSWORD ခံထားၾကမလား ( လန္းးထာာာာာာေနာ္ )

 မဂၤလာပါေနာ္....သည္နည္းပညာေလးကေတာ့ အရမ္းကို  ဖလမ္းးးးဖလမ္းးးးထေနတာပါဘဲဗ်ာ...

သူကေတာ့   မိမိတို႕ဘေလာ့ေတြကို  ပါတ္၀ပ္ခံေပးတဲ့နည္းလမ္းေလးတစ္ခုပါ....  အသုံးေတာ့နည္းပါလိမ့္မယ္  ဒါေပမယ့္   ဥပမာ.... မိမိဖြင့္ထားျပီး   ဘယ္သူမွ ၀င္မၾကည့္ေစလိုေသာအခါ

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

ဘာဘဲျဖစ္ျဖစ္  ဗဟုသုတအေနနဲ႕  ျပန္လည္ ေရးသားလုိက္ရျခင္းျဖစ္ပါတယ္....

ေအာက္မွာ ေလ့လာလိုက္ပါေနာ္...

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

  </body>   ဆိုတာေလးကို ရွာလုိက္ပါေနာ္...

ေတြ႕တာနဲ႕ ေအာက္မွာ က်ေနာ္ ေပးထားတဲ့ ကုဒ္ေတြကို သူကအေပၚကေန ကပ္ျပီး ထည့္ေပးလိုက္ပါ။

<script>
var password = 'မိမိထားလိုေသာ ပါတ္၀ပ္ေရးပါ'
password=prompt('Please enter the password to enter this site:','');
if (password != 'ပါတ္၀ပ္ကိုထပ္ေရးေပးပါ ') {
location.href='မိမိဘေလာ့ဆိုဒ္ရဲ႕  လိပ္စာထည့္ပါ'}
</script>

ေအာက္မွာ ပုံေလးေတြနဲ႕ ရွင္းျပလိုက္ပါတယ္ေနာ္....

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

အကယ္လို႕ ျပန္ဖ်က္လိုပါက  </body> 

ကိုျပန္ရွာပါ  သူ႕အေပၚက ထည့္ေပးထားေသာ အေပၚကကုဒ္ေတြကို  ျပန္ဖ်က္လိုက္ပါ  အိုေကေနာ္...

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

www.ledimye.blogspot.com 

www.aungsanmks.com 

www.ninilayy.com

Read More

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

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/AVvXsEi1uNPt372I3XG38kr2nzc44AtTIihbL5XI378vAxLPcAjYTQhErVWUyoo_TvihXjq-HF2Bka1LE0cgxg9IXFv8Vdohrtg67pU6PTYvmvQTiVDZjiOAMLPIPC8BIUwu1CLSzdybM7hTAxM1/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/AVvXsEiKB9KOH3ffnb6PceEImFYnDwztaTdO9v1y5uXCy4kTpG4WWnO6kBy7VhzJuY3bQDVbPpFBgFbwJCyp5owMd6izZB_ysxcOipodwm1RZQDqVfeEkV-8IuD6VBGf9t0nq91qQrg97mSJI1LG/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/AVvXsEhvfB0ILTP_MWmHKK5OfUzH6qVZbhzbmy7HSFMyId35QjrMt7uV6cKMns_B7fjlV2d-7g9s4oCTRF6lEQjS98O31a6ct2E9XRQ9VHaB3jMzXuKh2P0jFIenKmoVcKJFHywZ3qlgJvJ4LTxL/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/AVvXsEiujOk0kGpPHBGVghDtHov4u-ov-ks9aMDiZnqGEarGTbsB8i3lXa9kplg7Xj0A89ugkm4dD5fsezDhKeiowpdKjw_UGkVwQJwnbdJrKdphWmLnHzri8jWYoJR9bnNXcRuvhiAqDhy49DaO/s1600/arrow.png" /> Home</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujOk0kGpPHBGVghDtHov4u-ov-ks9aMDiZnqGEarGTbsB8i3lXa9kplg7Xj0A89ugkm4dD5fsezDhKeiowpdKjw_UGkVwQJwnbdJrKdphWmLnHzri8jWYoJR9bnNXcRuvhiAqDhy49DaO/s1600/arrow.png" />HTML</a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzC8KznIorV4OrfIakVvwGtnhAcCftCFSgQD1CttF5PhII255LFqxLljt6yaYlxIG2ZuJaecY-EzO7XZ9BnUI500VsK0VPwivMit25uJoJRqyjCX_wuQXraUMNPWFrTzKilLVmgJxie1AI/s1600/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 1</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 2</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 3</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 4</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/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/AVvXsEiujOk0kGpPHBGVghDtHov4u-ov-ks9aMDiZnqGEarGTbsB8i3lXa9kplg7Xj0A89ugkm4dD5fsezDhKeiowpdKjw_UGkVwQJwnbdJrKdphWmLnHzri8jWYoJR9bnNXcRuvhiAqDhy49DaO/s1600/arrow.png" />jQuery</a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 6</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 7</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 8</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 9</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3VwhZV_imvlAPuPPrvMXjlED4Nr5a_Wa76fqZXfy71twirpAinrqXVx5BDoZ7VlE5I0w19E7rQXXjVA0idXBTFLeTlSrK2q0z6j80Ztia04X5J-dCnpX5UcfqOKJ4gPlhCcHgJQ4iTlz/s1600/empty.gif" />Link 10</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujOk0kGpPHBGVghDtHov4u-ov-ks9aMDiZnqGEarGTbsB8i3lXa9kplg7Xj0A89ugkm4dD5fsezDhKeiowpdKjw_UGkVwQJwnbdJrKdphWmLnHzri8jWYoJR9bnNXcRuvhiAqDhy49DaO/s1600/arrow.png" />PHP</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujOk0kGpPHBGVghDtHov4u-ov-ks9aMDiZnqGEarGTbsB8i3lXa9kplg7Xj0A89ugkm4dD5fsezDhKeiowpdKjw_UGkVwQJwnbdJrKdphWmLnHzri8jWYoJR9bnNXcRuvhiAqDhy49DaO/s1600/arrow.png" />MySQL</a></li>
                <li><a href="http://www.bloggertrix.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujOk0kGpPHBGVghDtHov4u-ov-ks9aMDiZnqGEarGTbsB8i3lXa9kplg7Xj0A89ugkm4dD5fsezDhKeiowpdKjw_UGkVwQJwnbdJrKdphWmLnHzri8jWYoJR9bnNXcRuvhiAqDhy49DaO/s1600/arrow.png" />XSLT</a></li>
            </ul>

        </div>

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

Read More

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

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

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

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

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

<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/AVvXsEiJa6QhUY230s9fAINY_gZLuXgrDmvAsutWXhWy6ue0sJ4yKi8JIa-azXb01hfrQ6k1sp8vGhyzGvT5MayWzeZcBU65LrTXj80c-LZieg4iJcYrq6IXoXMR4D3UbHH5WdOyoFyoXjtGZebU/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 မွာအသံုးခ်ပါ။ 

Read More

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

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

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

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

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

.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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzR5etkeJAyNpps5o2ZDC4Nd37lO4be4qzRnjUMf41B-eXIfP5vqTukNi-F4aWnJPtuJMYJrvFiDua1CAiBbVQj-_guDp1xo9cEAAmrPJmK5wJ47xUer8-rAWWkJUpNDwyPGQqMaO1Cqy/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 မွာအသံုးခ်ပါ။  

Read More

ဘေလာ့မွာ စာတန္းအေျပးေလးနဲ႕ ေရးၾကမယ္...

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

 ထည့္နည္းကေတာ့....

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

 <marquee direction="left" style="background: none repeat scroll 0% 0% orange;"><span style="color: rgb(255, 255, 0);"><span style="color: rgb(51, 255, 51);"><span style="color: rgb(0, 0, 0);"><span style="color: rgb(255, 255, 102);"><span style="color: rgb(255, 255, 255);"><span style="font-weight: bold;">မိတ္ေဆြတ္ို႕ၾကိဳက္တာေရးပါ </span></marquee>

ေအာက္ကဇယားေလးထဲမွာ ကုဒ္ေတြထည့္ပါ   ေရးလိုေသာစာသားမ်ား အျပည့္စုံ ေရးလိုက္ပါ။

 ျပီးတာနဲ႕  Rich Text ဆိုတာကိုကလစ္လိုက္ပါ။

 

 ေအာက္ကပုံေလးအတိုင္းေတြ႕ျမင္ရပါမယ္... စိတ္ၾကိဳက္ စာလုံးကာလာေလးမ်ား ေျပာင္းလိုက္ပါ။

 မွတ္ခ်က္..။             ။

orange ဆိုတာက ေနာက္ခံကာလာအေရာင္ပါ။  မိမိတို႕ ၾကိဳက္သလို ေျပာင္းလဲ နိဳင္ပါတယ္..
              ဥပမာ ။        ။ white...black..green..yellow  စသျဖင့္ေပါ့..

Read More

ဘေလာ့ မွာ Photo ေတြကို Slide Show Effect နဲ႕ Gadget တစ္ခုထည္႕နည္း

ဘေလာ့ မွာ Photo ေတြကို Slide Show Effect နဲ႕ Gadget တစ္ခုထည္႕နည္း

7:02:00 am  ဘေလာ့ခရီးသည္  No comments

Blogger ညီကိုမ်ားအတြက္ Post မတင္ျဖစ္တာၾကာသြားလို႕ အခု Post အလန္းေလးတစ္ခုမွ်ေ၀ေပးလိုက္

ပါတယ္ဗ်ာ။ မိမိရဲ႕ Blog မွာ ပံုေတြကို Slide Show လုပ္ျပီး Effect ေလးေတြနဲ႕ တင္လို႕ရတဲ႕ Code ေလးတစ္

ခုတင္ေပးလိုက္ပါတယ္ဗ်ာ။ Gadget တစ္ခုအေနနဲ႕ ထားလို႕ရပါတယ္ဗ်ာ။ ေျပာင္းဖုိ႕လိုတဲ႕ Link ေတြ စာ
သားေတြကို ကၽြန္ေတာ္အနီေရာင္နဲ႕ေရးေပးထားပါတယ္ဗ်ာ။

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပီးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 

အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {

 //Speed of the slideshow
 var speed = 5000;
 
 //You have to specify width and height in #slider CSS properties
 //After that, the following script will set the width and height accordingly
 $('#mask-gallery, #gallery li').width($('#slider').width()); 
 $('#gallery').width($('#slider').width() * $('#gallery li').length);
 $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
 
 //Assign a timer, so it will run periodically
 var run = setInterval('newsscoller(0)', speed); 
 
 $('#gallery li:first, #excerpt li:first').addClass('selected');

 //Pause the slidershow with clearInterval
 $('#btn-pause').click(function () {
  clearInterval(run);
  return false;
 });

 //Continue the slideshow with setInterval
 $('#btn-play').click(function () {
  run = setInterval('newsscoller(0)', speed); 
  return false;
 });
 
 //Next Slide by calling the function
 $('#btn-next').click(function () {
  newsscoller(0); 
  return false;
 }); 

 //Previous slide by passing prev=1
 $('#btn-prev').click(function () {
  newsscoller(1); 
  return false;
 }); 
 
 //Mouse over, pause it, on mouse out, resume the slider show
 $('#slider').hover(
 
  function() {
   clearInterval(run);
  }, 
  function() {
   run = setInterval('newsscoller(0)', speed); });});


function newsscoller(prev) {

 //Get the current selected item (with selected class), if none was found, get the first item
 var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
 var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

 //if prev is set to 1 (previous item)
 if (prev) {
  
  //Get previous sibling
  var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
  var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
 
 //if prev is set to 0 (next item)
 } else {
  
  //Get next sibling
  var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
  var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
 }

 //clear the selected class
 $('#excerpt li, #gallery li').removeClass('selected');
 
 //reassign the selected class to current items
 next_image.addClass('selected');
 next_excerpt.addClass('selected');

 //Scroll the items
 $('#mask-gallery').scrollTo(next_image, 800);  
 $('#mask-excerpt').scrollTo(next_excerpt, 800);     }

</script>
<style>

#slider {

 /* You MUST specify the width and height */
 width:660px;
 height:275px;
 position:relative; 
 overflow:hidden;
-moz-box-shadow: 0px  0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
 overflow:hidden; 
}

#gallery {
 list-style:none;
 margin:0;
 padding:0;
 z-index:0;
 width:900px;
 overflow:hidden;
}
 #gallery li {
  float:left;
 }
#mask-excerpt {
 position:absolute; 
 top:0;
 left:0;
 z-index:500;
 width:100px;
 overflow:hidden; 
 }
 
#excerpt {
 filter:alpha(opacity=60);
 -moz-opacity:0.6;  
 -khtml-opacity: 0.6;
 opacity: 0.6;  
 
 list-style:none;
 margin:0;
 padding:0;
 
 z-index:10;
 position:absolute;
 top:0;
 left:0;
 
 width:100px;
 background-color:#000;
 overflow:hidden;
 font-family:arial;
 font-size:14px;
 color:#fff; 
}

 #excerpt li {
  padding:5px;
 }
 
.clear {
 clear:both; 
}
#btn-prev {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 9px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#btn-prev:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#btn-prev:active {
   border-top-color: #238acf;
   background: #238acf;
   }
#btn-next {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 9px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#btn-next:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#btn-next:active {
   border-top-color: #238acf;
   background: #238acf;
   }
</style>
<div id="debug"></div>
<div id="slider">

 <div id="mask-gallery">
 <ul id="gallery">
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
 </ul>
 </div>

 <div id="mask-excerpt">
 <ul id="excerpt">
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li>
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li>
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li>
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li>
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li> </ul>
 </div>

</div>

<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
 <a href="#" id="btn-prev">prev</a> 
 <a href="#" id="btn-next">next</a>
</div>

<div class="clear"></div>

                                      အားလံုးအဆင္ေျပၾကပါေစဗ်ာ။

Read More