Showing posts with label Html. Show all posts
Showing posts with label Html. Show all posts

Sunday, 4 March 2012

ပတ္လမ္းေၾကာင္း

File လမ္းေၾကာင္းေတြကို တခ်ဳိ႕ေတြက HTML ေတြေလ့လာရင္း ရႈပ္ျပီး နားမလည္တာေတြရိွတယ္...

ဒါေၾကာင့္ ဒီမွာ ထပ္ရွင္းျပပါမယ္..

img/image.jpgအဲဒါကို index.html မွာေရးထားတာဆိုပါဆို႕...

အဲဒီ သေဘာက index.html နဲ႕ img folder နဲ႕က same root ပါ...

ဒါေၾကာင့္ img/image.jpg ဆိုျပီး တဆင့္ေခၚရတာ..

imageindex.jpg

ဒါဆိုရင္ေတာ့ index.html နဲ႕ image.jpg က same root ထဲမွာရိွတယ္လို႕ဆိုလိုပါတယ္..

../imageindex.jpg

index.html က image ဆိုတဲ့ Folder ေအာက္မွာရိွတယ္ဆိုပါဆို႕...သူက ေခၚခ်င္တာက အျပင္တဆင့္ထြက္မယ္..

အျပင္တဆင့္က imageindex.jpg ကို ေခၚမယ္လို႕ဆိုလိုတာပါ...

../../ ဆိုရင္ေတာ့ up level ႏွစ္ခါလုပ္သြားတာေပါ့..

../img/im1.jpg ဆိုရင္ေတာ့ uplevel တစ္ခါလုပ္မယ္... ျပီးရင္ img folder ေအာက္က im1.jpg ဆိုတဲ့

ပံုကို ယူမယ္ဆိုတဲ့ သေဘာပါ..

PHP Code:

<html>

<head>

<style>

.mypadding

{

padding:15px;

border:1px solid #000000;

}

.mymargin

{

margin:15px;

border:1px solid #000000;

}

.normal

{

border:1px solid #FF0000;

}

</style>

</head>

<body>

<div class="normal">

Normal text

<div class="normal">

This is normal div

</div>

</div>

<br>

<div class="normal">

Normal text

<div class="mypadding">

This is padding div

</div>

</div>

<br>

<div class="normal">

Normal text

<div class="mymargin">

This is mymargin div

</div>

</div>

</body>

</html>

padding ဆိုတာ ကေတာ့ အတြင္းအကြာအေ၀းပါ။ေဘာင္နဲ႕ စာနဲ႕ အကြာအေ၀းေပါ့....margin ကေတာ့ အျပင္နဲ႕ ေဘာင္အကြာအေ၀းပါ...အထက္ပါ code မွာဆိုရင္ normal ကေတာ့ ပံုမွန္ပါပဲ..normal ထဲမွာ normal ထည့္ထားလို႕... border က ထူသလိုျဖစ္သြားတာပါ..ေနာက္တစ္ခုကေတာ့ normalအထဲမွာ padding class ကိုထည့္ထားတယ္...

border အနက္ထဲက စာက border နဲ႕ ေ၀းေနတာကို ေတြ႕ရပါမယ္...ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ padding သံုးထားလို႕ပါ..ေနာက္တစ္ခုကေတာ့ normal အထဲမွာ margin class ကိုထည့္ထားတယ္...

border ႏွစ္ခုက ေ၀းေနတာကို ေတြ႕ရပါမယ္...ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ margin သံုးထားလို႕ပါ..

မိမိစိတ္ၾကိဳက္padding-bottom, padding-top, padding-left, padding-right စတာေတြရိွပါတယ္...

margin လည္းအဲလိုေတြရိွပါတယ္..padding တစ္ခုတည္းကေတာ့ အကုန္လံုးကို ျခံဳေျပာတာပါ...

ဒါမွ မဟုတ္padding: 1px 5px 0px 10px;အ ဲဒါကေတာ့ top 1px right 5px bottom 0px left 10px လို႕ဆိုတာပါ...

margin လည္း အ ဲဒီလို သံုးႏိုင္ပါတယ္...



Finish

ဘာေတြက်န္ေသးလဲေတာ့ မသိဘူး....

ကုန္သေလာက္ေတာ့ ရိွသြားျပီ...

က်န္ေနေသးတာ...

မသိတာေလးေတြ ေမးႏိုင္ပါတယ္ဗ်ာ...

by Saturngod၏ PDFမွ က်ေနာ္သူငယ္ခ်င္းမ်ားအတြက္ ဗဟုသုတအလို႕ငွာျပန္လည္းေဖာ္ျပလိုက္ပါသည္.............
မူရင္းPDF ဖိုင္းကိုေဒါင္လိုလွ်င္....ေအာက္ပါလခ့္မွာ ေဒါင္ႏိုင္ပါတယ္.....

http://www.mediafire.com/?znjmdeh3zkd 

Saturday, 4 February 2012

How to Add your Blog Open Curtrin

မိမိတို ့ဘေလာ့မွာ လိုက္ကာ အဖြင့္ အပိတ္ေလး တပ္ခ်င္ၾကရင္ေတာ့ ေအာက္မွာပါ .. လိုက္လုပ္ၾကည့္လို္က္ပါ..
Design > Edit Html > ကိုဝင္ပါ ၿပီးရင္ ကုဒ္ေတြထဲက <head> သို ့မဟုတ္ </head> ကိုရွာပါ.. ၿပီးရင္
<head> ရဲ႕ ေအာက္ </head> ရဲ႕ အေပၚမွာေပါ့ သူတို ့၂ ခုရဲ႕ အတြင္းျဖစ္ရင္ ရပါၿပီ..အဲ့မွာ ေအာက္က ကုဒ္ကို ထည့္ပါ..
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/><script src='http://joomlamyanmar.net/c1/jquery.easing.1.3.js' type='text/javascript'/>   <script type='text/javascript'>  $(document).ready(function() {     $curtainopen = false;     $(".rope").click(function(){    $(this).blur();    if ($curtainopen == false){      $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});      $(".leftcurtain").stop().animate({width:'60px'}, 2000 );     $(".rightcurtain").stop().animate({width:'60px'},2000 );     $curtainopen = true;    }else{     $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});      $(".leftcurtain").stop().animate({width:'50%'}, 2000 );     $(".rightcurtain").stop().animate({width:'51%'}, 2000 );     $curtainopen = false;    }    return false;   });     });  </script>
အေပၚကကုဒ္ေတြထဲကမွ က်ေနာ္ အျပာေရာင္နဲ ့ျပထားတဲ့ေနရာေတြမွာ စိတ္ႀကိဳက္ ျပင္ဆင္ႏို္င္ပါတယ္
' ေလးတခုကစ က်န္ခဲ့လို ့မရပါဘူး ဂရုစိုက္ပါေနာ္.. ၿပီးၿပီဆိုရင္ေတာ့ ေနာ္ကတဆင့္အေနနဲ ့ Css ထည့္ပါမယ္
<body> ကိုရွာပါ ၿပီးရင္ အဲ့ေအာက္မွာ ထည့္ပါမယ္ ပံုထဲက အတိုင္းေပါ့ လြတ္တဲ့ၾကားတေနရာရာမွာ ထည့္ပါ

