Wednesday, March 27, 2013

Image Menu ေလးေတြဖန္တီးၾကည့္ရေအာင္


How to add CSS image moving menu to blogger
 ခုတင္တဲ့ နည္းပညာေလးကေတာ့ ေခါင္းစဥ္ေတြကို ပုံေလးေတြနဲ႕ထူးဆန္းသလို အရမ္းလဲ လွပါတယ္...ဗ်ာ... ပုံေလးေတြက ေမာက္တင္တာနဲ႕ လွဳပ္ရွားေနတာပါ..အခ်ိန္မရလို႕
သည္မွာ  ဘဲ သြားၾကည့္လိုက္ပါေနာ္... မူရင္းဆိုဒ္ပါ
က်ေနာ္ ေတြ႕ ရွိတာေလးေတြကို အျမဲစမ္းသတ္ျပီးမွ တင္ေလ့ရွိပါတယ္.. ဒါေလးကိုေတာ့ အခ်ိန္မရတာနဲ႕  တင္လို္ကပါတယ္.. ကိုယ္တိုင္စမ္းသတ္ ၾကည့္ေစလိုပါတယ္...
ထည့္နည္း.............

  အဆင့္....(၁)......
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  LAYOUT    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

#imagemove {            
        padding:0;
        margin-left:30px;
        list-style-type:none;
        height:120px;
        }
#imagemove li {
        display:block;
        float:left;
        width:120px;
        height:120px;
        position:relative;
        margin:0 15px 7px 0;
        }
#imagemove li a {
        display:block;
        width:120px;
        height:120px;
        background:transparent;
        overflow:hidden;
        position:relative;
                padding:5px;
        }
#imagemove li a img {
        width:100%;
        height:100%;
        border:0;
        margin-right:30px;
        padding:5px;
        }
#imagemove li a:hover{
        position:absolute;
        left:0px;
        top:20px;
        padding:5px;
        width:120px;
        height:120px;
        z-index:100;
        }

ျပီးတာနဲ႕ ေဆ့လုိ္ကပါေနာ္....

အဆင့္...(၂)......

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


<ul id="imagemove">              
<li><a href="http://www.fobbleup.blogspot.com/"><img alt="menu 1" src="http://i43.tinypic.com/2arep5.png" title="home"/>home</a></li>

<li><a href="http://www.
fobbleup.blogspot.com/"><img alt="download" src="http://i41.tinypic.com/20pxbmc.png" title="download"/>download</a></li>

<li><a href="http://www.
fobbleup.blogspot.com/"><img alt="music" src="http://i41.tinypic.com/2rhqtlf.png" title="menu 3"/>menu 3</a></li>

<li><a href="http://www.
fobbleup.blogspot.com/"><img alt="feed" src="http://i40.tinypic.com/vqkvbl.png" title="feed"/>feed</a></li>

<li><a href="http://www.
fobbleup.blogspot.com/search?max-results=200"><img alt="search" src="http://i44.tinypic.com/2lus08g.png" title="search"/>search</a></li>
</ul>

 မွတ္ခ်က္ ။                 ။
* မိမိတို႕လင့္နဲ႕အစားထိုးလိုက္ပါ.. http://www.fobbleup.blogspot.com/ 
* အစိမ္းေရာင္ ျပထားတဲ့ ေနရာလင့္ေတြဟာ  ပုံ ရဲ႕လင့္ေတြပါ ၾကိဳက္သလို ေျပာင္းလဲ နိဳင္ပါတယ္..
ပုံေလးေတြ ဖန္တီးျပီး အဲေနရာမွာ အစားထိုးေပးလုိက္ပါ။ 
  save, လုိက္ေတာ့ေပါ့..ျပီး

No comments:

Post a Comment