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

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

5:07:00 AM  ေအာင္ေအာင္(မကစ)  NO COMMENTS

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

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

ထည့္နည္း.............

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

►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, လုိက္ေတာ့ေပါ့..ျပီး