Curtrin on blogger

ၿပီးရင္ေတာ့ ေအာက္က ကုဒ္ကို ထည့္ပါဗ်ာ..

/***************** Curtrin        **********************/ 
.leftcurtain{   width: 50%;   height: 100%;   top: 0px;   left: 0px;   position: fixed;   z-index: 10002;  }   .rightcurtain{   width: 51%;   height: 100%;   right: 0px;   top: 0px;   position: fixed;   z-index: 1003;  }  .rightcurtain img, .leftcurtain img{   width: 100%;   height: 100%;   z-index: 100000;  }  .rope{   position: fixed;   top: -40px;   left: 90%;   z-index: 1004;  }

ဒါဆိုရင္ေတာ့ မၿပီးေသးပါဘူးဗ်ာ တဆင့္က်န္ပါေသးတယ္.. အဲ့တာကေတာ့
Design > Page Elements > HTML/Javascript 
ကိုယူပါ ၿပီးရင္ ေအာက္က ကုဒ္ေလးကို ထည့္ၿပီး သိမ္းလိုက္ေတာ့ဗ်ာ ၿပီးပါၿပီ..
<div class="leftcurtain"><img src="http://joomlamyanmar.net/c1/images/frontcurtain.jpg"></div><div class="rightcurtain"><img src="http://joomlamyanmar.net/c1/images/frontcurtain.jpg"></div><a class="rope" href="#">  <img src="http://joomlamyanmar.net/c1/images/rope.png"> </a>
 အဲ က်န္ေသးတယ္..
အခုလို ထည့္ရင္ Html/Javascript ေဘာက္ကိုယူၿပီးထည့္တဲ့အခါ ေခါင္းစဥ္မတတ္ပါနဲ ့ေခါင္းစဥ္တတ္လိုက္ရင္
သူ ့ကိုထည့္ထားမွန္းသိသာတယ္ ၿပီးေတာ့ Widgets ရဲ႕ Header ကေပၚေနေတာ့ ၾကည့္မလွေတာ့ဘုူးေပါ့..
အဆင္ေျပၾကပါေစ..အားလံုးၿပီးၿပီဆိုရင္ေတာ့ ေအာက္ကလို ရၿပီေပါ့ေနာ္..

How to Add Facebook Like Buttom

မိမိတင္သမွ် ပို ့ေတြတိုင္းရဲ႕ ေအာက္ေျခမွာ Facebook Like Buttom , ေလးထည့္ခ်င္ၾကရင္ျဖင့္ ...
ေအာက္မွာ က်ေနာ္ျပထားေပးပါတယ္..
အရင္ဆံုး Design > Edit HTML > Edit Template > Expand Widget Templates (ကိုကလစ္ေပးထားလိုက္ပါ)
ၿပီးရင္ေတာ့ HTML ထဲက မိမိသိလိုေသာ code ကိုရွာဖို့အတြက္ Ctrl+F ကိုနိပ္ေပးလိုက္ၿပီးေအာက္က အကြက္ထဲမွာ </head> ဆိုတာကိုရွာလိုက္ပါ။ၿပီးရင္ ေအာက္က ကုဒ္ေလးကို ထည့္ပါ..
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript">
</script>
 ၿပီးၿပီဆိုရင္ ေနာ္ကတဆင့္သြားပါမယ္.. <data:post.body/> အဲ့ဒါကို ျပန္ရွာေပးပါ။ ေတြ႕ရင္ေတာ့ <data:post.body/> ရဲ့ေအာက္မွာ ေအာက္က code ေတြကိုယူထည့္ေပးရပါမယ္။ ဒီေနရာမွာေျပာစရာ
ရွိပါတယ္ တခ်ိဳ႕က Template ေတြ ေျပာင္းထားရင္ ရွာရခက္ေနမယ္ အဲ့ေတာ့ <div class='post-share-buttons'> ဆိုတာကို ရွာလိုက္ပါ ဒါမွမဟုတ္  <div style='clear: both;'/> ေတြ ့ၿပီဆိုရင္ ေအာက္ကပံုကို
ၾကည့္ပါ အဲ့တိုင္ေလး ေပးထားတဲ့ကုဒ္ကို ထည့္လိုက္ပါ.. 

ကုဒ္ကေတာ့ ေအာက္ကဟာေလးပါ ကူးထည့္လိုက္ေပ့ါေနာ္..
<div>
<fb:like action="like" colorscheme="light" font="verdana" href="data:post.url" layout="standard" send="true" show_faces="false"></fb:like>
</div>


ကဲ ဒါဆိုရင္ေတာ့ အားလံုးပဲအဆင္ေျပေလာက္ပါၿပီေနာ္..

Tuesday, 17 January 2012

Basic HTML ျမန္မာလိ္ုစာအုပ္

Basic HTML ျမန္မာလိ္ုစာအုပ္



SATURNGOG ေရးသားထားတဲ့ HTML အေႀကာင္းျမန္မာလိုစာအုပ္ပါ။

Basic HTML ျမန္မာလိ္ုစာအုပ္ 1.06 MB

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

Monday, 16 January 2012

Adding Read More Link Icon For Blogger


How to do ? ...

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

2. Click Expand Widget Templates

3. Find code of HTML below :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

You can use (Ctrl+F) to find easily

If you can not find it, find code of HTML below :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

You can use (Ctrl+F) to find easily

4. Remove it (which one you can find) with code of HTML below :

<!--Read-More-Link-Icon-BEGIN-->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' src='Your Read More Link Icon URL'/></a>
</div>
</b:if>
<!--Read-More-Link-Icon-END-http://ayeyarmyae.blogspot.com-->

NOTES :
a. Change Your Read More Link Icon URL

Example : http://lh6.ggpht.com/_OzNnI7Y03Iw/S3jOUa4I81I/AAAAAAAAA90/eLAtlSQuH4w/7-large-allblogtools.gif

b. The result is :



<!--Read-More-Link-Icon-BEGIN-->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' src='http://lh6.ggpht.com/_OzNnI7Y03Iw/S3jOUa4I81I/AAAAAAAAA90/eLAtlSQuH4w/7-large-allblogtools.gif'/></a>
</div>
</b:if>
<!--Read-More-Link-Icon-END-http://ayeyarmyae.blogspot.com-->

5. Click Save Template and Done.

Now you've already Added Read More Link Icon For Blogger.

Create Related Posts with Scroll in Blogger


How to Create Related Posts with Scroll in Blogger ? ...

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

2. Click Expand Widget Templates

3. Find code of HTML below :

<data:post.body/>

You can use (Ctrl+F) to find easily

4. Right After <data:post.body/> place code of HTML below :

<!--Related-Posts-Scroll-BEGIN-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
<!--Related-Posts-Scroll-END-http://ayeyarmyae.blogspot.com-->

NOTES :Related Post : you can change it with any word-phrase you like.

5. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

6. Right Before ]]></b:skin> place code of HTML below :

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f2f2f2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

NOTES :
background-color : #f2f2f2; it's a background color, you can change it with any HTML color code you like.

7. Click Save Template and Done.

Now you've already Created Related Posts with Scroll in Blogger.

Top Commentators Widget in Blogger



How to add Top Commentators Widget in Blogger ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Fayeyarmyae.blogspot.com&num=15&filter=Blogfuel" type="text/javascript"></script>

<small><div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.ayeyarmyae.blogspot.com/2012/01/top-commentators-widget-in-blogger.html" target="_blank" title="widget top commentators">Add this widget to your blog</a></div></small>

NOTES :

You can change :
  • ayeyarmyae.blogspot.com with your blog URL.
  • 15 number of commentators displayed.
  • Blogfuel an author of blog.

4. Click Save and Done.

Now, you've already added Top Commentators Widget in Blogger.

HTML Color Code Table in Blogger

How to add HTML Color Code Table in Blogger ? ...

First Step

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

2. Find code of HTML below :

</head>

you can use (Ctrl+F) to find easily

3. Right Before </head> place code of HTML below :

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
<script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
executeonload(init);
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script><!--[if gte IE 5.5000]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);
</script>
<![endif]-->


4. Click Save Template.

Second Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click 'HTML/JavaScript'

3. Place code of HTML below into 'HTML/JavaScript'

<!--HTML-Color-Code-BEGIN-->
<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody>
<tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr>
<tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody>
<tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>
Selected Color Code: <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p>
</td></tr>
</tbody></table>
</form>
</center>
<!--HTML-Color-Code-END-http://ayeyarmyae.blogspot.com-->

NOTES : Selected Color Code : you can change it with any word-phrase you like.

4. Click Save and Done.

Now, you've already added HTML Color Code Table in Blogger.

Created Horizontal Tabs Menu in Blogger

For Example picture

how to Create Horizontal Tabs Menu in Blogger ? ...

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

2. Find code of HTML below:


]]></b:skin>
     you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> - place code of HTML below:


<!--Horizontal-Tabs-BEGIN-->
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}

.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8vPYOFfisF_qwOLzOUu7p-qprRFYeFCJts6sKgp7DTvYkkajIvnI4GKeFkNwU_lGwLUA7rotAZLMO0mZQq_au4XKRXgoiGwSCZd9XbVYx5T-CrM421lnT4KhZN9z1hdlLlIHqZk_030/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPO-tJLqYxf7EtkUA8-6y8ToT2f8HhYCnqKOWBFFOxF3ORbNjQnySbVxzTYKWwAFCtozX3q2OJG6XY8xjqMONgZ1lLeVYa-wzn98wMDHWexLJ2mZhcDfxq0w_clPelUU3gbbgq1fa9hR4/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */

.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
<!--Horizontal-Tabs-END-http://ayeyarmyae.blogspot.com-->

4. Find code of HTML below:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title' type='Header'/>
</b:section>
</div>
     you can use (Ctrl+F) to find easily

5. Right after it - place code of HTML below:


<div class='animatedtabs'>
<ul>
<li><a href= 'http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
</ul>
</div>

Notes:
You can change:
http://ayeyarmyae.blogspot.com
#  Add link title
Name
6. Click Save Template and Done.

Now, you've already Created Horizontal Tabs Menu in Blogger.

Drop Down Menu Widget in Blogger

This is Drop Down Menu. Drop Down Menu displays huge lists of links of a blog.

How to add Drop Down Menu Widget in Blogger ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<!--Drop-Down-Menu-BEGIN-->
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>

<option>The Main Title</option>

<!-- change the links with your own -->
<option value="http://linkofsite.com">First Title</option>
<option value="http://linkofsite.com">Second Title</option>
<option value="http://linkofsite.com">Third Title</option>
</select></form>
<!--Drop-Down-Menu-END-http://ayeyarmyae.blogspot.com-->

NOTES :
  • The Main Title: It's a main title, you can change it as you like. Example: Favourite Sites
  • http://linkofsite.com : It's URL of link, you can change it with your URL of link. Example : http://www.google.com, http://www.yahoo.com
  • First Title, Second Title, Third Title: These are title of URL of Links, you can change these with your title of URL of links. Example: Google, Yahoo, Youtube

4. Click Save and Done.

Now you've already displayed Drop Down Menu Widget in Blogger.

Installing Google Translate Widget

How to Install Google Translate Widget ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<!--Google-Translate-BEGIN-->
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!--Google-Translate-END-http://ayeyarmyae.blogspot.com-->

NOTES :
'en' means blog language is english, you can change it to your blog language. Example: 'fr' for french, 'de' for german, 'it' for italian and 'id' for indonesian.

4. Click Save and Done.

Now you've already Installed Google Translate Widget.

Numbered Page Navigation Blogger

Let's review a topic about how to add Numbered Page Navigation Blogger. Have you ever seen Numbered Page Navigation ? ...

Like this below :



Numbered Page Navigation Blogger means a Page Navigation by Numbers in Blogger. The function of Numbered Page Navigation is to navigate your blog friendly for visitor or viewers.

How to add Numbered Page Navigation Blogger ? ...

First Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<style type="text/css">
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {display: none;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}.showpageNum a:link,
.showpage a:link {text-decoration:none;color:#333333;}
</style>
<script style="text/javascript">
var pageCount=2;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";
</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js">
</script>


4. Click Save.

Second Step

1. Go to Edit HTML

2. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> place code of HTML below :

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}



Third Step

1. Find code of HTML below :

</body>

you can use (Ctrl+F) to find easily

2. Right Before </body> place code of HTML below :

<!--Numbered-Page-Navigation-BEGIN-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=2;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Numbered-Page-Navigation-END-http://ayeyarmyae.blogspot.com-->

NOTES :
  • Var pageCount=2 means 2 posts would be shown in each page, you can change it as you like.
  • Var displayPageNum=5 means 5 numbers would be displayed in Numbered Page Navigation, you can change it as you like.
  • Var upPageWord ='Previous' you can change word 'previous' in to other words, such as 'before' or 'newer' or, anything you like.
  • Var downPageWord ='Next' you can change word 'Next' in to other words, such as 'older' or, anything you like.

3. Click Save Template and done.

Now you've already Added Numbered Page Navigation Blogger.

Basic HTML Code Tutorial

ဒါေလးကေတာ့ tutorialweb တခုကေတြ ့လို ့မလာတာ ကိုယ္တိုင္ေရး၇မွာလည္း ပ်င္းလို ့ပါ :P
Create Hyperlink :

<a href="http://yoursitename.com">click to visit</a>

Ex : <a href="http://tutorialwebforblogger.blogspot.com/2011/01/basic-html-code-tutorial.html">click to visit</a>

Result : click to visit

Opened in New Tab

<a href="http://yoursitename.com" target="_blank">click to visit</a>

Ex : <a href="http://yoursitename.com" target="_blank">click to visit</a>

Result : <a href="http://tutorialwebforblogger.blogspot.com/2011/01/basic-html-code-tutorial.html">click to visit</a>

Dofollow link

<a href="http://yoursitename.com" rel="follow">click to visit</a>

Ex : <a href="http://tutorialwebforblogger.blogspot.com/2011/01/basic-html-code-tutorial.html" rel="follow">click to visit</a>

Result : click to visit

Nofollow link

<a href="http://yoursitename.com" rel="nofollow">click to visit</a>

Ex : <a href="http://tutorialwebforblogger.blogspot.com/2011/01/basic-html-code-tutorial.html" rel="nofollow">click to visit</a>

Result : click to visit

Create Email Link :

<a href="mailto:username@domainname.com">send me email</a>

Ex : <a href="mailto:virginiabkr8@gmail.com">send me email</a>

Result : send me email

Insert Image :

<img src="http://domainname.com/yourimage.png">

Ex : <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizpGlHKC_y5WoKZTEDtMcjCsJIUxbJPUQHtlA3wm4144IRzM1j-WWvH_qux-wRvl5L49w81B5PkDBuWLV9evP1VAWk2W17REklJQwxtdFuNQeiVnsgyKx7Wh8e5SXvjQIJ7pQ55qumQeBm/s1600/digg.png">

Result :


Create Clickable Icon, Button, Picture or Banner :

<a href="http://yoursitename.com/thepageyouwanttolinkto.html"><img src="http://domainname.com/yourimage.png" border="0"></a>

Ex : <a href="http://tutorialwebforblogger.blogspot.com/2011/01/basic-html-code-tutorial.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizpGlHKC_y5WoKZTEDtMcjCsJIUxbJPUQHtlA3wm4144IRzM1j-WWvH_qux-wRvl5L49w81B5PkDBuWLV9evP1VAWk2W17REklJQwxtdFuNQeiVnsgyKx7Wh8e5SXvjQIJ7pQ55qumQeBm/s1600/digg.png" border="0"></a>

Result :


Bold, Italics, Strong and Emphasis :

<b>bold</b> will become bold

<i>italics</i> will become italics

<strong>strong</strong> will become strong

<em>emphasis</em> will become emphasis

Colors :

<b style="color:green; font-weight:normal;">green blue</b>

Result : green blue

<b style="color:#FD0101; font-weight:normal;">red</b>

Result : red

Underline :

<p style="text-decoration:underline">this is underline</p>

Result :
this is underline


<b style="color:blue; text-decoration:underline; font-weight:normal;">blue underline</b>

Result : blue underline

Remove Underline From Hyperlink :

<a href="http://yoursitename.com" target="_blank" style="text-decoration:none;">this isn't underline</a>

Ex : <a href="http://tutorialwebforblogger.blogspot.com/2011/01/basic-html-code-tutorial.html" target="_blank" style="text-decoration:none;">click to visit</a>

Result : click to visit

Center Text and Image :

<p align="center">text in center</p>

Result :
text in center


<p align="center"><img src="http://domainname.com/yourimage.png"></p>

Ex : <p align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizpGlHKC_y5WoKZTEDtMcjCsJIUxbJPUQHtlA3wm4144IRzM1j-WWvH_qux-wRvl5L49w81B5PkDBuWLV9evP1VAWk2W17REklJQwxtdFuNQeiVnsgyKx7Wh8e5SXvjQIJ7pQ55qumQeBm/s1600/digg.png"></p>

Result :


Add Print Button to Blogger Posts

နည္းပညာေရးသားမွ်ေဝတဲ့ဘေလာ့တိုင္းအတြက္ Add Print Button to Blogger Posts ဆိုတာေလးက အမွန္တကယ္ လိုအပ္ပါတယ္ လာေရာက္ေလ့လာ ဖတ္ရွု႕သူေတြအတြက္ နည္းပညာမ်ားကို ပရင့္ထုတ္ယူ
ၿပီး သိမ္းစည္းႏိုင္ရန္အတြက္ပါ..
Print Buttonေလးကိုဘယ္လို ထည့္မလဲဆိုေတ့ာ ေအာက္မွာ ေျပာျပထားေပးပါတယ္.. 
ပထမဆံုးအေနနဲ ့
1. Dashboard ကိုဝင္ပါ, Design ကိုဝင္ပါ,  Edit HTML ကိုဝင္ပါ

2.  Expand Widget Templates ဆိုတာေလးကို အမွန္ျခစ္ေလးေပးထားခဲ့ပါ

3. ေအာက္က Html ကုဒ္ေလးကိုရွာပါ:


</head>

(Ctrl+F)ကိုအသံုးျပဳၿပီး လြယ္ကူစြာ ရွာေဖြႏိုင္ပါတယ္

4. </head> ဒီကုဒ္ေလးရဲ႕ အေရွ႕မွာေအာက္က HTML ကိုထည့္ပါ :


<style media='print' type='text/css'>#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}#main-wrapper {width: 100%}</style>


ဒုတိယ အဆင့္အေနနဲ ့က
1. ေအာက္က ကုဒ္ေလးကို HTML ထဲမွာရွာပါ :


<data:post.body/>

(Ctrl+F)ကိုအသံုးျပဳၿပီး လြယ္ကူစြာ ရွာေဖြႏိုင္ပါတယ္
2.<data:post.body/> ဒီကုဒ္ေလးရဲ႕ေနာက္မွာေအာက္ကေပးထားတဲ့ Code ေလးကို ထည့္ပါ :


<!--Print-Button-BEGIN-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><a href='javascript:window.print()' style='text-decoration:none;' target='_blank'><img src='http://www.iconarchive.com/icons/artua/dragon-soft/24/Printer-icon.png' style='margin-bottom:-12px; cursor: pointer; border:none;-moz-box-shadow: none;-webkit-box-shadow:none;box-shadow:none;'/><span style='color:#1A67B8; font: normal bold 15px Arial.Helvetica,sans-serif; letter-spacing: 0.85px;'><i>Print This Post</i></span></a></b:if>
<!--Print-Button-END-http://ayeyarmyae.blogspot.com-->

NOTES :
အေပၚက ကုဒ္ထဲက အနီေရာင္နဲ ့ေရးတဲ့Print This Post ဆိုတဲ့ေနရာမွာ စိတ္ႀကိဳက္စာသားေျပာင္းလဲ၍
အသံုးျပဳႏိုင္ၾကပါတယ္..
3. ၿပီးၿပီဆိုရင္ေတာ့ save template ကိုႏွိပ္ၿပီး သိမ္းလိုက္ၾကပါ..
Print Buttom ထည့္တာေလး ၿပီးဆံုးသြားပါၿပီ.. အဆင္ေျပၾကပါေစဗ်ာ ..

Sunday, 15 January 2012

Currency Converter for Blog





Friday, 13 January 2012

ကိုယ့္Website မွာ တျခားWebsite တခုကိုေပၚေစခ်င္ရင္

ကိုယ့္Website မွာ တျခားWebsite တခုကိုေပၚေစခ်င္ရင္ေတာ့ေအာက္ကုဒ္ေလးနဲ ့စမ္းၾကည့္ၾကေနာ္..
က်ေနာ္ကေတာ့ မသံုးဘူးဗ် ေလးလို ့သူမ်ားဆိုဒ္ကို ကိုယ္ဆိုဒ္မွာလာေပါင္းေတာ့ ဆိုဒ္ႏွစ္ခုစာ ျဖစ္ၿပီး
ေလးေနတာေပါ့ အဲ့တာေၾကာင့္ပါ ကလိခ်င္တဲ့သူမ်ားအတြက္ သိရေအာင္ တင္ေပးတာပါ..Blogger မွာဆိုရင္
ေတာ့ Page အသစ္တခုထုတ္ၿပီး ထည့္စမ္းၾကည့္ေပါ့ေနာ္.. Page ထုတ္တာေတ့ာ သိၾကမယ္ ထင္ပါတယ္ေနာ္
မသိသူမ်ားက ဒီလို လုပ္ပါ.. Dashboard >> Posting >> Edit Pages ကိုဝင္ ၿပီးရင္ ေအာက္ေလးမွာ
Create a Page ကိုလကစ္ၿပီး ထည့္ေပါ့ေနာ္..  WorldPress မွာဆိ္ုရင္ေတာ့ Admin Bar ကေန +New မွာ Page ေပါ့ဗ်ာ.. ကုဒ္ကေတာ့ ေအာက္မွာဗ်ာ.. အနီေရာင္နဲ ့ေပးထားတဲ့ေနရာ
ေတြမွာေတာ့ စိတ္ႀကိဳက္ျပန္ျပင္ၾကေပါ့ေနာ္..

<div>
<center><iframe marginheight="0" marginwidth="0" allowtransparency="true" src="ဒီေနရာမွာ ေပၚေစခ်င္တဲ့ဆိုဒ္လင့္ထည့္ပါ" frameborder="0" height="800" scrolling="auto" width="1000"></iframe></center>
</div>

Change Text Sizer in your Site

မိမိတို ့ဆိုဒ္ေလးေတြမွာ စာလံုးေဖာင့္ အႀကီး အေသးေျပာင္းလို ့ရတာေလး ထည့္ခ်င္ရင္ ေတာ့ ေအာက္က
ကုဒ္ေလးကို ယူၾကေပေတာ့ဗ်ာ.. ထည့္နည္းကေတာ့ အလြယ္နည္းပဲေျပာလိုက္မယ္ ကုဒ္အားလံုးကို
Site Bar မွာ Gadged ( Tex box ) တခုအသစ္ယူၿပီး ကုဒ္ေတြကို ထည့္ ၿပီးရင္ ေဆ့ေပါ့ဗ်ာ ..
ဒါေလးပါပဲ.. အဆင္ေျပၾကပါေစေနာ္..ကုဒ္က ေအာက္မွာပါ....

<style type="text/css">
/*<![CDATA[*/
<!-- In first line of code below, I have added a space after the letter p in the word position, because the Ning platform strips this attribute (for Security Reasons). This is why it's best to use the code in text file below. -->.textsizer {p osition:fixed;top:30px;right:10px;}.textsizer a {font-weight:bold;text-decoration:none!important;font-size:20px;}
/*]]>*/
</style>
<script type="text/javascript" src="http://api.ning.com/files/1nllk9brBTvEBdFxgFbVjIL3v14wOEWAZfYblrh*BUnY4ZFIbveBbGI*gHg08ZzhYFG9B6d6xpQU5SLL0lUXWdXgAXhEGKZ2/textsizer.js">
</script>
<div class="textsizer"><a href="javascript:ts('body',1)">စာလံုအႀကီး</a><a href="javascript:ts('body',-1)">/အေသး</a></div>

Monday, 9 January 2012

ဘေလာ့မွာ Share and Save Button ေလး ထည့္ခ်င္ရင္

ဒါေလးကေတာ့ ဘေလာ့မွာ Share and Save button widget ထည့္နည္းေလးပါ။ ပို႔စ္တစ္ပုဒ္ဆံုးတိုင္း ဒီ button ေလး အၿမဲရွိေနမွာ ျဖစ္ပါတယ္။ ထည့္နည္းေလးကလည္း လြယ္ပါတယ္။




(၁)
က်ေနာ္တို႔ widget ေတြ ထည့္တဲ့ ထံုးစံအတိုင္း Layout ထဲက Edit HTML ကိုသြားပါမယ္။
(၂)
Template ကို backup လုပ္ဖို႔ မေမ့ပါနဲ႔။
(၃)
backup လုပ္ၿပီးသြားရင္ Expand Widget Template ဆိုတာေလးကို Check ေပးလိုက္ပါ။
(၄)
ၿပီးရင္ <data:post.body/> ဆိုတာေလးကို (Ctrl+F) နဲ႔ ရွာလိုက္ပါ။
(၅)
ေတြ႔ၿပီဆိုရင္ ေအာက္က Code ေတြကို သူ႕ရဲ႕ ေနာက္မွာ ကပ္ၿပီးထည့္ေပးလိုက္ပါ။ Read More ထည့္ထားတဲ့သူေတြအတြက္ Read More widget ရဲ႕ ေနာက္မွာ ထည့္ေပးရပါမယ္။


<!-- AddToAny Share/Save BEGIN -->
<br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Bookmark' border='0' src='http://static.addtoany.com/buttons/share_save_171_16.png' width='171' height='16'/><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p></a><script type='text/javascript'>a2a_linkname_escape=1;a2a_linkurl="<data:post.url/>";</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'></script>
<!-- AddToAny Share/Save END -->

(၆)
ထည့္ၿပီးၿပီဆိုရင္ေတာ့ Preview အရင္ၾကည့္ လိုက္ပါအံုး။ အဆင္ေျပတယ္ဆိုရင္ေတာ့ Save Template ကိုႏွိပ္လိုက္ပါ။
ဒါဆိုရင္ေတာ့ ပို႔စ္တစ္ပိုဒ္ ဆံုးတိုင္းဆံုးတိုင္းမွာ share & save ဆိုတာေလး အၿမဲပါေနေတာ့မွာပါ။ ဒီ widget ေလးထည့္ေပးထားျခင္းအားျဖင့္ ကိုယ္ေရးထားတဲ့ ပို႔စ္တစ္ပုဒ္ကို လြယ္လြယ္ကူကူ Sharing လုပ္သြားႏိုင္ပါတယ္။ ဘေလာ့လာလည္တဲ့သူေတြ အဆင္ေျပေစမယ့္ widget တစ္ခုပါခင္ဗ်ာ။ အားလံုး အဆင္ေျပၾကပါေစ..
Widget ကို ကိုယ့္စိတ္ႀကိဳက္လုပ္ခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္ကလင့္အတိုင္း မူရင္းေနရာကို သြားၾကည့္ႏိုင္ပါတယ္။

Related Posts in Blog

က်ေနာ့္ ဘေလာ့မွာလည္း တင္မထားရေသးတာနဲ႔ ဒီ related posts widget ေလးကို တင္အံုးမယ္လို႔ စိတ္ကူးလိုက္တာပါ။ အရင္ကေတာ့ thumbnails နဲ႔ ျပတဲ့ related post widget ကိုေတာ့ တင္ေပးထားဖူးပါတယ္။ လိုရမယ္ရေပါ့ဗ်ာ။



အဆင့္(၁)။ အေနနဲ႔ Relatedposts ဆိုတဲ့ .js ဖိုင္ေလးကို အရင္ download ယူထားလိုက္ပါ။ ၿပီးရင္ ျပန္တင္ေပးရမွာ ျဖစ္ပါတယ္။
အဆင့္(၂)။ က်ေနာ္တို႔ ထံုးစံအတိုင္း Layout ထဲက Edit HTML ကို သြားရပါမယ္။
အဆင့္(၃)။ backup ေလး လုပ္ဖို႔ မေမ႔နဲ႔ေပါ့ဗ်ာ။
အဆင့္(၄)။ ၿပီးရင္ expand widget template ဆိုတာေလးမွာ ကလစ္ေပးခဲ့လိုက္ပါ။
အဆင့္(၅)။ ၿပီးရင္ေတာ့ </head> ဆိုတာေလးကို ရွာလိုက္ပါ။


အဆင့္(၆)။ ေအာက္က code ေတြကို အဲဒီ </head> ရဲ႕အေပၚ မွာ ထည့္ေပးလိုက္ပါ။

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://img38.imagefra.me/img/img38/6/4/29/thetnaing/f_i29o2gm_44959d9.gif) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://ေဒါင္းလုပ္ယူခဲ့တဲ့ relatedposts.js' type='text/javascript'/><!--RelatedPostsStops-->

အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။

အဆင့္(၇)။ <data:post.body/> ဆိုတာေလးကို ရွာလိုက္ပါ။
အဆင့္(၈)။ ေအာက္က code ေတြကို <data:post.body/> ဆိုတာရဲ႕ ေအာက္မွာ ထည့္ေပးလိုက္ပါ။
<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->
အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။
အဆင့္(၉)။ အားလံုးၿပီးသြားၿပီ ဆိုရင္ေတာ့ Save Template ကိုႏွိပ္လုပ္လိုက္ပါ။ ဒါဆို related post widget ထည့္တာ ၿပီးသြားပါၿပီ။ ပို႔စ္ title သို႔မဟုတ္ readmore ဆိုတာေတြ ႏွိပ္ၾကည့္မွ related post က ေပၚမွာျဖစ္ပါတယ္။တကူးတက ဖတ္ေပးတာ ေက်းဇူးပဲဗ်ာ....

Saturday, 7 January 2012

သင့္ဆိုဒ္ အတြက္ အသံုးဝင္မည့္ HTML Code မ်ား

သင့္ websites အတြက္ ေကာင္းနိုးရာရာ ကုတ္ေလးမ်ား.......

ဒါကေတာ့ ေနာက္ခံဘက္ဂေရာင္း အတြက္ ကုတ္ေလးပါ..။

<style type="text/css">
body {
background-image: url(ဒီေနရာမွာ ဘက္ဂေရာင္းလင့္ေလးထည့္ပါ) ;
background-attachment:
fixed;
background-repeat:
no-repeat;
background-position:
Bottom; }</style>


အနီေရာင္ေလးေတြေနရာမွာ စိတ္ၾကိဳက္ေျပာင္းလို႔ရပါတယ္...။

................................................................

ဒါေလးကေတာ့ Text Box အတြက္ကုတ္ေလးပါ
<form method="post" action="">
<textarea name="comments" cols="60" rows="5">
စာေတြဒီေနရာမွာရိုက္ထည့္ပါ.....
</textarea><br>
</form>

.................................................................

ဒါေလးကေတာ့ box အတြက္ျဖစ္ပါတယ္
<table width=50% style="border:2px dotted hotpink;" cellpadding="4" cellspacing="4"><tr><td style="border:2px dotted lightpink;"><font size="1">ဒီေနရာမွာအေၾကာင္းအရာေရးပါ</td></tr></table>

<table width=50% cellpadding="6" cellspacing="2" style="border:double 5px #9900FF,"><tr><td style="border:double 5px #9900FF;">ဒီေနရာမွာအေၾကာင္းအရာေရးပါ</td></tr></table>

...............................................

ဒါေလးကေတာ့ သူ႔ကိုႏွိပ္လိုက္ရင္ စာမ်က္ႏွာအေပၚဆံုးကိုေရာက္သြားမယ့္ ကုတ္ေလးပါ

<div align="center">
<p id="top"><a href="#" temp_href="#"><img src="http://img140.imageshack.us/img140/5843/top1.png" width="70" height="45" border="0" alt="Back to the Top" title="အေပၚသို႔"></a></p>
စိမ္းေရာင္ေလးနဲ႔ လင့္ေနရာမွာေတာ့ မိမိၾကိဳက္တဲ့ ပံုစံေျပာင္းထည့္လို႔ရပါတယ္...။

..................................................................

ဒါကေတာ့ Flash ဖိုင္ေတြကိုစာမ်က္ႏွာမွာတင္မယ့္ ကုတ္ေလးပါ
<embed
src=" ဒီေနရာမွာ *.swf ဖိုင္ရွိတဲ့လင့္ေလးထည့္ေပါ့ " ="" wmode="transparent"
allowfullscreen="true" allowscriptaccess="always"
height="300" width="460">

*.swf ဖိုင္ကိုအရင္ upload တင္ရပါမယ္ ျပီးေတာ့မွ ဖိုင္ရွိတဲ့လင့္ကိုထည့္ရမွာျဖစ္ပါတယ္။
အနီေရာင္ ေတြေနရာမွာေတာ့လိုတဲ့ အရြယ္အစားကို အစားထိုးေျပာင္းလို႔ရပါတယ္။
.............................................

ဒါကေတာ့ စာလံုးအရြယ္အစားနဲ႔ အေရာင္ေတြအတြက္ပါ

<Font size ="2" color ="green">ဒီလိုေလးျဖစ္သြားပါမယ္</font>
<Font size ="3" color ="blue">ဒီလိုေလးျဖစ္သြားပါမယ္</font>
<Font size ="4" color ="yellow">ဒီလိုေလးျဖစ္သြားပါမယ္</font>

လိုအပ္တဲ့အရြယ္နဲ႔ အေရာင္ကို ၾကိဳက္သလိုျပန္ျပင္လို႔ရပါတယ္။
ဒီလိုေလးျဖစ္သြားပါမယ္ ဒီလိုေလးျဖစ္သြားပါမယ္ ဒီလိုေလးျဖစ္သြားပါမယ္
.............................................

ဒါကေတာ့ လင့္ခ်ိတ္တဲ့ ကုတ္ေလးပဲျဖစ္ပါတယ္

<a href=" ဒီေနရာမွာ ေပးသြားေစခ်င္တဲ့ လင့္ကိုထည့္ပါ "
target="_blank"> ဒီေနရာမွာက မိမိေဖၚျပခ်င္တဲ့အေၾကာင္းအရာေပါ့ </a>


ေဖၚျပခ်င္တဲ့ေနရာမွာ စာသားသက္သက္ေရးလဲရတယ္ ဒါမွမဟုတ္
ဓာတ္ပံုေလးနဲ႔ လုပ္လဲရပါတယ္ ဓာတ္ပံုေလးနဲ႔ ေဖၚျပမယ္ဆိုရင္ေတာ့ ဒီလိုေလးပါ

<a href=" ဒီေနရာမွာ ေပးသြားေစခ်င္တဲ့ လင့္ကိုထည့္ပါ "
target="_blank"> <img style="width: 280px; height:50px;"
src=" ဒီေနရာမွာ ဓာတ္ပံု လင့္ေလးထည့္ပါ "
alt=""/>
</a>
ဒီလိုေလးပါ ကုတ္မ်ားအေၾကာင္း
.............................................

ဒါေလးကေတာ့ လင့္ ကို ေထာက္လိုက္ရင္ အေရာင္ေျပာင္းေအာင္လုပ္တာပါ

<style
type="text/css"> <!-- A:link { text-decoration: none; color:yellow
} A:visited { text-decoration: none; color:red} A:hover { text-decoration:
none; color:green } --> </style>
ပံုမွန္ လင့္အေရာင္ေမာက္စ္ျဖင့္ေထာက္လိုက္ေသာအေရာင္ၾကည့္ျပီးသြားေသာအေရာင္
.......................................................

ဒါေလးကေတာ့ စာလံုးေပၚကို ေထာက္လိုက္ရင္ အေရာင္ေျပာင္းေအာင္လုပ္တာပါ

<b onmouseout="this.style.color = 'black';" onmouseover="this.style.color
= 'red';" align="justify">ဒီေနရာမွာအေၾကာင္းအရာထည့္ပါ </b>

.................................................

ဒါကေတာ့ မိမိစာမ်က္ႏွာကိုဖြင့္လိုက္တာနဲ႔ သတိေပးတဲ့စာေလးေပၚလာေအာင္လုပ္တာပါ

<SCRIPT language="JavaScript">
<!-- hide from old browsers

alert("ဒီေနရာမွာမိမိေပၚေစခ်င္တဲ့စာသားေတြေရးပါ");

//-->
</SCRIPT>

.............................................

ဒါေလးကေတာ့ Tab bar မွာစာသားေလးေတြေျပးေနေအာင္လုပ္တာပါ

<script language="javascript" type="text/javascript">
msg = " ဒီေနရာမွာ စာသားထည့္ပါ ";
msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",150);
}
scrollMSG();
</script>

.............................................

ဒါေလးကေတာ့ သင့္စာမ်က္ႏွာကို Print လုပ္မဲ့ ကုတ္ေလးပါ

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (window.print) {
document.write('<form>'
+ '<input type=button name=print value="Print" '
+ 'onClick="javascript:window.print()"></form>');
}
// End -->
</script>

.............................................

ဒါေလးကေတာ့ Drop Down List အတြက္ျဖစ္ပါတယ္

<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>ဒီေနရာမွာ ေခါင္းစဥ္ထည့္ပါ<!-- change the links with your own --></option>
<option value="ဒီေနရာမွာ လင့္ ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္ </option>
<option value="ဒီေနရာမွာ လင့္ ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္ </option>
<option value="ဒီေနရာမွာ လင့္ ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္ </option>
</select></form>

.............................................

ဒါေလးကေတာ့ ဇယားအတြက္ ကုတ္ေလးပါ

<table border = "1">
<caption> ဒီေနရာမွာ ေဖၚျပခ်က္</caption>
<tr><th>ေခါင္းစဥ္ ၁</th><th> ေခါင္းစဥ္ ၂ </th></tr>
<tr><td> အမွတ္စဥ္ ၁/၁ </td><td> အမွတ္စဥ္ ၁/၂ </td></tr>
<tr><td> အမွတ္စဥ္ ၂/၁</td><td> အမွတ္စဥ္ ၂/၂</td></tr>
</table>

.............................................

ဒါေလးကေတာ့ ဇယားကြက္ထဲမွာ Drop down List ထည့္တဲ့ကုတ္ေလးပါ

<table border="0" cellspacing="0" align="center">
<tr>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<tr><td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td></tr>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
</tr>
</table>

........................................................

ဒါေလးကေတာ့ ြGoogle Search အတြက္ကုတ္ေလးပါ

<FORM method=GET action=http://www.google.com/custom>
<INPUT TYPE=text name=q size=14 maxlength=255 value="">
<INPUT type=submit name=sa VALUE="ရွာမယ္"><br>
<input type=hidden name=domains value="ning.com">
<input type=radio name=sitesearch value="" checked>Google <br>
<input type=radio name=sitesearch value="ning.com"> ning.com
</FORM>

.............................................

ဒါေလးကေတာ့ လင့္ဘက္ဂေရာင္းအတြက္ကုတ္ေလးပါ

a:hover {
color:#FF0000;
text-decoration:none;
background:transparent url(ဒီေနရာမွာ *.gif လင့္ေလးထည့္ပါ);
}
ဒီေနရာကို ေမာက္စ္နဲ႔ ေထာက္ၾကည့္လိုက္ပါ

............................................

ဒါကေတာ့ comment wall ေနာက္ခံဘက္ဂေရာင္းအတြက္ပါ

/*---pic in comment wall---*/
#xg_profiles_chatterwall_post_comment{
color: #ff6000;
background-color:transparent!important;
background-image:url(ဒီေနရာမွာ ဓာတ္ပံု လင့္ေလးထည့္ပါ);
background-repeat: no-repeat;
background-position:bottom;
background-attachment:relative;}


ဒါေလးကေတာ့ comment wall toolbar မွာပံုေလးေတြထည့္ခ်င္ရင္ေပါ့

/*---pic in comment wall toolbar---*/
.texteditor_toolbar {
background-image:url( ဒီေနရာမွာ URL ထည့္ပါ )!important;
border:2px ridge black;
width:500px;
height:50px;
}



.............................................

ဒါေလးကေတာ့ network Icon အတြက္ျဖစ္ပါတယ္

<link rel="icon" type="image/gif" href=" ဒီေနရာမွာ Icon လင့္ေလးထည့္ေပးပါ ">

.............................................

ဒါကေတာ့ website Header မွာ Flash ထည့္ဖို႔ပါ

<script language="JavaScript">
//insert under the NingBar only if the NingBar exists
var ningBar = document.getElementById('xn_bar');
if(ningBar) { var headlinerAd = document.createElement('div');
headlinerAd.id='headliner_ad'; headlinerAd.innerHTML = '<div style="font-size: 20pt; float: center; color: #FF0000; border: 1px; background-color: transparent; text-align: center;"><embed src=" ဒီေနရာမွာ *.swf ဖိုင္ရွိတဲ့လင့္ေလးကိုထည့္ပါ " ="" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" height="120" width="960"></embed></div>'; ningBar.parentNode.insertBefore(headlinerAd,ningBar.nextSibling);}</script>

အနီေရာင္စာလံုးေတြေနရာမွာေတာ့ၾကိဳက္သလိုျပန္ေျပာင္းလို႔ရပါတယ္...။

.............................................

ဒါေလးကေတာ့ စာမ်က္ႏွာေပၚမွာ
Floating အေနနဲ႔ေပၚေအာင္လုပ္တာပါ

<div style="position:fixed;top:20px;right:0px;">
ဒီေနရာမွာ အေၾကာင္းအရာေရးပါ</div>


ဒီေနရာမွာ စာသားတင္မကပဲ ဓာတ္ပံုေတြ Flash ေတြကိုပါေပၚေအာင္လုပ္လို္႔ရပါတယ္
Position ကိုေတာ့ မိမိ လိုသလိုျပင္ဆင္ယူလို႔ရပါတယ္ (စာလံုး အျပာ၊ အနီ)

.............................................

ဒါကေတာ့ အေပၚဆံုးက navigation bar အတြက္ ပါ

#xg_navigation { margin-top:1em; background: url(
ဒီေနရာမွာ ဓာတ္ပံု လင့္ ထည့္ပါ ) top repeat-x; height: 60px; border-top:2px ridge (transparent); border-right:2px ridge (transparent); border-center:2px ridge (transparent); border-bottom:2px ridge (transparent); }

...........................................

ဒါကေတာ့ Title Bar အတြက္ကုတ္ေလးပါ

.xg_module_head {
background-color:transparent;
background-image:url( ဒီေနရာမွာ ဓာတ္ပံု လင့္ေလးထည့္ေပးပါ );
background-repeat:repeat;
margin-bottom:0em;
}

...............................................

ဒါေလးကေတာ့ စာမ်က္ႏွာ ေအာက္ေျခမွာ ထည့္ခ်င္ရာထည့္ဖို႔အတြက္

#xg_foot {
background-image:url(ဒီေနရာမွာ jpeg, gif, png ဖိုင္ လင့္ေလးထည့္ပါ );
}

.............................................

ဒါေလးကေတာ့ စာသားေတြေရြ႕ေနေအာင္လုပ္တဲ့ေကာင္ေလးပါ

<marquee>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee direction=right>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee behavior=alternate>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<center><marquee behavior=alternate width=50%> ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee></center>

<marquee direction=up height=50>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee direction=down height=50>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee direction=down height=50 behavior=alternate>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

ဒီေနရာမွာစာရိုက္ထည့္ပါ

ဒီေနရာမွာစာရိုက္ထည့္ပါ

ဒီေနရာမွာစာရိုက္ထည့္ပါ

ဒီေနရာမွာစာရိုက္ထည့္ပါ


ဒီေနရာမွာစာရိုက္ထည့္ပါ

ဒီေနရာမွာစာရိုက္ထည့္ပါ

ဒီေနရာမွာစာရိုက္ထည့္ပါ
.....................................................

ဒါေလးကေတာ့ scroll-box အတြက္ကုတ္ေလးပါ

<style type="text/css">
div.scroll-box {
height:100px;
width:200px;
font:10pt/20pt Verdana,arial,sans-serif;
overflow:scroll;
}
</style>
<div class="scroll-box">

ဒီေနရာမွာ စာသားေတြထည့္ပါ
Enter your scroll box text here... once there's enough text, the box will grow scroll bars!
You can also put pictures in here and it will scroll if the picture is too big.

</div>
ဒီလိုေလးလဲလုပ္လို႔ရတယ္
<div style="border: 9px ridge rgb(96, 214, 243); overflow: scroll; height: 100px; width: 220px;">ဒီေနရာမွာအေၾကာင္းအရာမ်ားေရးထည့္ပါ</div>

......................................................

ဒါေလးကေတာ့ ဓာတ္ပံု slide show အတြက္ပါ
<div align=center>
<table width=400 border=0 align=center>
<tr>
<td>
<marquee width=400>
<img src=ဒီေနရာမွာ ဓာတ္ပံု URL ထည့္ပါ />
<img src=ဒီေနရာမွာ ဓာတ္ပံု URL ထည့္ပါ />
<img src=ဒီေနရာမွာ ဓာတ္ပံု URL ထည့္ပါ />
</marquee>
</td>
</tr>
</table>
</div>

................................................

ဒါေလးကေတာ့ လင့္ေအာက္က underlines ေလးကိုေျဖာက္ထားဖို႔ပါ

<style type="text/css">
<!-- a { text-decoration: none; }// -->
</style>

..............................................

ဒါေလးကေတာ Tab ေလးေတြထည့္ဖို႔ပါ
<FORM>
<INPUT TYPE="BUTTON" VALUE="Home Page"
ONCLICK="window.location.href=' ဒီေနရာမွာ URL ထည့္ပါ ' ">
<INPUT TYPE="BUTTON" VALUE="HTML Books"
ONCLICK="window.location.href=' ဒီေနရာမွာ URL ထည့္ပါ ' ">
<INPUT TYPE="BUTTON" VALUE="JavaScript"
ONCLICK="window.location.href=' ဒီေနရာမွာ URL ထည့္ပါ ' ">
</FORM>

............................................

ဒါေလးကေတာ့ iframe အတြက္ကုတ္ေလးပါ
(ခ်က္ရြန္းေတြ၊ ဓာတ္ပံုေတြကိုစာမ်က္ႏွာေပၚမွာတင္ရန္)

<iframe src=" ဒီေနရာမွာ URL ထည့္ပါ "
width="200"
height="150"
scrolling="auto"
frameborder="1"></iframe>

................................................

ဒါေလးကေတာ့ သီခ်င္းထည့္ဖို႔ပါ
<embed name="ဒီေနရာက သီခ်င္းနာမည္ေပါ့"
src=" ဒီေနရာက သီခ်င္း URL *.wav ေပါ့ "
width="300"
height="90"
loop="false"
autostart="false">
</embed>


ဒါေလးကေတာ့ myspace music ထည့္ဖို႔ပါ

<embed src="http://lads.myspace.com/theAnswer.swf"
quality="high"
bgcolor="#ffffff"
width="450"
height="345"
name="mp3player"
align=""
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

................................................

ဒါေလးကေတာ့ ဗီဒီယို ထည့္ဖို႔အတြက္ပါ

<object width="425px" height="360px" >
<param name="allowFullScreen" value="true"/>
<param name="wmode" value="transparent"/>
<param name="movie" value=" ဒီေနရာမွာ နာမည္ထည့္ပါ "/>
<embed src=" ဒီေနရာကေတာ့ Video ရွိတဲ့ URL ထည့္ပါ " width="425" height="360" allowFullScreen="true" type="application/x-shockwave-flash" wmode="transparent"/>
</object>

.................................................

ေဘာင္ကြတ္မဲ့ကုတ္ေလးပါ

<fieldset style="border:1px solid #FF0000; padding:10;"><legend align="left"><font color=" #FF0000">ဒီေနရာကေတာ့ ေခါင္းစဥ္ေပါ့</font></legend><font color=" #FF0000"><p align="center (left, right) ">အေၾကာင္းအရာေလးေတြဒီေနရာမွာေရးပါ</p></font></fieldset>

...............................................

ဒါေလးကေတာ့ BlogPost ေဖၚျပတဲ့ေနရာမွာ Scrollbar နဲ႔ ေဖၚျပခ်င္ရင္ေပါ့

/* scroll box for the blog post */
#xg_module_blog, .body_detail{
height: 300px;
overflow : auto;
position:relative;
margin : 3px;
text-align : center;
font-size : 14px;
font-family :arial;
}



......................................................

ဒါေလးကေတာ့ ကိုယ္ပိုင္ စာမ်က္ႏွာ ေပၚမွာ Update Status ကိုေျဖာက္ထားမယ္ဆိုရင္ေပါ့

#xj_StatusAndShareLink {display:none}


...............................................................

ဒါေလးကေတာ့ ကိုယ္ပိုင္ စာမ်က္ႏွာ ေပၚမွာ latest activity ကို scroll ေလးထည့္ဖို႔ပါ

xg_module, .xg_module_activity {
background: url();
background-repeat: no-repeat;
background-position: center 0px;
width: 500;
height: 500px;
overflow : auto;
overflow-x: hidden;
position:relative;
margin : 3px;
text-align : center;
font-size : 10px;
font-family : arial;
border:1px solid #04B404;
}



................................................
Ads by Google ကိုေျဖာက္ထားခ်င္ရင္

.xg_ads { right:1500px; } .xg_ads { height:0px; width:0px; }